diff --git a/Sprint-2/debug/address.js b/Sprint-2/debug/address.js index 940a6af83..e19ab9314 100644 --- a/Sprint-2/debug/address.js +++ b/Sprint-2/debug/address.js @@ -12,4 +12,4 @@ const address = { postcode: "XYZ 123", }; -console.log(`My house number is ${address[0]}`); +console.log(`My house number is ${address[0]}`); \ No newline at end of file diff --git a/Sprint-2/debug/recipe.js b/Sprint-2/debug/recipe.js index 6cbdd22cd..1f2146266 100644 --- a/Sprint-2/debug/recipe.js +++ b/Sprint-2/debug/recipe.js @@ -12,4 +12,4 @@ const recipe = { console.log(`${recipe.title} serves ${recipe.serves} ingredients: -${recipe}`); +${recipe}`); \ No newline at end of file diff --git a/Sprint-3/slideshow/index.html b/Sprint-3/slideshow/index.html index 50f2eb1c0..f6792bf4c 100644 --- a/Sprint-3/slideshow/index.html +++ b/Sprint-3/slideshow/index.html @@ -3,12 +3,23 @@ - Title here - + Image carousel + cat-pic + + + + + + + + + + + diff --git a/Sprint-3/slideshow/slideshow.js b/Sprint-3/slideshow/slideshow.js index 063ceefb5..d9da30bc8 100644 --- a/Sprint-3/slideshow/slideshow.js +++ b/Sprint-3/slideshow/slideshow.js @@ -4,5 +4,63 @@ const images = [ "./assets/cute-cat-c.jpg", ]; +let currentIndex = 0; +const imgElement = document.getElementById("carousel-img"); +const forwardBtn = document.getElementById("forward-btn"); +const backwardBtn = document.getElementById("backward-btn"); -// Write your code here \ No newline at end of file +const autoForwardBtn = document.getElementById("auto-forward"); +const autoBackBtn = document.getElementById("auto-backward"); +const stopBtn = document.getElementById("stop"); + + +let intervalId = null; // <-- declare intervalId + +function updateImage() { + imgElement.src = images[currentIndex]; +} + +forwardBtn.addEventListener("click", () => { + currentIndex = (currentIndex + 1) % images.length; + updateImage(); +}); + +backwardBtn.addEventListener("click", () => { + currentIndex = (currentIndex - 1 + images.length) % images.length; + updateImage(); +}); + +function disableAutoButtons() { + autoForwardBtn.disabled = true; + autoBackBtn.disabled = true; + stopBtn.disabled = false; +} + +function enableAutoButtons() { + autoForwardBtn.disabled = false; + autoBackBtn.disabled = false; + stopBtn.disabled = true; +} + +autoForwardBtn.addEventListener("click", () => { + clearInterval(intervalId); + intervalId = setInterval(() => { + currentIndex = (currentIndex + 1) % images.length; + updateImage(); + }, 2000); + disableAutoButtons(); +}); + +autoBackBtn.addEventListener("click", () => { + clearInterval(intervalId); + intervalId = setInterval(() => { + currentIndex = (currentIndex - 1 + images.length) % images.length; + updateImage(); + }, 2000); + disableAutoButtons(); +}); + +stopBtn.addEventListener("click", () => { + clearInterval(intervalId); + enableAutoButtons(); +}); diff --git a/Sprint-3/slideshow/style.css b/Sprint-3/slideshow/style.css index 63cedf2d2..2538f7bef 100644 --- a/Sprint-3/slideshow/style.css +++ b/Sprint-3/slideshow/style.css @@ -1 +1,44 @@ /** Write your CSS in here **/ + +body { + font-family: Arial, sans-serif; + text-align: center; + background-color: #f8f9fa; + margin: 2em; +} + +img#carousel-img { + max-width: 400px; + height: auto; + border-radius: 10px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); + margin-bottom: 1em; +} + +button, +input[type="number"] { + margin: 0.3em; + padding: 0.6em 1.2em; + font-size: 1em; + border-radius: 6px; + border: 1px solid #ccc; + cursor: pointer; + transition: background-color 0.3s; +} + +button:disabled, +input:disabled { + cursor: not-allowed; + background-color: #eee; + color: #999; +} + +button:hover:not(:disabled) { + background-color: #007bff; + color: white; +} + +label { + font-weight: bold; + margin-right: 0.5em; +}