sprint 3 sorted

eminakturk · eminakturk · commit d780bd2eff5b · 2025-08-08T17:02:07.000+01:00
diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js
@@ -1,4 +1,46 @@
-function setAlarm() {}
+let timer;
+let secondsRemaining = 0;
+
+function setAlarm() {
+  // Clear existing timer if any
+  if (timer) {
+    clearInterval(timer);
+  }
+  
+  // Get the time from the input field
+  const alarmInput = document.getElementById("alarmSet");
+  secondsRemaining = parseInt(alarmInput.value, 10);
+  
+  // Update the display immediately
+  updateTimeDisplay();
+  
+  // Start the timer
+  timer = setInterval(function() {
+    secondsRemaining--;
+    
+    // Update the display
+    updateTimeDisplay();
+    
+    // Check if time is up
+    if (secondsRemaining <= 0) {
+      clearInterval(timer);
+      playAlarm();
+    }
+  }, 1000);
+}
+
+function updateTimeDisplay() {
+  const minutes = Math.floor(secondsRemaining / 60);
+  const seconds = secondsRemaining % 60;
+  
+  // Format with leading zeros
+  const formattedMinutes = String(minutes).padStart(2, '0');
+  const formattedSeconds = String(seconds).padStart(2, '0');
+  
+  // Update the display
+  document.getElementById("timeRemaining").innerText = 
+    `Time Remaining: ${formattedMinutes}:${formattedSeconds}`;
+}
 
 // DO NOT EDIT BELOW HERE
 
diff --git a/Sprint-3/alarmclock/index.html b/Sprint-3/alarmclock/index.html
@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="stylesheet" href="style.css" />
-    <title>Title here</title>
+    <title>Alarm Clock</title>
   </head>
   <body>
     <div class="centre">
diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html
@@ -3,11 +3,11 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Title here</title>
+    <title>Quote Generator</title>
     <script defer src="quotes.js"></script>
   </head>
   <body>
-    <h1>hello there</h1>
+    <h1>Random Quote Generator</h1>
     <p id="quote"></p>
     <p id="author"></p>
     <button type="button" id="new-quote">New quote</button>
diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js
@@ -491,3 +491,23 @@ const quotes = [
 ];
 
 // call pickFromArray with the quotes array to check you get a random quote
+
+// Function to display a random quote
+function displayRandomQuote() {
+  // Get a random quote object from the quotes array
+  const randomQuoteObject = pickFromArray(quotes);
+  
+  // Get the quote and author elements
+  const quoteElement = document.getElementById("quote");
+  const authorElement = document.getElementById("author");
+  
+  // Set the content of the elements
+  quoteElement.innerText = randomQuoteObject.quote;
+  authorElement.innerText = randomQuoteObject.author;
+}
+
+// Display a quote when the page loads
+window.addEventListener("load", displayRandomQuote);
+
+// Add event listener to the "New quote" button
+document.getElementById("new-quote").addEventListener("click", displayRandomQuote);
diff --git a/Sprint-3/reading-list/index.html b/Sprint-3/reading-list/index.html
@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="stylesheet" href="style.css" />
-    <title>Title here</title>
+    <title>Reading List</title>
   </head>
   <body>
     <div id="content">
diff --git a/Sprint-3/reading-list/script.js b/Sprint-3/reading-list/script.js
@@ -21,3 +21,35 @@ const books = [
   },
 ];
 
+// Function to display the reading list
+function displayReadingList() {
+  const readingList = document.getElementById("reading-list");
+  
+  // Loop through each book and create list items
+  books.forEach(book => {
+    // Create list item
+    const li = document.createElement("li");
+    
+    // Set background color based on whether the book has been read
+    li.style.backgroundColor = book.alreadyRead ? "green" : "red";
+    
+    // Create and add the book cover image
+    const img = document.createElement("img");
+    img.src = book.bookCoverImage;
+    li.appendChild(img);
+    
+    // Create and add the book information
+    const bookInfo = document.createElement("div");
+    bookInfo.innerHTML = `
+      <h2>${book.title}</h2>
+      <p>by ${book.author}</p>
+    `;
+    li.appendChild(bookInfo);
+    
+    // Add the list item to the reading list
+    readingList.appendChild(li);
+  });
+}
+
+// Call the function when the page loads
+window.addEventListener("load", displayReadingList);
diff --git a/Sprint-3/slideshow/index.html b/Sprint-3/slideshow/index.html
@@ -3,7 +3,7 @@
   <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>
   </head>
   <body>
diff --git a/Sprint-3/slideshow/slideshow.js b/Sprint-3/slideshow/slideshow.js
@@ -4,5 +4,63 @@ const images = [
     "./assets/cute-cat-c.jpg",
 ];
 
+const imgElement = document.getElementById("carousel-img");
+const forwardBtn = document.getElementById("forward-btn");
+const backwardBtn = document.getElementById("backward-btn");
 
