diff --git a/package-lock.json b/package-lock.json index cde37d56..d6cb8f1a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,11 +1,11 @@ { - "name": "CYF-Coursework-Template", + "name": "Module-JS2", "version": "1.0.0", "lockfileVersion": 3, "requires": true, "packages": { "": { - "name": "CYF-Coursework-Template", + "name": "Module-JS2", "version": "1.0.0", "license": "CC-BY-SA-4.0", "devDependencies": { diff --git a/week-3/slideshow/index.html b/week-3/slideshow/index.html index 50f2eb1c..bdaae841 100644 --- a/week-3/slideshow/index.html +++ b/week-3/slideshow/index.html @@ -3,12 +3,23 @@ - Title here + Slideshow + - cat-pic - - + diff --git a/week-3/slideshow/slideshow.js b/week-3/slideshow/slideshow.js index 063ceefb..3ec0fd63 100644 --- a/week-3/slideshow/slideshow.js +++ b/week-3/slideshow/slideshow.js @@ -1,8 +1,95 @@ +// slideshow.js + 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", ]; +let currentIndex = 0; +let intervalId; + +const imageElement = document.getElementById("carousel-img"); +const forwardButton = document.getElementById("forward-btn"); +const backwardButton = document.getElementById("backward-btn"); +const autoForwardButton = document.getElementById("auto-forward"); +const autoBackwardButton = document.getElementById("auto-backward"); +const stopButton = document.getElementById("stop"); +const imgDiv = document.querySelector(".slider"); + +//added backward and forward point btns- created div for them +const pointDiv = document.createElement("div"); +pointDiv.setAttribute("id", "pointDiv"); +imgDiv.after(pointDiv); + +const forwardPoint = document.createElement("button"); +forwardPoint.setAttribute("id", "forwardPoint"); +forwardPoint.innerText = ">"; +pointDiv.append(forwardPoint); + +const backwardPoint = document.createElement("button"); +backwardPoint.setAttribute("id", "backwardPoint"); +backwardPoint.innerText = "<"; +pointDiv.prepend(backwardPoint); + +//........... + +function updateImage() { + imageElement.src = images[currentIndex]; +} + +function moveForward() { + currentIndex = (currentIndex + 1) % images.length; + updateImage(); +} + +function moveBackward() { + currentIndex = (currentIndex - 1 + images.length) % images.length; + updateImage(); +} + +function startAutoForward() { + intervalId = setInterval(moveForward, 2000); + autoForwardButton.disabled = true; + autoBackwardButton.disabled = true; +} + +function startAutoBackward() { + intervalId = setInterval(moveBackward, 2000); + autoForwardButton.disabled = true; + autoBackwardButton.disabled = true; +} + +function stopAuto() { + clearInterval(intervalId); + autoForwardButton.disabled = false; + autoBackwardButton.disabled = false; +} + +const btns = document.getElementById("btns"); +btns.addEventListener("click", function changeImg(event) { + const target = event.target; + if (target.id === "auto-backward") { + startAutoForward(); + } else if (target.id === "forward-btn") { + moveForward(); + } else if (target.id === "stop") { + stopAuto(); + } else if (target.id === "backward-btn") { + moveBackward(); + } else if (target.id === "auto-forward") { + startAutoForward(); + } +}); + +backwardPoint.addEventListener("click", moveBackward); +forwardPoint.addEventListener("click", moveForward); + +/* forwardButton.addEventListener("click", moveForward); + backwardButton.addEventListener("click", moveBackward); + autoForwardButton.addEventListener("click", startAutoForward); + autoBackwardButton.addEventListener("click", startAutoBackward); + stopButton.addEventListener("click", stopAuto); */ -// Write your code here \ No newline at end of file +// Initial image display +window.onload = updateImage; diff --git a/week-3/slideshow/style.css b/week-3/slideshow/style.css index 63cedf2d..7abdebc5 100644 --- a/week-3/slideshow/style.css +++ b/week-3/slideshow/style.css @@ -1 +1,57 @@ -/** Write your CSS in here **/ +/* style.css */ + +body { + font-family: Arial, sans-serif; + margin: 0; + padding: 0; + background-color: #f4f4f4; +} + +#carousel-container { + max-width: 800px; + margin-top: 50px; + margin-left: auto; + margin-right: auto; +} + +.slider { + width: 450px; + height: 300px; + margin: auto; + overflow: hidden; + border: 1px solid #ccc; + box-shadow: 0 0 10px rgba(0, 0, 0, 3.1); + border-radius: 5px; +} + +.slider img { + width: 100%; + height: 100%; + object-fit: cover; +} + +#btns { + text-align: center; + margin-top: 20px; +} + +button { + padding: 10px 15px; + margin: 5px; + cursor: pointer; + background-color: #77797c; + color: #fff; + font-size: 14px; + border: none; + border-radius: 10px; +} + +button:hover { + background-color: #85718d; +} + +#pointDiv { + display: flex; + justify-content: center; + margin-top: 15px; +}