Skip to content

Commit 6bc24ba

Browse files
RohitSharma50RohitSharma50
committed
image Crousel
1 parent 8942198 commit 6bc24ba

File tree

13 files changed

+256
-1
lines changed

13 files changed

+256
-1
lines changed

Diff for: ‎Image Slider/0.jpg

558 KB
Loading

Diff for: ‎Image Slider/index.css

+46
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
/* navbar */
2+
3+
.nav-bar {
4+
display: flex;
5+
flex-wrap: wrap;
6+
align-items: center;
7+
justify-content: center;
8+
padding: 1rem;
9+
margin-bottom: 5px;
10+
gap: 1rem;
11+
border-bottom: solid 1px #aaa;
12+
background-color: #aaa;
13+
}
14+
15+
nav a {
16+
min-width: 9rem;
17+
border-radius: 0.3rem;
18+
border: solid black;
19+
background-color: aliceblue;
20+
text-align: center;
21+
text-decoration-line: none;
22+
padding: 5px;
23+
}
24+
25+
* {
26+
box-sizing: border-box;
27+
}
28+
29+
/* navbar */
30+
31+
body {
32+
padding: 25px;
33+
background-color: white;
34+
color: black;
35+
font-size: 25px;
36+
37+
}
38+
.container{
39+
display: flex;
40+
justify-items: start;
41+
}
42+
button{
43+
height: 3em;
44+
margin-top: 25%;
45+
background-color: blueviolet;
46+
}

Diff for: ‎Image Slider/index.html

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
8+
<title>Image Slider</title>
9+
<script src="index.js" defer></script>
10+
<link rel="stylesheet" href="index.css">
11+
</head>
12+
<nav class="nav-bar">
13+
<a href="/index.html">Home</a>
14+
<a target="_blank" href="https://youtu.be/2s2sZm5gy-o?feature=shared">Youtube channel</a>
15+
<a target="_blank" href="https://github.com/RohitSharma50">Github</a>
16+
17+
18+
</nav>
19+
20+
<body >
21+
<div class="container">
22+
<button id="preBtn">Previous</button>
23+
<img id="image" src="https://media-assets.swiggy.com/swiggy/image/upload/fl_lossy,f_auto,q_auto,w_508,h_320,c_fill/RX_THUMBNAIL/IMAGES/VENDOR/2024/11/29/786d1178-6e5a-459f-9789-3ef3ee27f8b3_841660.jpg" alt="image" >
24+
<button id="nextBtn">Next</button>
25+
26+
</div>
27+
</body>
28+
29+
</html>
30+
31+

Diff for: ‎Image Slider/index.js

+49
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
2+
var index=0;
3+
const nextBtn=document.getElementById('nextBtn');
4+
const preBtn=document.getElementById('preBtn');
5+
let arr=["https://media-assets.swiggy.com/swiggy/image/upload/fl_lossy,f_auto,q_auto,w_508,h_320,c_fill/RX_THUMBNAIL/IMAGES/VENDOR/2024/11/29/786d1178-6e5a-459f-9789-3ef3ee27f8b3_841660.jpg",
6+
"https://media-assets.swiggy.com/swiggy/image/upload/fl_lossy,f_auto,q_auto,w_508,h_320,c_fill/RX_THUMBNAIL/IMAGES/VENDOR/2024/11/29/786d1178-6e5a-459f-9789-3ef3ee27f8b3_841660.jpg",
7+
"https://media-assets.swiggy.com/swiggy/image/upload/fl_lossy,f_auto,q_auto,w_508,h_320,c_fill/85ccae4e3576f9330af102c46ca85395",
8+
"https://media-assets.swiggy.com/swiggy/image/upload/fl_lossy,f_auto,q_auto,w_508,h_320,c_fill/56d5abe62452d827b7480c4f5515460a",
9+
"https://media-assets.swiggy.com/swiggy/image/upload/fl_lossy,f_auto,q_auto,w_508,h_320,c_fill/RX_THUMBNAIL/IMAGES/VENDOR/2024/9/18/88fa9ce8-bcf9-4840-adb6-cfc6f6aa93de_100721.jpg",
10+
"https://media-assets.swiggy.com/swiggy/image/upload/fl_lossy,f_auto,q_auto,w_508,h_320,c_fill/bb0922605d5672b07491402daaad9e6d",];
11+
12+
function ImageCrousel(){
13+
14+
15+
const img=document.getElementById('image');
16+
17+
if(index<0){index=5}
18+
index= index%5;
19+
img.src=arr[++index ];
20+
21+
22+
23+
24+
setTimeout(()=>{ImageCrousel()}, 5000);
25+
}
26+
ImageCrousel();
27+
28+
nextBtn.addEventListener('click',()=>{
29+
const img=document.getElementById('image');
30+
31+
if(index<0){index=3}
32+
index= index%5;
33+
img.src=arr[++index ];
34+
35+
})
36+
37+
preBtn.addEventListener('click',()=>{
38+
const img=document.getElementById('image');
39+
index= index%5;
40+
41+
if(index<0){index=6}
42+
if(index===0){index=6}
43+
44+
img.src=arr[--index];
45+
console.log(index)
46+
47+
48+
49+
})