-// Write your code here
+let currentImageIndex = 0;
+
+function moveForward() {
+    currentImageIndex = (currentImageIndex + 1) % images.length;
+    imgElement.src = images[currentImageIndex];
+}
+
+function moveBackward() {
+    currentImageIndex = (currentImageIndex - 1 + images.length) % images.length;
+    imgElement.src = images[currentImageIndex];
+}
+
+forwardBtn.addEventListener("click", moveForward);
+backwardBtn.addEventListener("click", moveBackward);
+
+let autoInterval = null;
+const AUTO_INTERVAL_TIME = 2000; // 2 seconds
+
+const autoForwardBtn = document.createElement("button");
+autoForwardBtn.id = "auto-forward";
+autoForwardBtn.textContent = "Auto Forward";
+document.body.appendChild(autoForwardBtn);
+
+const autoBackwardBtn = document.createElement("button");
+autoBackwardBtn.id = "auto-backward";
+autoBackwardBtn.textContent = "Auto Backward";
+document.body.appendChild(autoBackwardBtn);
+
+const stopBtn = document.createElement("button");
+stopBtn.id = "stop";
+stopBtn.textContent = "Stop";
+document.body.appendChild(stopBtn);
+
+function startAutoForward() {
+    clearInterval(autoInterval);
+    autoInterval = setInterval(moveForward, AUTO_INTERVAL_TIME);
+    autoForwardBtn.disabled = true;
+    autoBackwardBtn.disabled = true;
+}
+
+function startAutoBackward() {
+    clearInterval(autoInterval);
+    autoInterval = setInterval(moveBackward, AUTO_INTERVAL_TIME);
+    autoForwardBtn.disabled = true;
+    autoBackwardBtn.disabled = true;
+}
+
+function stopAuto() {
+    clearInterval(autoInterval);
+    autoInterval = null;
+    autoForwardBtn.disabled = false;
+    autoBackwardBtn.disabled = false;
+}
+autoForwardBtn.addEventListener("click", startAutoForward);
+autoBackwardBtn.addEventListener("click", startAutoBackward);
+stopBtn.addEventListener("click", stopAuto);
diff --git a/Sprint-3/todo-list/index.html b/Sprint-3/todo-list/index.html
@@ -3,16 +3,17 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Title here</title>
+    <title>Todo List</title>
     <link rel="stylesheet" href="style.css" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
   </head>
   <body>
     <form>
       <div>
-        <input type="text" placeholder="New todo..." />
+        <input type="text" id="todoInput" placeholder="New todo..." />
       </div>
       <div>
-        <button type="submit">Add Todo</button>
+        <button type="submit" class="btn">Add Todo</button>
         <button
           type="button"
           id="remove-all-completed"
@@ -22,6 +23,11 @@
         </button>
       </div>
     </form>
+
+    <ul id="todo-list">
+      <!-- Todo items will be added here by JavaScript -->
+    </ul>
+    
     <script src="script.js"></script>
   </body>
 </html>
diff --git a/Sprint-3/todo-list/script.js b/Sprint-3/todo-list/script.js
@@ -1,6 +1,50 @@
 function populateTodoList(todos) {
   let list = document.getElementById("todo-list");
-  // Write your code to create todo list elements with completed and delete buttons here, all todos should display inside the "todo-list" element.
+  
+  // Clear existing todos
+  list.innerHTML = "";
+  
+  // Add each todo to the list
+  todos.forEach(todo => {
+    const li = document.createElement("li");
+    li.textContent = todo.task;
+    
+    // Apply line-through style if completed
+    if (todo.completed) {
+      li.style.textDecoration = "line-through";
+    }
+    
+    // Create tick icon
+    const tickIcon = document.createElement("i");
+    tickIcon.className = "fas fa-check";
+    tickIcon.addEventListener("click", function() {
+      // Toggle line-through style
+      if (li.style.textDecoration === "line-through") {
+        li.style.textDecoration = "none";
+        todo.completed = false;
+      } else {
+        li.style.textDecoration = "line-through";
+        todo.completed = true;
+      }
+    });
+    
+    // Create bin/trash icon
+    const binIcon = document.createElement("i");
+    binIcon.className = "fas fa-trash";
+    binIcon.addEventListener("click", function() {
+      // Remove the todo item from the list
+      li.remove();
+      // Remove from the todos array
+      todos = todos.filter(t => t !== todo);
+    });
+    
+    // Append icons to the list item
+    li.appendChild(tickIcon);
+    li.appendChild(binIcon);
+    
+    // Append the list item to the list
+    list.appendChild(li);
+  });
 }
 
 // These are the same todos that currently display in the HTML
@@ -16,10 +60,35 @@ populateTodoList(todos);
 function addNewTodo(event) {
   // The code below prevents the page from refreshing when we click the 'Add Todo' button.
   event.preventDefault();
-  // Write your code here... and remember to reset the input field to be blank after creating a todo!
+  
+  // Get input value
+  const inputField = document.getElementById("todoInput");
+  const taskValue = inputField.value.trim();
+  
+  if (taskValue) {
+    // Add new todo to the array
+    const newTodo = { task: taskValue, completed: false };
+    todos.push(newTodo);
+    
+    // Update the list
+    populateTodoList(todos);
+    
+    // Clear the input field
+    inputField.value = "";
+  }
 }
 
-// Advanced challenge: Write a fucntion that checks the todos in the todo list and deletes the completed ones (we can check which ones are completed by seeing if they have the line-through styling applied or not).
+// Add event listener for the form submission
+document.querySelector("form").addEventListener("submit", addNewTodo);
+
+// Advanced challenge: Write a function that checks the todos in the todo list and deletes the completed ones (we can check which ones are completed by seeing if they have the line-through styling applied or not).
 function deleteAllCompletedTodos() {
-  // Write your code here...
+  // Filter out completed todos
+  todos = todos.filter(todo => !todo.completed);
+  
+  // Update the list
+  populateTodoList(todos);
 }
+
+// Add event listener for the remove all completed button
+document.getElementById("remove-all-completed").addEventListener("click", deleteAllCompletedTodos);
