CodeYourFuture · SuWebOnes · Jul 29, 2025 · Jul 30, 2025 · Jul 30, 2025 · Jul 30, 2025
diff --git a/Sprint-3/package.json b/Sprint-3/package.json
@@ -1,32 +1,17 @@
 {
-  "name": "module-data-groups",
+  "name": "readinglist",
   "version": "1.0.0",
   "license": "CC-BY-SA-4.0",
-  "description": "",
+  "description": "You must update this package",
   "scripts": {
-    "test": "jest",
-    "format": "prettier --write ."
+    "test": "jest --config=../jest.config.js reading-list"
   },
-  "workspaces": [
-    "alarmclock",
-    "quote-generator",
-    "reading-list",
-    "slideshow",
-    "todo-list"
-  ],
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/CodeYourFuture/Module-Data-Groups.git"
+    "url": "git+https://github.com/CodeYourFuture/CYF-Coursework-Template.git"
   },
   "bugs": {
-    "url": "https://github.com/CodeYourFuture/Module-Data-Groups/issues"
+    "url": "https://github.com/CodeYourFuture/CYF-Coursework-Template/issues"
   },
-  "homepage": "https://github.com/CodeYourFuture/Module-Data-Groups#readme",
-  "devDependencies": {
-    "@testing-library/dom": "^10.4.0",
-    "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/user-event": "^14.6.1",
-    "jest": "^30.0.4",
-    "jest-environment-jsdom": "^30.0.4"
-  }
-}
+  "homepage": "https://github.com/CodeYourFuture/CYF-Coursework-Template#readme"
+}
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 app</title>
   </head>
   <body>
     <div id="content">

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/package.json b/Sprint-3/slideshow/package.json
@@ -13,5 +13,4 @@
   "bugs": {
     "url": "https://github.com/CodeYourFuture/CYF-Coursework-Template/issues"
   },
-  "homepage": "https://github.com/CodeYourFuture/CYF-Coursework-Template#readme"
 }
diff --git a/Sprint-3/slideshow/slideshow.js b/Sprint-3/slideshow/slideshow.js
@@ -5,4 +5,76 @@ const images = [
 ];
 
 
-// Write your code here
+// Write your code here
+// Start at the first image
+let currentIndex = 0;
+let intervalId = null; // To track interval for auto-slideshow
+
+// Get DOM elements
+const image = document.querySelector("#carousel-img");
+const forwardBtn = document.querySelector("#forward-btn");
+const backwardBtn = document.querySelector("#backward-btn");
+const autoForwardBtn = document.querySelector("#auto-forward");
+const autoBackBtn = document.querySelector("#auto-backward");
+const stopBtn = document.querySelector("#stop");
+
+// ========== Core Functionality ==========
+
+// Update the image based on currentIndex
+function updateImage() {
+  image.src = images[currentIndex];
+}
+
+// Move forward once
+function moveForward() {
+  currentIndex = (currentIndex + 1) % images.length;
+  updateImage();
+}
+
+// Move backward once
+function moveBackward() {
+  currentIndex = (currentIndex - 1 + images.length) % images.length;
+  updateImage();
+}
+
+// Start auto-slideshow forward
+function startAutoForward() {
+  disableButtons();
+  intervalId = setInterval(moveForward, 2000);
+}
+
+// Start auto-slideshow backward
+function startAutoBackward() {
+  disableButtons();
+  intervalId = setInterval(moveBackward, 2000);
+}
+
+// Stop the slideshow
+function stopSlideshow() {
+  clearInterval(intervalId);
+  intervalId = null;
+  enableButtons();
+}
+
+// Disable auto buttons during auto-play
+function disableButtons() {
+  autoForwardBtn.disabled = true;
+  autoBackBtn.disabled = true;
+}
+
+// Re-enable auto buttons
+function enableButtons() {
+  autoForwardBtn.disabled = false;
+  autoBackBtn.disabled = false;
+}
+
+// ========== Event Listeners ==========
+
+forwardBtn.addEventListener("click", moveForward);
+backwardBtn.addEventListener("click", moveBackward);
+autoForwardBtn.addEventListener("click", startAutoForward);
+autoBackBtn.addEventListener("click", startAutoBackward);
+stopBtn.addEventListener("click", stopSlideshow);
+
+// ========== Initial Setup ==========
+updateImage();
diff --git a/Sprint-3/todo-list/script.js b/Sprint-3/todo-list/script.js
@@ -1,25 +1,79 @@
-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.
-}
+// script.js
 
-// These are the same todos that currently display in the HTML
-// You will want to remove the ones in the current HTML after you have created them using JavaScript
+// Initial list of todos
 let todos = [
   { task: "Wash the dishes", completed: false },
-  { task: "Do the shopping", completed: false },
+  { task: "Do the shopping", completed: false }
 ];
 
-populateTodoList(todos);
+// Main function to populate the ToDo list in the DOM
+function populateTodoList(todos) {
+  const list = document.getElementById("todo-list");
+  list.innerHTML = ""; // Clear existing list
+
+  todos.forEach((todo) => {
+    const li = document.createElement("li");
+    li.className = "list-group-item d-flex justify-content-between align-items-center";
+    li.textContent = todo.task;
+
+    // Add line-through if completed
+    if (todo.completed) {
+      li.style.textDecoration = "line-through";
+    }
+
+    // Create span to hold action icons
+    const span = document.createElement("span");
+    span.className = "badge bg-primary rounded-pill";
+
+    // Check icon to toggle completion
+    const checkIcon = document.createElement("i");
+    checkIcon.className = "fa fa-check mx-1";
+    checkIcon.style.cursor = "pointer";
+    checkIcon.addEventListener("click", () => {
+      todo.completed = !todo.completed;
+      li.style.textDecoration = todo.completed ? "line-through" : "none";
+    });
 
-// This function will take the value of the input field and add it as a new todo to the bottom of the todo list. These new todos will need the completed and delete buttons adding like normal.
+    // Trash icon to delete todo
+    const trashIcon = document.createElement("i");
+    trashIcon.className = "fa fa-trash mx-1";
+    trashIcon.style.cursor = "pointer";
+    trashIcon.addEventListener("click", () => {
+      todos = todos.filter((t) => t !== todo);
+      populateTodoList(todos);
+    });
+
+    // Append icons to span, and span to list item
+    span.appendChild(checkIcon);
+    span.appendChild(trashIcon);
+    li.appendChild(span);
+
+    list.appendChild(li);
+  });
+}
+
+// Adds a new todo from the input field
 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!
+  const input = document.querySelector("input[type='text']");
+  const newTask = input.value.trim();
+  if (newTask !== "") {
+    todos.push({ task: newTask, completed: false });
+    populateTodoList(todos);
+    input.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).
+// Deletes all completed todos
 function deleteAllCompletedTodos() {
-  // Write your code here...
+  todos = todos.filter((todo) => !todo.completed);
+  populateTodoList(todos);
 }
+
+// Event listeners for buttons
+const form = document.querySelector("form");
+form.addEventListener("submit", addNewTodo);
+document.getElementById("remove-all-completed").addEventListener("click", deleteAllCompletedTodos);
+
+// Initial population of list
+populateTodoList(todos);