From 8bd12b5dbbebdba0c64adf3d92df874678a35f03 Mon Sep 17 00:00:00 2001 From: Reza-Jahanimir Date: Wed, 16 Jul 2025 17:51:04 +0100 Subject: [PATCH 1/7] change title --- Sprint-3/slideshow/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Sprint-3/slideshow/index.html b/Sprint-3/slideshow/index.html index 50f2eb1c0..71e0c8dfa 100644 --- a/Sprint-3/slideshow/index.html +++ b/Sprint-3/slideshow/index.html @@ -3,7 +3,7 @@ - Title here + Image carousel From 64c51d631e69d82b02a0f48e2c1d385847f5ce58 Mon Sep 17 00:00:00 2001 From: Reza-Jahanimir Date: Wed, 16 Jul 2025 17:53:12 +0100 Subject: [PATCH 2/7] modify the html --- Sprint-3/slideshow/index.html | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/Sprint-3/slideshow/index.html b/Sprint-3/slideshow/index.html index 71e0c8dfa..22c918e62 100644 --- a/Sprint-3/slideshow/index.html +++ b/Sprint-3/slideshow/index.html @@ -7,8 +7,14 @@ + +

Image Carousel. Level 1 Demo.

+ cat-pic - - + +
+ + +
From 209dd544dad0e2811726466f780e31545dda607e Mon Sep 17 00:00:00 2001 From: Reza-Jahanimir Date: Wed, 16 Jul 2025 17:56:07 +0100 Subject: [PATCH 3/7] added style --- Sprint-3/slideshow/style.css | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/Sprint-3/slideshow/style.css b/Sprint-3/slideshow/style.css index 63cedf2d2..ac5ffa849 100644 --- a/Sprint-3/slideshow/style.css +++ b/Sprint-3/slideshow/style.css @@ -1 +1,25 @@ /** Write your CSS in here **/ +body { + font-family: Arial, sans-serif; + text-align: center; + margin-top: 40px; +} + +img { + width: 400px; + height: 300px; + border: 3px solid #ccc; + margin: 20px 0; +} + +.buttons { + display: flex; + justify-content: center; + gap: 10px; +} + +button { + font-size: 16px; + padding: 10px 20px; + cursor: pointer; +} \ No newline at end of file From c51cc7b65f7bbef87c8755a1b47a392eb00f7fe8 Mon Sep 17 00:00:00 2001 From: Reza-Jahanimir Date: Wed, 16 Jul 2025 19:22:34 +0100 Subject: [PATCH 4/7] modify the style --- Sprint-3/slideshow/style.css | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/Sprint-3/slideshow/style.css b/Sprint-3/slideshow/style.css index ac5ffa849..816a8266e 100644 --- a/Sprint-3/slideshow/style.css +++ b/Sprint-3/slideshow/style.css @@ -5,11 +5,13 @@ body { margin-top: 40px; } -img { - width: 400px; - height: 300px; +#carousel-img { + width: 400px; + height: 300px; + object-fit: cover; border: 3px solid #ccc; margin: 20px 0; + border-radius: 8px; } .buttons { From bca6e25ea1e5620f336a5d897f116e0cddc51b0e Mon Sep 17 00:00:00 2001 From: Reza-Jahanimir Date: Wed, 16 Jul 2025 19:36:25 +0100 Subject: [PATCH 5/7] first attempt to code with out testing --- Sprint-3/slideshow/slideshow.js | 45 ++++++++++++++++++++++++++++++++- 1 file changed, 44 insertions(+), 1 deletion(-) diff --git a/Sprint-3/slideshow/slideshow.js b/Sprint-3/slideshow/slideshow.js index 063ceefb5..dc76c54df 100644 --- a/Sprint-3/slideshow/slideshow.js +++ b/Sprint-3/slideshow/slideshow.js @@ -5,4 +5,47 @@ const images = [ ]; -// Write your code here \ No newline at end of file +// Write your code here + +let currentIndex = 0; +const image = document.querySelector("#carousel-img"); + + +// Displays the image at the given index from the images array by updating the src of the image element. +function showImage(index) { + image.src = images[index]; +} + + +// Increments the currentIndex by 1 to move forward in the image list. +// If it's the last image, it wraps back to the first using modular arithmetic (%). +function moveImageForward() { + currentIndex = (currentIndex + 1) % images.length; + showImage(currentIndex); +} + + +// Decrements the currentIndex to go back to the previous image. +// If it's the first image, it wraps around to the last one using modular arithmetic to stay within bounds. +function moveImageBackward() { + currentIndex = (currentIndex - 1 + images.length) % images.length; + showImage(currentIndex); +} + + +function setup() { + + document.querySelector("#backward-btn").addEventListener("click", ( ) => { + moveImageBackward() + }); + + document.querySelector("#forward-btn").addEventListener("click", ( ) => { + moveImageForward() + }); + + // Show first image on load + showImage(currentIndex); + +}; + +setup(); \ No newline at end of file From 1a5b8468c3323d00b10972e6aca131cb5cdfb75e Mon Sep 17 00:00:00 2001 From: Reza-Jahanimir Date: Wed, 16 Jul 2025 20:23:38 +0100 Subject: [PATCH 6/7] I added Level 2 functionality to my code --- Sprint-3/slideshow/index.html | 3 +++ Sprint-3/slideshow/slideshow.js | 35 ++++++++++++++++++++++++++++++++- 2 files changed, 37 insertions(+), 1 deletion(-) diff --git a/Sprint-3/slideshow/index.html b/Sprint-3/slideshow/index.html index 22c918e62..2c94e8b5f 100644 --- a/Sprint-3/slideshow/index.html +++ b/Sprint-3/slideshow/index.html @@ -13,8 +13,11 @@

Image Carousel. Level 1 Demo.

cat-pic
+ + +
diff --git a/Sprint-3/slideshow/slideshow.js b/Sprint-3/slideshow/slideshow.js index dc76c54df..8a5687ce8 100644 --- a/Sprint-3/slideshow/slideshow.js +++ b/Sprint-3/slideshow/slideshow.js @@ -6,7 +6,8 @@ const images = [ // Write your code here - +let forwardInterval; +let backwardInterval; let currentIndex = 0; const image = document.querySelector("#carousel-img"); @@ -33,16 +34,48 @@ function moveImageBackward() { } +// This function will be used to automatically move forward through the images. +// You can implement a timer or interval here to call moveImageForward() repeatedly. +function autoForward() { + + forwardInterval = setInterval(moveImageForward, 2000); +}; + + +// This function will be used to automatically move backward through the images. +// You can implement a timer or interval here to call moveImageBackward() repeatedly. +function autoBackward() { + backwardInterval = setInterval(moveImageBackward, 2000); +}; + +function stopButton() { + clearInterval(forwardInterval); + clearInterval(backwardInterval); +}; + + function setup() { document.querySelector("#backward-btn").addEventListener("click", ( ) => { moveImageBackward() }); + document.querySelector("#stop").addEventListener("click", ( ) => { + stopButton() + }); + document.querySelector("#forward-btn").addEventListener("click", ( ) => { moveImageForward() }); + document.querySelector("#auto-backwards").addEventListener("click", ( ) => { + autoBackward() + }); + + document.querySelector("#auto-forward").addEventListener("click", ( ) => { + autoForward() + }); + // Show first image on load showImage(currentIndex); From 089d561ac5f3a90ec3ed487c8749b15ac249a009 Mon Sep 17 00:00:00 2001 From: Reza-Jahanimir Date: Wed, 16 Jul 2025 20:42:57 +0100 Subject: [PATCH 7/7] changed the logic of my code so it can pass the tests --- Sprint-3/slideshow/index.html | 2 +- Sprint-3/slideshow/slideshow.js | 26 ++++++++++++++++++-------- 2 files changed, 19 insertions(+), 9 deletions(-) diff --git a/Sprint-3/slideshow/index.html b/Sprint-3/slideshow/index.html index 2c94e8b5f..aefad8e08 100644 --- a/Sprint-3/slideshow/index.html +++ b/Sprint-3/slideshow/index.html @@ -13,7 +13,7 @@

Image Carousel. Level 1 Demo.

cat-pic
- + diff --git a/Sprint-3/slideshow/slideshow.js b/Sprint-3/slideshow/slideshow.js index 8a5687ce8..67fd110c0 100644 --- a/Sprint-3/slideshow/slideshow.js +++ b/Sprint-3/slideshow/slideshow.js @@ -6,9 +6,8 @@ const images = [ // Write your code here -let forwardInterval; -let backwardInterval; let currentIndex = 0; +let autoTimer = null; const image = document.querySelector("#carousel-img"); @@ -37,22 +36,33 @@ function moveImageBackward() { // This function will be used to automatically move forward through the images. // You can implement a timer or interval here to call moveImageForward() repeatedly. function autoForward() { - - forwardInterval = setInterval(moveImageForward, 2000); + autoTimer = setInterval(moveImageForward, 2000); + disableAutoButtons(); }; // This function will be used to automatically move backward through the images. // You can implement a timer or interval here to call moveImageBackward() repeatedly. function autoBackward() { - backwardInterval = setInterval(moveImageBackward, 2000); + autoTimer = setInterval(moveImageBackward, 2000); + disableAutoButtons(); }; function stopButton() { - clearInterval(forwardInterval); - clearInterval(backwardInterval); + clearInterval(autoTimer); + autoTimer = null; + enableAutoButtons(); }; +function disableAutoButtons() { + document.querySelector("#auto-forward").disabled = true; + document.querySelector("#auto-backward").disabled = true; +} + +function enableAutoButtons() { + document.querySelector("#auto-forward").disabled = false; + document.querySelector("#auto-backward").disabled = false; +} function setup() { @@ -68,7 +78,7 @@ function setup() { moveImageForward() }); - document.querySelector("#auto-backwards").addEventListener("click", ( ) => { + document.querySelector("#auto-backward").addEventListener("click", ( ) => { autoBackward() });