Skip to content

Commit aa638a4

Browse files
author
Jimmy
committed
First Commit
1 parent 2dbe248 commit aa638a4

File tree

5 files changed

+326
-1
lines changed

5 files changed

+326
-1
lines changed

‎mini-project/calculator/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,6 @@
3737
<button class="all-clear" value="AC">C</button>
3838
</div>
3939
</div>
40-
<script src="index.js"></script>
4140
</body>
41+
<script src="index.js"></script>
4242
</html>

‎mini-project/carosel-image-slider/index.html‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Image Carousel Apps</title>
7+
<link rel="stylesheet" href="styles.css">
8+
</head>
9+
<body>
10+
<div class="container">
11+
<header>
12+
<h1>Welcome to project Carosel</h1>
13+
<h2>Follow for more project</h2>
14+
</header>
15+
<div class="carousel-container">
16+
<div class="carousel-slide">
17+
<img src="https://4kwallpapers.com/images/walls/thumbs_3t/19127.jpg" alt="">
18+
<img src="https://4kwallpapers.com/images/walls/thumbs_3t/13633.jpg" alt="">
19+
<img src="https://4kwallpapers.com/images/walls/thumbs_3t/16933.png" alt="">
20+
<img src="https://4kwallpapers.com/images/walls/thumbs_3t/15361.jpg" alt="">
21+
<img src="https://4kwallpapers.com/images/walls/thumbs_3t/17522.jpg" alt="">
22+
</div>
23+
24+
<button class="prev-btn">&#10094</button>
25+
<button class="next-btn">&#10095</button>
26+
27+
<div class="carousel-indicators">
28+
<span class="indicator activte"></span>
29+
<span class="indicator"></span>
30+
<span class="indicator"></span>
31+
<span class="indicator"></span>
32+
<span class="indicator"></span>
33+
</div>
34+
</div>
35+
</div>
36+
</body>
37+
<script src="index.js"></script>
38+
</html>

‎mini-project/carosel-image-slider/index.js‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
const carouselSlide = document.querySelector('.carousel-slide')
2+
3+
const carouselImages = document.querySelectorAll('.carousel-slide img')
4+
5+
const prevBtn = document.querySelector('.prev-btn')
6+
const nextBtn = document.querySelector('.next-btn')
7+
8+
const indicators = document.querySelectorAll('.indicator')
9+
10+
let currentIndex = 0
11+
const totalImages = carouselImages.length
12+
13+
let autoSlideInterval;
14+
15+
function updateCarousel(){
16+
carouselSlide.style.transform = `translateX(${-currentIndex *100}%)`
17+
18+
indicators.forEach((indicator, index) => {
19+
indicator.classList.toggle('active', index === currentIndex)
20+
})
21+
}
22+
23+
function nextSlide(){
24+
currentIndex = (currentIndex + 1) % totalImages
25+
updateCarousel()
26+
resetAutoSlide()
27+
}
28+
29+
function prevSlide(){
30+
currentIndex = (currentIndex - 1 + totalImages) % totalImages
31+
updateCarousel()
32+
resetAutoSlide()
33+
}
34+
35+
function resetAutoSlide(){
36+
clearInterval(autoSlideInterval)
37+
38+
autoSlideInterval = setInterval('click', nextSlide)
39+
}
40+
41+
nextBtn.addEventListener('click', nextSlide)
42+
43+
44+
prevBtn.addEventListener('click', prevSlide)
45+
46+
autoSlideInterval = setInterval(nextSlide, 5000)
47+
48+
indicators.forEach((indicator, index) => {
49+
indicator.addEventListener('click', () => {
50+
currentIndex = index
51+
updateCarousel()
52+
resetAutoSlide()
53+
})
54+
})

‎mini-project/carosel-image-slider/styles.css‎

Lines changed: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
* {
2+
box-sizing: border-box;
3+
}
4+
5+
body {
6+
font-family: 'Aria', sans-serif;
7+
margin: 0;
8+
padding: 0;
9+
background-color: #f0f0f0;
10+
display: flex;
11+
justify-content: center;
12+
align-items: center;
13+
height: 100vh;
14+
overflow: hidden;
15+
}
16+
17+
.container{
18+
display: flex;
19+
flex-direction: column;
20+
}
21+
22+
header {
23+
text-align: center;
24+
margin: 1.5rem;
25+
}
26+
27+
header h1 {
28+
color: #333;
29+
font-size: 1.5rem;
30+
margin-bottom: .5rem;
31+
}
32+
33+
header h2 {
34+
color: #666;
35+
font-size: 1rem;
36+
font-weight: 400;
37+
}
38+
39+
.carousel-container {
40+
position: relative;
41+
max-width: 800px;
42+
width: 100%;
43+
overflow: hidden;
44+
border-radius: 1rem;
45+
box-shadow: 0 8 16px rgba(0, 0, 0, .1);
46+
}
47+
.carousel-slide{
48+
display: flex;
49+
transition: transform 0.4s ease-in-out;
50+
}
51+
52+
.carousel-slide img{
53+
width: 100%;
54+
border-radius: 1rem;
55+
}
56+
57+
.prev-btn,
58+
.next-btn {
59+
position: absolute;
60+
top: 50%;
61+
transform: translateY(-1rem);
62+
background-color: rgba(255, 255, 255, 0.1);
63+
color: rgb(0, 0, 0);
64+
border: none;
65+
font-size: 1.5rem;
66+
cursor: pointer;
67+
padding-inline-start: .6rem;
68+
border-radius: .6rem;
69+
z-index: 1;
70+
}
71+
72+
.prev-btn {
73+
left: .5rem;
74+
}
75+
76+
.next-btn {
77+
right: .5rem;
78+
}
79+
80+
.prev-btn:hover,
81+
.next-btn:hover {
82+
background-color: rgba(255, 255, 255, 0.5);
83+
}
84+
85+
.carousel-indicators {
86+
position: absolute;
87+
bottom: 1.2rem;
88+
left: 50%;
89+
transform: translateX(-50%);
90+
display: flex;
91+
justify-content: center;
92+
gap: .6rem;
93+
}
94+
95+
.indicator {
96+
width: .7rem;
97+
height: .7rem;
98+
background-color: rgba(255, 255, 255, .5);
99+
border-radius: 50%;
100+
cursor: pointer;
101+
transition: background-color .3s ease;
102+
}
103+
104+
.indicator.active {
105+
background-color: rgba(255, 255, 255, .9);
106+
}
107+
.indicator:hover{
108+
background-color: rgba(255,255,255,0.7);
109+
}
110+
111+
@media (max-width: 768px){
112+
.prev-btn, .next-btn {
113+
font-size: 1.2rem;
114+
padding: .5rem;
115+
}
116+
117+
.indicator {
118+
width: .6rem;
119+
height: .6rem;
120+
}
121+
}

