CodeYourFuture · Mgphone · Dec 13, 2024 · Dec 24, 2024 · Dec 24, 2024 · Dec 27, 2024
diff --git a/Sprint-1/fix/median.js b/Sprint-1/fix/median.js
@@ -3,9 +3,15 @@
 // If you're in the Sprint-1 directory, you can run `npm test -- fix` to run the tests in the fix directory
 
 function calculateMedian(list) {
+  let isEven = list.length % 2 == 0;
   const middleIndex = Math.floor(list.length / 2);
-  const median = list.splice(middleIndex, 1)[0];
-  return median;
+  if (isEven) {
+    const median = (list[middleIndex] + list[middleIndex - 1]) / 2;
+    return median;
+  } else {
+    const median = list[middleIndex];
+    return median;
+  }
 }
 
 module.exports = calculateMedian;
diff --git a/Sprint-1/package-lock.json b/Sprint-1/package-lock.json
diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html
@@ -4,12 +4,17 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Title here</title>
+    <link rel="stylesheet" href="style.css" />
     <script defer src="quotes.js"></script>
   </head>
   <body>
     <h1>hello there</h1>
     <p id="quote"></p>
     <p id="author"></p>
     <button type="button" id="new-quote">New quote</button>
+    <label id="toggle">
+      <input type="checkbox" id="quote-autoplay" />
+      <span id="quote-text">Off Quote Change</span>
+    </label>
   </body>
 </html>
diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js
@@ -1,3 +1,49 @@
+/*
+1.when button click random quote get
+2.assign quote and author name
+3.display it on the screen
+4.add toggle button off no change
+5.toggle button on change
+a.setinterval 60 seconds
+b.call random Value function 
+ */
+function buttonClick() {
+  const button = document.getElementById("new-quote");
+  button.addEventListener("click", () => getNewQuote());
+}
+function autoClick() {
+  const button = document.getElementById("new-quote");
+  button.click();
+}
+function getNewQuote() {
+  const randomValue = pickFromArray(quotes);
+  const newQuote = randomValue.quote;
+  const newAuthor = randomValue.author;
+  const findQuoteToChange = document.querySelector("#quote");
+  const findAuthorToChange = document.querySelector("#author");
+  findAuthorToChange.innerText = newAuthor;
+  findQuoteToChange.innerText = newQuote;
+}
+function toggleFun() {
+  let intervalId;
+  const checkToggle = document.getElementById("quote-autoplay");
+  const toggleLabelText = document.getElementById("quote-text");
+  checkToggle.addEventListener("change", () => {
+    if (checkToggle.checked) {
+      toggleLabelText.textContent = "On Quote Change";
+      intervalId = setInterval(autoClick, 60000);
+    } else {
+      clearInterval(intervalId);
+      toggleLabelText.textContent = "Off Quote Change";
+    }
+  });
+}
+function setup() {
+  buttonClick();
+  toggleFun();
+}
+window.onload = setup;
+
 // DO NOT EDIT BELOW HERE
 
 // pickFromArray is a function which will return one item, at

diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css
@@ -1 +0,0 @@
-/** Write your CSS in here **/

diff --git a/Sprint-3/reading-list/script.js b/Sprint-3/reading-list/script.js
@@ -20,4 +20,30 @@ const books = [
     bookCoverImage: "https://blackwells.co.uk/jacket/l/9780135957059.jpg",
   },
 ];
+function setup() {
+  const readingList = document.getElementById("reading-list");
+  books.map((book) => {
+    const listBook = document.createElement("li");
+    listBook.style.backgroundColor = book.alreadyRead ? "Red" : "Green";
+    listBook.style.height = "20%";
+    listBook.style.width = "40vw";
+    listBook.style.marginBottom = "10px";
+    //p tag inside li
+    const bookTitle = document.createElement("p");
+    bookTitle.textContent = book.title + " ";
+    //span tag inside p tag
+    const authorSpan = document.createElement("span");
+    authorSpan.textContent = book.author;
+    bookTitle.appendChild(authorSpan);
+    const img = document.createElement("img");
+    img.src = book.bookCoverImage;
+    img.alt = book.title;
+    img.style.height = "81%";
+    img.style.width = "auto";
+    listBook.appendChild(bookTitle);
+    listBook.appendChild(img);
 
+    readingList.appendChild(listBook);
+  });
+}
+window.onload = setup;
diff --git a/Sprint-3/slideshow/index.html b/Sprint-3/slideshow/index.html
@@ -3,12 +3,23 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Title here</title>
+    <title>Image carousel</title>
     <script defer src="slideshow.js"></script>
