diff --git a/Sprint-3/reading-list/script.js b/Sprint-3/reading-list/script.js index 6024d73a0..4de20d34b 100644 --- a/Sprint-3/reading-list/script.js +++ b/Sprint-3/reading-list/script.js @@ -21,3 +21,26 @@ const books = [ }, ]; +function renderReadingList() { + const readingList = document.getElementById("reading-list"); + + books.forEach((book) => { + const listItem = document.createElement("li"); + + listItem.style.backgroundColor = book.alreadyRead ? "green" : "red"; + + const info = document.createElement("p"); + info.className = "book-info"; + info.innerText = book.title + " by " + book.author; + listItem.appendChild(info); + + const bookCover = document.createElement("img"); + bookCover.src = book.bookCoverImage; + bookCover.alt = `Cover of ${book.title}`; + listItem.appendChild(bookCover); + + readingList.appendChild(listItem); + }); +} + +renderReadingList(); diff --git a/Sprint-3/reading-list/style.css b/Sprint-3/reading-list/style.css index 74406e64f..55b9c1c0e 100644 --- a/Sprint-3/reading-list/style.css +++ b/Sprint-3/reading-list/style.css @@ -157,3 +157,8 @@ body { max-height: 80px; } } +.book-info { + font-size: 1.2rem; + font-weight: bold; + margin-bottom: 10px; +} diff --git a/Sprint-3/slideshow/assets/butterfly1.png b/Sprint-3/slideshow/assets/butterfly1.png new file mode 100644 index 000000000..d47c18ef9 Binary files /dev/null and b/Sprint-3/slideshow/assets/butterfly1.png differ diff --git a/Sprint-3/slideshow/assets/butterfly2.png b/Sprint-3/slideshow/assets/butterfly2.png new file mode 100644 index 000000000..db86f10bc Binary files /dev/null and b/Sprint-3/slideshow/assets/butterfly2.png differ diff --git a/Sprint-3/slideshow/assets/butterfly3.png b/Sprint-3/slideshow/assets/butterfly3.png new file mode 100644 index 000000000..78f16edd8 Binary files /dev/null and b/Sprint-3/slideshow/assets/butterfly3.png differ diff --git a/Sprint-3/slideshow/index.html b/Sprint-3/slideshow/index.html index 50f2eb1c0..68dd0975d 100644 --- a/Sprint-3/slideshow/index.html +++ b/Sprint-3/slideshow/index.html @@ -3,12 +3,16 @@ - Title here + Image Carousel + - cat-pic + butterfly-pic + + + diff --git a/Sprint-3/slideshow/slideshow.js b/Sprint-3/slideshow/slideshow.js index 063ceefb5..cd8e3525b 100644 --- a/Sprint-3/slideshow/slideshow.js +++ b/Sprint-3/slideshow/slideshow.js @@ -1,8 +1,62 @@ const images = [ - "./assets/cute-cat-a.png", - "./assets/cute-cat-b.jpg", - "./assets/cute-cat-c.jpg", + "./assets/butterfly1.png", + "./assets/butterfly2.png", + "./assets/butterfly3.png", + "./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"); -// Write your code here \ No newline at end of file +let currentIndex = 0; +imageElement.src = images[currentIndex]; + +function showNextImage() { + currentIndex++; + if (currentIndex >= images.length) { + currentIndex = 0; + } + imageElement.src = images[currentIndex]; +} + +function showPreviousImage() { + currentIndex--; + if (currentIndex < 0) { + currentIndex = images.length - 1; + } + imageElement.src = images[currentIndex]; +} + +let autoForwardInterval; +function startAutoForward() { + autoForwardBtn.disabled = true; + autoBackwardBtn.disabled = true; + autoForwardInterval = setInterval(showNextImage, 3000); +} + +let autoBackwardInterval; +function startAutoBackward() { + autoForwardBtn.disabled = true; + autoBackwardBtn.disabled = true; + autoBackwardInterval = setInterval(showPreviousImage, 3000); +} + +function stopAutoSlideshow() { + clearInterval(autoForwardInterval); + clearInterval(autoBackwardInterval); + autoForwardBtn.disabled = false; + autoBackwardBtn.disabled = false; +} + +forwardBtn.addEventListener("click", showNextImage); +backwardBtn.addEventListener("click", showPreviousImage); +autoForwardBtn.addEventListener("click", startAutoForward); +autoBackwardBtn.addEventListener("click", startAutoBackward); +stopBtn.addEventListener("click", stopAutoSlideshow); diff --git a/Sprint-3/slideshow/style.css b/Sprint-3/slideshow/style.css index 63cedf2d2..c2bb24c70 100644 --- a/Sprint-3/slideshow/style.css +++ b/Sprint-3/slideshow/style.css @@ -1 +1,64 @@ /** Write your CSS in here **/ + +body { + font-family: Arial, sans-serif; + text-align: center; + background-color: #f0f0f0; + margin: 0; + padding: 20px; + display: flex; + flex-direction: column; + align-items: center; +} + +img { + width: 100%; + max-width: 500px; + height: auto; + margin: 20px 0; + border: 2px solid #ccc; + border-radius: 10px; +} + +button { + padding: 10px 20px; + font-size: 16px; + cursor: pointer; + background-color: #4caf50; + color: white; + border: none; + border-radius: 5px; + margin: 5px; + transition: background-color 0.3s ease; +} + +button:hover { + background-color: #45a049; +} + +button:disabled { + background-color: #ddd; + cursor: not-allowed; +} + +button + button { + margin-left: 10px; +} + +.container { + max-width: 700px; + width: 100%; + padding: 10px; + margin: 0 auto; +} + +@media (max-width: 600px) { + img { + max-width: 100%; + } + + button { + width: 100%; + margin: 10px 0; + } +}