‎mini-project/sample.html‎

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Project Folder List</title>
7+
<style>
8+
body {
9+
font-family: Arial, sans-serif;
10+
background-color: #f4f4f4;
11+
margin: 0;
12+
padding: 20px;
13+
}
14+
15+
h1 {
16+
text-align: center;
17+
margin-bottom: 20px;
18+
}
19+
20+
article {
21+
display: flex;
22+
flex-wrap: wrap; /* Allow cards to wrap to the next line */
23+
justify-content: center; /* Center the cards */
24+
gap: 20px; /* Space between cards */
25+
}
26+
27+
.card {
28+
background-color: white;
29+
border-radius: 10px;
30+
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
31+
margin: 15px;
32+
padding: 10px;
33+
position: relative;
34+
width: 100%; /* Set width to 100% for responsive design */
35+
max-width: 400px; /* Set a max-width for the card */
36+
height: 300px; /* Set height for card */
37+
overflow: hidden; /* Hide overflow */
38+
}
39+
40+
.card a {
41+
text-decoration: none;
42+
color: #333;
43+
font-size: 18px; /* Font size for the link */
44+
font-weight: bold;
45+
display: block;
46+
margin-top: 10px;
47+
text-align: center;
48+
}
49+
50+
iframe {
51+
width: 100%; /* Full width of the card */
52+
height: 100%; /* Full height of the card */
53+
border: none;
54+
border-radius: 10px;
55+
transform: scale(0.8); /* Scale down to 80% */
56+
position: absolute; /* Position absolute to control placement */
57+
top: 10%; /* Adjust position to center vertically */
58+
left: 0; /* Align to the left */
59+
overflow: hidden; /* Prevent scrolling */
60+
}
61+
62+
.overlay {
63+
position: absolute;
64+
top: 0;
65+
left: 0;
66+
width: 100%;
67+
height: 100%;
68+
background-color: rgba(255, 255, 255, 0.8); /* White background with transparency */
69+
z-index: 1; /* On top of the iframe */
70+
display: flex;
71+
align-items: center;
72+
justify-content: center;
73+
opacity: 0; /* Initially hidden */
74+
transition: opacity 0.3s ease; /* Smooth transition for hover effect */
75+
}
76+
77+
.card:hover .overlay {
78+
opacity: 1; /* Show overlay on hover */
79+
}
80+
81+
.card:hover {
82+
transform: scale(1.05); /* Scale card on hover */
83+
transition: transform 0.3s ease; /* Smooth transition for scaling */
84+
}
85+
</style>
86+
</head>
87+
<body>
88+
<h1>Project Folders</h1>
89+
<article>
90+
<div class="card">
91+
<iframe src="calculator/index.html" title="Calculator Project" scrolling="no"></iframe>
92+
<div class="overlay">View in new tab</div>
93+
<a href="calculator/index.html" target="_blank">Open Calculator</a>
94+
</div>
95+
<div class="card">
96+
<iframe src="color-picker/index.html" title="Color Picker Project" scrolling="no"></iframe>
97+
<div class="overlay">View in new tab</div>
98+
<a href="color-picker/index.html" target="_blank">Open Color Picker</a>
99+
</div>
100+
<div class="card">
101+
<iframe src="countdown-timer/index.html" title="Countdown Timer Project" scrolling="no"></iframe>
102+
<div class="overlay">View in new tab</div>
103+
<a href="countdown-timer/index.html" target="_blank">Open Countdown Timer</a>
104+
</div>
105+
<div class="card">
106+
<iframe src="random-quote-generator/index.html" title="Random Quote Generator Project" scrolling="no"></iframe>
107+
<div class="overlay">View in new tab</div>
108+
<a href="random-quote-generator/index.html" target="_blank">Open Random Quote Generator</a>
109+
</div>
110+
</article>
111+
</body>
112+
</html>

0 commit comments

Comments
 (0)