From 10e864be754eccb54cd969efe48b7fda26bb00f4 Mon Sep 17 00:00:00 2001 From: Preeti Tyagi <68293926+preeti-t@users.noreply.github.com> Date: Wed, 10 Dec 2025 10:51:01 +0100 Subject: [PATCH 1/3] Update style.css added styling --- Sprint-3/slideshow/style.css | 36 ++++++++++++++++++++++++++++++++++++ 1 file changed, 36 insertions(+) diff --git a/Sprint-3/slideshow/style.css b/Sprint-3/slideshow/style.css index 63cedf2d2..ac7e3ebee 100644 --- a/Sprint-3/slideshow/style.css +++ b/Sprint-3/slideshow/style.css @@ -1 +1,37 @@ /** Write your CSS in here **/ +body { + background-color: rgb(242, 106, 106); +} + +#carousel-img { + width: 745px; + height: 559px; + object-fit: cover; + display: block; + margin: 0 auto; + border-radius: 8px; /* minor visual improvement */ +} + +#button-container { + display: flex; + justify-content: center; + gap: 12px; /* slightly smoother spacing */ + margin-top: 20px; +} + +.button { + background-color: bisque; + font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; + font-size: 16px; /* fixing invalid font-size line */ + font-style: oblique; + border-radius: 8px; + padding: 10px 24px; + cursor: pointer; + border: none; /* minor improvement */ + transition: transform 0.2s ease; /* subtle UX enhancement */ +} + +.button:hover { + transform: scale(1.05); +} + From b1a6738f4602367cb30976d7d61a33c8b02dccde Mon Sep 17 00:00:00 2001 From: Preeti Tyagi <68293926+preeti-t@users.noreply.github.com> Date: Wed, 10 Dec 2025 10:54:07 +0100 Subject: [PATCH 2/3] Update index.html added html --- Sprint-3/slideshow/index.html | 49 +++++++++++++++++++++++++---------- 1 file changed, 35 insertions(+), 14 deletions(-) diff --git a/Sprint-3/slideshow/index.html b/Sprint-3/slideshow/index.html index 50f2eb1c0..796c90b1f 100644 --- a/Sprint-3/slideshow/index.html +++ b/Sprint-3/slideshow/index.html @@ -1,14 +1,35 @@ - - - - - - Title here - - - - cat-pic - - - - +body { + background-color: rgb(242, 106, 106); +} + +#carousel-img { + width: 745px; + height: 559px; + object-fit: cover; + display: block; + margin: 0 auto; + border-radius: 8px; /* minor visual improvement */ +} + +#button-container { + display: flex; + justify-content: center; + gap: 12px; /* slightly smoother spacing */ + margin-top: 20px; +} + +.button { + background-color: bisque; + font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; + font-size: 16px; /* fixing invalid font-size line */ + font-style: oblique; + border-radius: 8px; + padding: 10px 24px; + cursor: pointer; + border: none; /* minor improvement */ + transition: transform 0.2s ease; /* subtle UX enhancement */ +} + +.button:hover { + transform: scale(1.05); +} From 9481186b39c58f1f1912237ba77adea5ef78dda5 Mon Sep 17 00:00:00 2001 From: Preeti Tyagi <68293926+preeti-t@users.noreply.github.com> Date: Wed, 10 Dec 2025 10:56:21 +0100 Subject: [PATCH 3/3] Update slideshow.js added code --- Sprint-3/slideshow/slideshow.js | 67 ++++++++++++++++++++++++++++++++- 1 file changed, 65 insertions(+), 2 deletions(-) diff --git a/Sprint-3/slideshow/slideshow.js b/Sprint-3/slideshow/slideshow.js index 063ceefb5..7e86a11a6 100644 --- a/Sprint-3/slideshow/slideshow.js +++ b/Sprint-3/slideshow/slideshow.js @@ -1,8 +1,71 @@ -const images = [ +window.images = [ "./assets/cute-cat-a.png", "./assets/cute-cat-b.jpg", "./assets/cute-cat-c.jpg", ]; +let currentIndex = 0; +let intervalId = null; -// Write your code here \ No newline at end of file +// Moves carousel one step (forward or backward) +function moveFrontOnce(forward) { + const images = window.images; + + currentIndex = forward + ? (currentIndex + 1) % images.length + : (currentIndex - 1 + images.length) % images.length; + + const image = document.getElementById("carousel-img"); + if (image) image.src = images[currentIndex]; // cleaner + safer +} + +// Starts automatic forward movement +function startAutoForward() { + stopAuto(); + intervalId = setInterval(() => moveFrontOnce(true), 2000); + toggleButtons(true); +} + +// Starts automatic backward movement +function startAutoBackward() { + stopAuto(); + intervalId = setInterval(() => moveFrontOnce(false), 2000); + toggleButtons(true); +} + +// Stops any active autoplay +function stopAuto() { + if (intervalId) { + clearInterval(intervalId); + intervalId = null; + } + toggleButtons(false); +} + +// Enables/disables control buttons +function toggleButtons(isRunning) { + document.getElementById("auto-forward").disabled = isRunning; + document.getElementById("auto-backward").disabled = isRunning; + document.getElementById("stop").disabled = !isRunning; +} + +// Register button click handlers +document.addEventListener("DOMContentLoaded", () => { + document.getElementById("forward-btn") + .addEventListener("click", () => moveFrontOnce(true)); + + document.getElementById("backward-btn") + .addEventListener("click", () => moveFrontOnce(false)); + + document.getElementById("auto-forward") + .addEventListener("click", startAutoForward); + + document.getElementById("auto-backward") + .addEventListener("click", startAutoBackward); + + document.getElementById("stop") + .addEventListener("click", stopAuto); + + // Stop is disabled initially + document.getElementById("stop").disabled = true; +});