diff --git a/Sprint-3/slideshow/assets/cute-cat-c.jpg b/Sprint-3/slideshow/assets/cute-cat-c.jpg index 3546f7336..262e20e63 100644 Binary files a/Sprint-3/slideshow/assets/cute-cat-c.jpg and b/Sprint-3/slideshow/assets/cute-cat-c.jpg differ diff --git a/Sprint-3/slideshow/index.html b/Sprint-3/slideshow/index.html index 50f2eb1c0..3180001f4 100644 --- a/Sprint-3/slideshow/index.html +++ b/Sprint-3/slideshow/index.html @@ -1,14 +1,26 @@ - + - Title here + + - cat-pic - - + diff --git a/Sprint-3/slideshow/slideshow.js b/Sprint-3/slideshow/slideshow.js index 063ceefb5..55c8e4690 100644 --- a/Sprint-3/slideshow/slideshow.js +++ b/Sprint-3/slideshow/slideshow.js @@ -1,8 +1,81 @@ +// Array of images + const images = [ - "./assets/cute-cat-a.png", - "./assets/cute-cat-b.jpg", - "./assets/cute-cat-c.jpg", + "./assets/cute-cat-a.png", + "./assets/cute-cat-b.jpg", + "./assets/cute-cat-c.jpg", ]; +// Write your code here +const imageElement = document.getElementById("carousel-img"); +const forwardBtn = document.getElementById("forward-btn"); +const backwardBtn = document.getElementById("backward-btn"); +const autoForwardBtn = document.getElementById("auto-forward"); +const autoBackwardBtn = document.getElementById("auto-backward"); +const stopBtn = document.getElementById("stop"); + +let currentImage = 0; +let autoPlayInterval = null; + +imageElement.src = images[currentImage]; + +function showNextImage() { + currentImage = currentImage + 1; + if (currentImage >= images.length) { + currentImage = 0; + } + imageElement.src = images[currentImage]; +} + +function showPreviousImage() { + currentImage = currentImage - 1; + if (currentImage < 0) { + currentImage = images.length - 1; + } + imageElement.src = images[currentImage]; +} + +function startAutoPlay(direction) { + if (autoPlayInterval !== null) { + clearInterval(autoPlayInterval); + } + + if (direction === "forward") { + autoPlayInterval = setInterval(showNextImage, 2000); + } else if (direction === "backward") { + autoPlayInterval = setInterval(showPreviousImage, 2000); + } + + autoForwardBtn.disabled = true; + autoBackwardBtn.disabled = true; + stopBtn.textContent = "■"; + stopBtn.setAttribute("aria-label", "Stop slideshow"); +} + +function stopAutoPlay() { + if (autoPlayInterval !== null) { + clearInterval(autoPlayInterval); + autoPlayInterval = null; + } + // Enable both auto buttons + autoForwardBtn.disabled = false; + autoBackwardBtn.disabled = false; + stopBtn.textContent = "►"; + stopBtn.setAttribute("aria-label", "Start slideshow"); +} -// Write your code here \ No newline at end of file +backwardBtn.addEventListener("click", showPreviousImage); +forwardBtn.addEventListener("click", showNextImage); +autoForwardBtn.addEventListener("click", function () { + startAutoPlay("forward"); +}); +autoBackwardBtn.addEventListener("click", function () { + startAutoPlay("backward"); +}); +stopBtn.addEventListener("click", function () { + if (autoPlayInterval === null) { + startAutoPlay("forward"); + } else { + stopAutoPlay(); + } +}); diff --git a/Sprint-3/slideshow/style.css b/Sprint-3/slideshow/style.css index 63cedf2d2..d87f37fed 100644 --- a/Sprint-3/slideshow/style.css +++ b/Sprint-3/slideshow/style.css @@ -1 +1,77 @@ /** Write your CSS in here **/ +body { + background: #fffbe7; + min-height: 100vh; + margin: 0; + font-family: "Inter", Arial, sans-serif; +} + +.carousel-card { + margin-top: 50px; + display: flex; + flex-direction: column; + align-items: center; +} + +#carousel-img { + width: 700px; + height: 500px; + align-items: center; + border: 6px solid black; + box-shadow: 13px 9px 0 #00ffe7; /* bold, offset shadows */ +} + +.carousel-buttons { + margin: 30px; + display: flex; + gap: 30px; + align-items: center; +} + +.carousel-buttons button { + background: #ff00aa; + color: #222; + border: 4px solid #222; + border-radius: 0px; + height: 70px; + min-width: 2.6em; + box-sizing: border-box; + display: inline-flex; + align-items: center; + justify-content: center; + line-height: 1; + font-size: 2.3rem; + font-weight: bold; + padding: 14px 32px; + box-shadow: 4px 4px 0 #00ffe7; + cursor: pointer; +} + +#play-pause-btn { + min-width: 4.2em; +} + +#stop { + width: 4.2em; + padding: 14px 0; +} + +.carousel-buttons button:hover { + background: #d3008d; +} + +.carousel-buttons button:active { + background: #c40082; + color: #fff; + border-color: #222; + box-shadow: 3px 3px 0 #222; + transform: translate(3px, 3px); +} + +.carousel-buttons button.active { + background: #c40082; + color: #fff; + border-color: #222; + box-shadow: 1px 1px 0 #00ffe7; + transform: translate(2px, 2px); +}