+    <link rel="stylesheet" href="style.css" />
   </head>
   <body>
     <img id="carousel-img" src="./assets/cute-cat-a.png" alt="cat-pic" />
-    <button type="button" id="backward-btn">Backwards</button>
-    <button type="button" id="forward-btn">Forward</button>
+    <p id="image-index"></p>
+    <div class="button-group">
+      <button type="button" id="auto-backward-btn">Auto Back</button>
+
+      <button type="button" id="backward-btn">Back</button>
+      <button type="button" id="stop-btn">Stop</button>
+
+      <button type="button" id="forward-btn">Forward</button>
+      <button type="button" id="auto-forward-btn">Auto Forward</button>
+
+      <!-- <script src="slideshow.js"></script> -->
+    </div>
   </body>
 </html>
diff --git a/Sprint-3/slideshow/slideshow.js b/Sprint-3/slideshow/slideshow.js
@@ -1,8 +1,75 @@
 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 imageValue = 0;
+const buttons = document.querySelector(".button-group");
+const checkNumber = document.getElementById("image-index");
+const imageFinder = document.getElementById("carousel-img");
+//for interval
+let forwardIntervalId;
+let backwardIntervalId;
+function setup() {
+  const makeDemo1 = document.createElement("h1");
+  makeDemo1.textContent = "Image Carousel.Level 1 Demo";
+  document.body.prepend(makeDemo1);
+  //   findArrayInd();
+  findWhichButton();
+  checkNumber.innerText = imageValue;
+  //   const queryImage=
+}
+function findArrayInd(value) {
+  if (value == "increase") {
+    imageValue = (imageValue + 1) % images.length;
+    checkNumber.innerText = imageValue;
+    imageFinder.src = images[imageValue];
+  } else if (value == "decrease") {
+    imageValue = (imageValue - 1 + images.length) % images.length;
+    checkNumber.innerText = imageValue;
+    imageFinder.src = images[imageValue];
+  } else if (value == "auto-forward-btn") {
+    if (forwardIntervalId) {
+      clearInterval(forwardIntervalId);
+    }
+    forwardIntervalId = setInterval(() => {
+      imageValue = (imageValue + 1) % images.length;
+      checkNumber.innerText = imageValue;
+      imageFinder.src = images[imageValue];
+    }, 1000);
+  } else if (value == "auto-backward-btn") {
+    if (backwardIntervalId) {
+      clearInterval(backwardIntervalId);
+    }
+    backwardIntervalId = setInterval(() => {
+      imageValue = (imageValue - 1 + images.length) % images.length;
+      checkNumber.innerText = imageValue;
+      imageFinder.src = images[imageValue];
+    }, 1000);
+  } else if (value == "stop-btn") {
+    if (forwardIntervalId) {
+      clearInterval(forwardIntervalId);
+    }
+    if (backwardIntervalId) {
+      clearInterval(backwardIntervalId);
+    }
+  }
+  return imageValue;
+}
+function findWhichButton() {
+  buttons.addEventListener("click", (e) => {
+    if (e.target.id == "forward-btn") {
+      findArrayInd("increase");
+    } else if (e.target.id == "backward-btn") {
+      findArrayInd("decrease");
+    } else if (e.target.id == "auto-backward-btn") {
+      findArrayInd("auto-backward-btn");
+    } else if (e.target.id == "stop-btn") {
+      findArrayInd("stop-btn");
+    } else if (e.target.id == "auto-forward-btn") {
+      findArrayInd("auto-forward-btn");
+    }
+  });
+}
 
-
-// Write your code here
+window.onload = setup;
diff --git a/Sprint-3/slideshow/style.css b/Sprint-3/slideshow/style.css
@@ -1 +1,5 @@
 /** Write your CSS in here **/
+img {
+  width: 200px;
+  height: 200px;
+}