diff --git a/week-3/slideshow/index.html b/week-3/slideshow/index.html index 50f2eb1c..b87e1a1d 100644 --- a/week-3/slideshow/index.html +++ b/week-3/slideshow/index.html @@ -3,12 +3,16 @@ - Title here + Image carousel + cat-pic - - + + + + + diff --git a/week-3/slideshow/slideshow.js b/week-3/slideshow/slideshow.js index 063ceefb..1c3b68c7 100644 --- a/week-3/slideshow/slideshow.js +++ b/week-3/slideshow/slideshow.js @@ -1,8 +1,131 @@ 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 currentPhotoIndex = 0; -// Write your code here \ No newline at end of file +const image = document.getElementById("carousel-img"); + +const imgContainer = document.createElement("div"); +imgContainer.setAttribute("id", "img-container"); + +image.before(imgContainer); +imgContainer.appendChild(image); + +const btnContainer = document.createElement("div"); +btnContainer.classList.add("btn-container"); + +const backwardBtn = document.getElementById("backward-btn"); +const forwardBtn = document.getElementById("forward-btn"); + +const stopBtn = document.getElementById("stop"); + +const autoBackwardBtn = document.getElementById("auto-backward"); +const autoForwardBtn = document.getElementById("auto-forward"); + +btnContainer.append( + autoBackwardBtn, + backwardBtn, + stopBtn, + forwardBtn, + autoForwardBtn +); + +let autoPlayBackward; +let autoPlayForward; + +// Write your code here + +function generatePhoto() { + image.setAttribute("src", images[currentPhotoIndex]); + if (currentPhotoIndex === 0) { + document.getElementById("img0").style.backgroundColor = "grey"; + document.getElementById("img1").style.backgroundColor = "black"; + document.getElementById("img2").style.backgroundColor = "black"; + } else if (currentPhotoIndex === 1) { + document.getElementById("img0").style.backgroundColor = "black"; + document.getElementById("img1").style.backgroundColor = "grey"; + document.getElementById("img2").style.backgroundColor = "black"; + } else if (currentPhotoIndex === 2) { + document.getElementById("img0").style.backgroundColor = "black"; + document.getElementById("img1").style.backgroundColor = "black"; + document.getElementById("img2").style.backgroundColor = "grey"; + } +} + +function nextPhoto() { + ++currentPhotoIndex; + if (currentPhotoIndex === 3) { + currentPhotoIndex = 0; + } + generatePhoto(); +} + +function previousPhoto() { + --currentPhotoIndex; + if (currentPhotoIndex === -1) { + currentPhotoIndex = 2; + } + generatePhoto(); +} + +backwardBtn.addEventListener("click", previousPhoto); +forwardBtn.addEventListener("click", nextPhoto); + +autoBackwardBtn.addEventListener("click", () => { + autoPlayBackward = setInterval(() => { + previousPhoto(); + }, 2000); + clearInterval(autoPlayForward); + autoBackwardBtn.disabled = true; + autoForwardBtn.disabled = true; +}); + +autoForwardBtn.addEventListener("click", () => { + autoPlayForward = setInterval(() => { + nextPhoto(); + }, 2000); + clearInterval(autoPlayBackward); + autoBackwardBtn.disabled = true; + autoForwardBtn.disabled = true; +}); + +stopBtn.addEventListener("click", () => { + clearInterval(autoPlayBackward); + clearInterval(autoPlayForward); + autoBackwardBtn.disabled = false; + autoForwardBtn.disabled = false; +}); + +window.onload = generatePhoto; + +// extra img navigate buttons + +const navContainer = document.createElement("div"); +navContainer.classList.add("nav"); + +for (let i = 0; i < images.length; i++) { + const imgBtn = document.createElement("button"); + imgBtn.classList.add(`img${i}`); + imgBtn.setAttribute("id", `img${i}`); + imgBtn.classList.add("navBtn"); + navContainer.appendChild(imgBtn); +} + +imgContainer.after(navContainer); +navContainer.after(btnContainer); + +navContainer.addEventListener("click", (event) => { + const target = event.target; + if (target.classList.contains("img0")) { + currentPhotoIndex = 0; + } else if (target.classList.contains("img1")) { + currentPhotoIndex = 1; + } else if (target.classList.contains("img2")) { + currentPhotoIndex = 2; + } + + generatePhoto(); +}); diff --git a/week-3/slideshow/style.css b/week-3/slideshow/style.css index 63cedf2d..7b229c46 100644 --- a/week-3/slideshow/style.css +++ b/week-3/slideshow/style.css @@ -1 +1,79 @@ /** Write your CSS in here **/ +* { + margin: 0px; + padding: 0px; + border: none; +} +body { + height: 80vh; + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: center; + margin: 5vh 5vw; + border-radius: 27px; + border: solid 3px black; + padding: 5vh 5vw; + background-color: rgb(206, 206, 206); +} +#img-container { + width: 80vw; + height: 60vh; + border-radius: 15px; + border: solid 3px black; +} +#carousel-img { + width: 100%; + height: 100%; + object-fit: cover; + z-index: -1; + border-radius: 12px; +} + +.nav { + display: flex; + flex-direction: row; + gap: 10px; +} + +.navBtn { + padding: 10px 10px; + border-radius: 999px; + background-color: black; +} + +.btn-container { + display: flex; + flex-direction: row; + gap: 10px; +} + +.btn-container button { + padding: 5px 10px 6px; + border-radius: 999px; + background-color: black; + color: white; + font-size: 17px; +} +.btn-container button:hover { + background-color: grey; +} +#auto-backward-btn { + padding-right: 14px; +} +#backward-btn { + padding-right: 14px; +} +#auto-forward-btn { + padding-left: 14px; +} +#forward-btn { + padding-left: 14px; +} +#auto-backward-btn { + padding-right: 14px; +} +#stop-btn { + padding-right: 15px; + padding-left: 15px; +}