From bf6aa6cb53a5dd6c0785a9ea2679ca0749a77b34 Mon Sep 17 00:00:00 2001 From: miriamjorna Date: Sun, 19 Apr 2026 00:57:31 +0100 Subject: [PATCH 1/5] Slideshow Level 1 --- Sprint-3/slideshow/index.html | 13 ++++++++----- Sprint-3/slideshow/slideshow.js | 30 ++++++++++++++++++++++++++---- Sprint-3/slideshow/style.css | 26 +++++++++++++++++++++++++- 3 files changed, 59 insertions(+), 10 deletions(-) diff --git a/Sprint-3/slideshow/index.html b/Sprint-3/slideshow/index.html index 50f2eb1c0..75ffa88d3 100644 --- a/Sprint-3/slideshow/index.html +++ b/Sprint-3/slideshow/index.html @@ -1,14 +1,17 @@ - + - Title here + Image carousel - cat-pic - - +

Giraffe Gallery

+
+ + Giraffe + +
diff --git a/Sprint-3/slideshow/slideshow.js b/Sprint-3/slideshow/slideshow.js index 063ceefb5..bb1284fe8 100644 --- a/Sprint-3/slideshow/slideshow.js +++ b/Sprint-3/slideshow/slideshow.js @@ -1,8 +1,30 @@ const images = [ - "./assets/cute-cat-a.png", - "./assets/cute-cat-b.jpg", - "./assets/cute-cat-c.jpg", + "https://unsplash.com/photos/three-giraffes-on-brown-grass-field-during-daytime-eQdDUdi5qLk", + "https://unsplash.com/photos/a-group-of-giraffes-standing-on-a-dirt-road-nUwKN_3PQ7c", + "https://unsplash.com/photos/giraffe-drinking-water-q73Ehqc4OqY", + "https://unsplash.com/photos/a-giraffe-standing-next-to-a-tree-in-a-field-aWNGjRw4QpM", ]; +let currentIndex = 0; -// Write your code here \ No newline at end of file +const slide = document.getElementById("slide"); +const backButton = document.getElementById("back"); +const forwardButton = document.getElementById("forward"); + +function updateSlide() { + slide.src = images[currentIndex]; +} + +backButton.addEventListener("click", () => { + currentIndex = (currentIndex - 1 + images.length) % images.length; + updateSlide(); +}); + +forwardButton.addEventListener("click", () => { + currentIndex = (currentIndex + 1) % images.length; + // makes a loop so that the last pic leads to the first pic and vv + updateSlide(); +}); + +// show first image on load +updateSlide(); diff --git a/Sprint-3/slideshow/style.css b/Sprint-3/slideshow/style.css index 63cedf2d2..bc30a326c 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; +} + +#slideshow { + display: flex; + align-items: center; + justify-content: center; + gap: 20px; + margin-top: 30px; +} + +#slide { + width: 600px; + height: 400px; + object-fit: cover; + border-radius: 10px; +} + +button { + padding: 10px 20px; + font-size: 1rem; + cursor: pointer; +} From 66b8e60d4c4826d5fb7f041c70d4451d0b6d44b9 Mon Sep 17 00:00:00 2001 From: miriamjorna Date: Sun, 19 Apr 2026 01:11:53 +0100 Subject: [PATCH 2/5] Level 2 exercise: autoplay --- Sprint-3/slideshow/index.html | 8 ++++++++ Sprint-3/slideshow/slideshow.js | 24 ++++++++++++++++++++++++ Sprint-3/slideshow/style.css | 13 +++++++++++++ 3 files changed, 45 insertions(+) diff --git a/Sprint-3/slideshow/index.html b/Sprint-3/slideshow/index.html index 75ffa88d3..409322d88 100644 --- a/Sprint-3/slideshow/index.html +++ b/Sprint-3/slideshow/index.html @@ -12,6 +12,14 @@

Giraffe Gallery

Giraffe + + +
+ + + +
+ diff --git a/Sprint-3/slideshow/slideshow.js b/Sprint-3/slideshow/slideshow.js index bb1284fe8..21c0e55ed 100644 --- a/Sprint-3/slideshow/slideshow.js +++ b/Sprint-3/slideshow/slideshow.js @@ -28,3 +28,27 @@ forwardButton.addEventListener("click", () => { // show first image on load updateSlide(); + +let autoId; + +function startAuto(direction) { + stopAuto(); // clear any existing interval first + autoId = setInterval(() => { + currentIndex = (currentIndex + direction + images.length) % images.length; + updateSlide(); + }, 5000); +} + +function stopAuto() { + clearInterval(autoId); +} + +document.getElementById("auto-forward").addEventListener("click", () => { + startAuto(1); +}); + +document.getElementById("auto-back").addEventListener("click", () => { + startAuto(-1); +}); + +document.getElementById("stop").addEventListener("click", stopAuto); diff --git a/Sprint-3/slideshow/style.css b/Sprint-3/slideshow/style.css index bc30a326c..93061f843 100644 --- a/Sprint-3/slideshow/style.css +++ b/Sprint-3/slideshow/style.css @@ -23,3 +23,16 @@ button { font-size: 1rem; cursor: pointer; } + +