Skip to content
This repository was archived by the owner on Dec 18, 2024. It is now read-only.

Commit b2fe2e0

Browse files
zelihapalazelihapala
committed
js and css-htlm updated
1 parent 3511f66 commit b2fe2e0

File tree

4 files changed

+165
-11
lines changed

4 files changed

+165
-11
lines changed

‎package-lock.json‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎week-3/slideshow/index.html‎

Lines changed: 15 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,23 @@
33
<head>
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<title>Title here</title>
6+
<title>Slideshow</title>
7+
<link rel="stylesheet" href="style.css" />
78
<script defer src="slideshow.js"></script>
89
</head>
910
<body>
10-
<img id="carousel-img" src="./assets/cute-cat-a.png" alt="cat-pic" />
11-
<button type="button" id="backward-btn">Backwards</button>
12-
<button type="button" id="forward-btn">Forward</button>
11+
<div id="carousel-container">
12+
<div class="slider">
13+
<img id="carousel-img" src="./assets/cute-cat-a.png" alt="cat-pic" />
14+
</div>
15+
16+
<div id="btns">
17+
<button type="button" id="auto-forward">Auto Forward</button>
18+
<button type="button" id="backward-btn">Back</button>
19+
<button type="button" id="stop">Stop</button>
20+
<button type="button" id="forward-btn">Forward</button>
21+
<button type="button" id="auto-backward">Auto Back</button>
22+
</div>
23+
</div>
1324
</body>
1425
</html>

‎week-3/slideshow/slideshow.js‎

Lines changed: 91 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,95 @@
1+
// slideshow.js
2+
13
const images = [
2-
"./assets/cute-cat-a.png",
3-
"./assets/cute-cat-b.jpg",
4-
"./assets/cute-cat-c.jpg",
4+
"./assets/cute-cat-a.png",
5+
"./assets/cute-cat-b.jpg",
6+
"./assets/cute-cat-c.jpg",
57
];
68

9+
let currentIndex = 0;
10+
let intervalId;
11+
12+
const imageElement = document.getElementById("carousel-img");
13+
const forwardButton = document.getElementById("forward-btn");
14+
const backwardButton = document.getElementById("backward-btn");
15+
const autoForwardButton = document.getElementById("auto-forward");
16+
const autoBackwardButton = document.getElementById("auto-backward");
17+
const stopButton = document.getElementById("stop");
18+
const imgDiv = document.querySelector(".slider");
19+
20+
//added backward and forward point btns- created div for them
21+
const pointDiv = document.createElement("div");
22+
pointDiv.setAttribute("id", "pointDiv");
23+
imgDiv.after(pointDiv);
24+
25+
const forwardPoint = document.createElement("button");
26+
forwardPoint.setAttribute("id", "forwardPoint");
27+
forwardPoint.innerText = ">";
28+
pointDiv.append(forwardPoint);
29+
30+
const backwardPoint = document.createElement("button");
31+
backwardPoint.setAttribute("id", "backwardPoint");
32+
backwardPoint.innerText = "<";
33+
pointDiv.prepend(backwardPoint);
34+
35+
//...........
36+
37+
function updateImage() {
38+
imageElement.src = images[currentIndex];
39+
}
40+
41+
function moveForward() {
42+
currentIndex = (currentIndex + 1) % images.length;
43+
updateImage();
44+
}
45+
46+
function moveBackward() {
47+
currentIndex = (currentIndex - 1 + images.length) % images.length;
48+
updateImage();
49+
}
50+
51+
function startAutoForward() {
52+
intervalId = setInterval(moveForward, 2000);
53+
autoForwardButton.disabled = true;
54+
autoBackwardButton.disabled = true;
55+
}
56+
57+
function startAutoBackward() {
58+
intervalId = setInterval(moveBackward, 2000);
59+
autoForwardButton.disabled = true;
60+
autoBackwardButton.disabled = true;
61+
}
62+
63+
function stopAuto() {
64+
clearInterval(intervalId);
65+
autoForwardButton.disabled = false;
66+
autoBackwardButton.disabled = false;
67+
}
68+
69+
const btns = document.getElementById("btns");
70+
btns.addEventListener("click", function changeImg(event) {
71+
const target = event.target;
72+
if (target.id === "auto-backward") {
73+
startAutoForward();
74+
} else if (target.id === "forward-btn") {
75+
moveForward();
76+
} else if (target.id === "stop") {
77+
stopAuto();
78+
} else if (target.id === "backward-btn") {
79+
moveBackward();
80+
} else if (target.id === "auto-forward") {
81+
startAutoForward();
82+
}
83+
});
84+
85+
backwardPoint.addEventListener("click", moveBackward);
86+
forwardPoint.addEventListener("click", moveForward);
87+
88+
/* forwardButton.addEventListener("click", moveForward);
89+
backwardButton.addEventListener("click", moveBackward);
90+
autoForwardButton.addEventListener("click", startAutoForward);
91+
autoBackwardButton.addEventListener("click", startAutoBackward);
92+
stopButton.addEventListener("click", stopAuto); */
793

8-
// Write your code here
94+
// Initial image display
95+
window.onload = updateImage;

‎week-3/slideshow/style.css‎

Lines changed: 57 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,57 @@
1-
/** Write your CSS in here **/
1+
/* style.css */
2+
3+
body {
4+
font-family: Arial, sans-serif;
5+
margin: 0;
6+
padding: 0;
7+
background-color: #f4f4f4;
8+
}
9+
10+
#carousel-container {
11+
max-width: 800px;
12+
margin-top: 50px;
13+
margin-left: auto;
14+
margin-right: auto;
15+
}
16+
17+
.slider {
18+
width: 450px;
19+
height: 300px;
20+
margin: auto;
21+
overflow: hidden;
22+
border: 1px solid #ccc;
23+
box-shadow: 0 0 10px rgba(0, 0, 0, 3.1);
24+
border-radius: 5px;
25+
}
26+
27+
.slider img {
28+
width: 100%;
29+
height: 100%;
30+
object-fit: cover;
31+
}
32+
33+
#btns {
34+
text-align: center;
35+
margin-top: 20px;
36+
}
37+
38+
button {
39+
padding: 10px 15px;
40+
margin: 5px;
41+
cursor: pointer;
42+
background-color: #77797c;
43+
color: #fff;
44+
font-size: 14px;
45+
border: none;
46+
border-radius: 10px;
47+
}
48+
49+
button:hover {
50+
background-color: #85718d;
51+
}
52+
53+
#pointDiv {
54+
display: flex;
55+
justify-content: center;
56+
margin-top: 15px;
57+
}

0 commit comments

Comments
 (0)