Diff for: ‎Infinite Scroll/index.css

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
/* navbar */
2+
3+
.nav-bar {
4+
display: flex;
5+
flex-wrap: wrap;
6+
align-items: center;
7+
justify-content: center;
8+
padding: 1rem;
9+
margin-bottom: 5px;
10+
gap: 1rem;
11+
border-bottom: solid 1px #aaa;
12+
background-color: #aaa;
13+
}
14+
15+
nav a {
16+
min-width: 9rem;
17+
border-radius: 0.3rem;
18+
border: solid black;
19+
background-color: aliceblue;
20+
text-align: center;
21+
text-decoration-line: none;
22+
padding: 5px;
23+
}
24+
25+
* {
26+
box-sizing: border-box;
27+
}
28+
29+
/* navbar */
30+
31+
body {
32+
padding: 25px;
33+
background-color: white;
34+
color: black;
35+
font-size: 25px;
36+
}

Diff for: ‎Infinite Scroll/index.html

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
8+
<title>Light & Dark Mode</title>
9+
<link rel="stylesheet" href="index.css">
10+
</head>
11+
<nav class="nav-bar">
12+
<a href="/index.html">Home</a>
13+
<a target="_blank" href="https://youtu.be/2s2sZm5gy-o?feature=shared">Youtube channel</a>
14+
<a target="_blank" href="https://github.com/RohitSharma50">Github</a>
15+
16+
17+
</nav>
18+
19+
<body>
20+
<h1>Infinite Scroll Example</h1>
21+
<div id="data-container"></div>
22+
<div id="loading">Loading...</div>
23+
<script src="index.js" defer></script>
24+
25+
</body>
26+
27+
</html>
28+
29+

Diff for: ‎Infinite Scroll/index.js

+62
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
// Infinite Scroll Implementation
2+
const container = document.getElementById("data-container");
3+
const loading = document.getElementById("loading");
4+
5+
// Variables to control the data fetch
6+
let page = 1; // Current page number
7+
let limit = 10; // Number of items per fetch
8+
let isLoading = false; // Prevent multiple triggers
9+
10+
// Function to simulate fetching data (API Call)
11+
async function fetchData(page, limit) {
12+
return new Promise((resolve) => {
13+
setTimeout(() => {
14+
const data = [];
15+
for (let i = 1; i <= limit; i++) {
16+
data.push(`Item ${i + (page - 1) * limit}`);
17+
}
18+
resolve(data);
19+
}, 1000); // Simulate a 1-second API delay
20+
});
21+
}
22+
23+
// Function to render data
24+
function renderData(items) {
25+
items.forEach((item) => {
26+
const div = document.createElement("div");
27+
div.classList.add("item");
28+
div.textContent = item;
29+
container.appendChild(div);
30+
});
31+
}
32+
33+
// Function to load more data
34+
async function loadMoreData() {
35+
if (isLoading) return; // Avoid duplicate fetches
36+
isLoading = true;
37+
loading.style.display = "block"; // Show the loading indicator
38+
39+
try {
40+
const data = await fetchData(page, limit);
41+
renderData(data);
42+
page++; // Increment page number
43+
} catch (error) {
44+
console.error("Error fetching data:", error);
45+
} finally {
46+
isLoading = false;
47+
loading.style.display = "none"; // Hide the loading indicator
48+
}
49+
}
50+
51+
// Scroll Event Listener
52+
window.addEventListener("scroll", () => {
53+
const { scrollTop, scrollHeight, clientHeight } = document.documentElement;
54+
55+
// Check if we are close to the bottom of the page
56+
if (scrollTop + clientHeight >= scrollHeight - 10 && !isLoading) {
57+
loadMoreData();
58+
}
59+
});
60+
61+
loadMoreData();
62+

Diff for: ‎img/1.jpg

7.13 KB
Loading

Diff for: ‎img/2.jpg

31.6 KB
Loading

Diff for: ‎img/JS Challanges.png renamed to ‎img/3.png

File renamed without changes.

Diff for: ‎img/4.png

87.2 KB
Loading

Diff for: ‎img/5.png

129 KB
Loading

Diff for: ‎index.html

+3-1
Original file line numberDiff line numberDiff line change
@@ -27,8 +27,10 @@ <h1>Javascript-Challanges</h1>
2727
<a class="project-link" href="./Meme generator/index.html">Project 6 - Meme Generator 🧠</a>
2828
<a class="project-link" href="./todo-list/index.html">Project 7 - Todo-List 👀</a>
2929
<a class="project-link" href="./Tic-Tac-Toe/index.html">Project 8 - Tic-Tac- Toe 📚 </a>
30-
<a class="project-link" href="./9-mouseCircle/index.html">Project 9 - 📚 </a>
30+
<a class="project-link" href="./Infinite Scroll/index.html">Project 9 - Infinite Scroll📚 </a>
31+
<a class="project-link" href="./Image Slider/index.html">Project 10 - Image Slider 🫥 </a>
3132
<a class="project-link" href="./10-emoji/index.html">Project 10 - Emoji 🫥 </a>
33+
3234
</div>
3335
</main>
3436
</body>

0 commit comments

Comments
 (0)