diff --git a/Sprint-3/slideshow/index.html b/Sprint-3/slideshow/index.html
index 50f2eb1c0..71e0c8dfa 100644
--- a/Sprint-3/slideshow/index.html
+++ b/Sprint-3/slideshow/index.html
@@ -3,7 +3,7 @@
- Title here
+ Image carousel
diff --git a/Sprint-3/slideshow/package.json b/Sprint-3/slideshow/package.json
index 306353179..64670ee85 100644
--- 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
index 063ceefb5..dd3810f07 100644
--- a/Sprint-3/slideshow/slideshow.js
+++ b/Sprint-3/slideshow/slideshow.js
@@ -5,4 +5,76 @@ const images = [
];
-// Write your code here
\ No newline at end of file
+// 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
index 61982a54f..9d28b82f8 100644
--- 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);
\ No newline at end of file