From 605a580a233ab808d4b844945e8ebcdf34ae5282 Mon Sep 17 00:00:00 2001 From: Bassam-Radwan Date: Fri, 25 Jul 2025 13:00:21 +0100 Subject: [PATCH 1/6] Sprint-3 --- Sprint-3/alarmclock/alarmclock.js | 12 +++++- Sprint-3/quote-generator/quotes.js | 18 +++++++++ Sprint-3/reading-list/script.js | 17 +++++++++ Sprint-3/slideshow/index.html | 1 + Sprint-3/slideshow/slideshow.js | 29 +++++++++++++-- Sprint-3/slideshow/style.css | 41 ++++++++++++++++++++- Sprint-3/todo-list/index.html | 1 + Sprint-3/todo-list/script.js | 59 ++++++++++++++++++++++++++---- 8 files changed, 164 insertions(+), 14 deletions(-) diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js index 6ca81cd3b..36dcef168 100644 --- a/Sprint-3/alarmclock/alarmclock.js +++ b/Sprint-3/alarmclock/alarmclock.js @@ -1,4 +1,14 @@ -function setAlarm() {} +function setAlarm() { + const timeInput = document.getElementById("alarmSet"); // now matches the HTML + const seconds = parseInt(timeInput.value, 10); + + if (isNaN(seconds) || seconds <= 0) { + alert("Please enter a valid number of seconds."); + return; + } + + setTimeout(playAlarm, seconds * 1000); // play alarm after the entered time +} // DO NOT EDIT BELOW HERE diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js index 4a4d04b72..ca989cdc9 100644 --- a/Sprint-3/quote-generator/quotes.js +++ b/Sprint-3/quote-generator/quotes.js @@ -491,3 +491,21 @@ const quotes = [ ]; // call pickFromArray with the quotes array to check you get a random quote +function showRandomQuote() { + const randomQuote = pickFromArray(quotes); + const quoteElement = document.getElementById("quote"); + const authorElement = document.getElementById("author"); + + quoteElement.textContent = `"${randomQuote.quote}"`; + authorElement.textContent = `— ${randomQuote.author}`; +} + +function setup() { + const button = document.getElementById("new-quote"); + button.addEventListener("click", showRandomQuote); + + // Show one quote immediately on page load + showRandomQuote(); +} + +window.addEventListener("DOMContentLoaded", setup); diff --git a/Sprint-3/reading-list/script.js b/Sprint-3/reading-list/script.js index 6024d73a0..bb44564fc 100644 --- a/Sprint-3/reading-list/script.js +++ b/Sprint-3/reading-list/script.js @@ -21,3 +21,20 @@ const books = [ }, ]; +const readingList = document.getElementById("reading-list"); + +books.forEach((book) => { + const li = document.createElement("li"); + + li.style.backgroundColor = book.alreadyRead ? "green" : "red"; + + const text = document.createElement("p"); + text.innerText = `${book.title} by ${book.author}`; + li.appendChild(text); + + const img = document.createElement("img"); + img.src = book.bookCoverImage; + li.appendChild(img); + + readingList.appendChild(li); +}); diff --git a/Sprint-3/slideshow/index.html b/Sprint-3/slideshow/index.html index 50f2eb1c0..0eead7975 100644 --- a/Sprint-3/slideshow/index.html +++ b/Sprint-3/slideshow/index.html @@ -3,6 +3,7 @@ + Title here diff --git a/Sprint-3/slideshow/slideshow.js b/Sprint-3/slideshow/slideshow.js index 063ceefb5..a2a5d5b65 100644 --- a/Sprint-3/slideshow/slideshow.js +++ b/Sprint-3/slideshow/slideshow.js @@ -1,8 +1,29 @@ 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", ]; +// Write your code here +let currentIndex = 0; -// Write your code here \ No newline at end of file +// Get references to DOM elements +const imgElement = document.getElementById("carousel-img"); +const forwardButton = document.getElementById("forward-btn"); +const backwardButton = document.getElementById("backward-btn"); + +// Function to update the image src +function updateImage() { + imgElement.src = images[currentIndex]; +} + +// Event listeners for buttons +forwardButton.addEventListener("click", () => { + currentIndex = (currentIndex + 1) % images.length; + updateImage(); +}); + +backwardButton.addEventListener("click", () => { + currentIndex = (currentIndex - 1 + images.length) % images.length; + updateImage(); +}); diff --git a/Sprint-3/slideshow/style.css b/Sprint-3/slideshow/style.css index 63cedf2d2..b2f1d1eb9 100644 --- a/Sprint-3/slideshow/style.css +++ b/Sprint-3/slideshow/style.css @@ -1 +1,40 @@ -/** Write your CSS in here **/ +/* Center everything on the page */ +body { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + min-height: 100vh; + margin: 0; + font-family: Arial, sans-serif; + background-color: #f5f5f5; + gap: 20px; +} +img{ + width: 60%; +} +#carousel-img { + max-width: 90%; + height: auto; + border: 4px solid #ccc; + border-radius: 10px; + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); + margin-bottom: 20px; +} + +button { + padding: 10px 20px; + margin: 0 10px; + font-size: 16px; + font-weight: bold; + color: #fff; + background-color: #3498db; + border: none; + border-radius: 6px; + cursor: pointer; + transition: background-color 0.3s ease; +} + +button:hover { + background-color: #2980b9; +} \ No newline at end of file diff --git a/Sprint-3/todo-list/index.html b/Sprint-3/todo-list/index.html index ee3ef64fd..7d03ee901 100644 --- a/Sprint-3/todo-list/index.html +++ b/Sprint-3/todo-list/index.html @@ -22,6 +22,7 @@ + diff --git a/Sprint-3/todo-list/script.js b/Sprint-3/todo-list/script.js index 61982a54f..a498819d7 100644 --- a/Sprint-3/todo-list/script.js +++ b/Sprint-3/todo-list/script.js @@ -1,10 +1,43 @@ 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. + list.innerHTML = ""; + + todos.forEach((todo, index) => { + const li = document.createElement("li"); + li.className = + "list-group-item d-flex justify-content-between align-items-center"; + li.innerText = todo.task; + + if (todo.completed) { + li.style.textDecoration = "line-through"; + } + + const span = document.createElement("span"); + span.className = "badge bg-primary rounded-pill"; + + const checkBtn = document.createElement("i"); + checkBtn.className = "fa fa-check mx-1"; + checkBtn.style.cursor = "pointer"; + checkBtn.addEventListener("click", () => { + todo.completed = !todo.completed; + populateTodoList(todos); + }); + + const trashBtn = document.createElement("i"); + trashBtn.className = "fa fa-trash mx-1"; + trashBtn.style.cursor = "pointer"; + trashBtn.addEventListener("click", () => { + todos.splice(index, 1); + populateTodoList(todos); + }); + + span.appendChild(checkBtn); + span.appendChild(trashBtn); + li.appendChild(span); + list.appendChild(li); + }); } -// 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 let todos = [ { task: "Wash the dishes", completed: false }, { task: "Do the shopping", completed: false }, @@ -12,14 +45,24 @@ let todos = [ populateTodoList(todos); -// 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. 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"); + 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). +document.querySelector("form").addEventListener("submit", addNewTodo); + function deleteAllCompletedTodos() { - // Write your code here... + todos = todos.filter((todo) => !todo.completed); + populateTodoList(todos); } + +document + .getElementById("remove-all-completed") + .addEventListener("click", deleteAllCompletedTodos); From d4106ed07da97513ac0d785a918d93d7575a38b9 Mon Sep 17 00:00:00 2001 From: Bassam-Radwan Date: Sat, 26 Jul 2025 09:25:44 +0100 Subject: [PATCH 2/6] Styling --- Sprint-3/todo-list/style.css | 98 ++++++++++++++++++++++++++++++++++++ 1 file changed, 98 insertions(+) diff --git a/Sprint-3/todo-list/style.css b/Sprint-3/todo-list/style.css index 8b1378917..aa7eca37c 100644 --- a/Sprint-3/todo-list/style.css +++ b/Sprint-3/todo-list/style.css @@ -1 +1,99 @@ +/* General page styling */ +body { + font-family: Arial, sans-serif; + background-color: #f7f7f7; + margin: 0; + padding: 2rem; + display: flex; + flex-direction: column; + align-items: center; +} + +/* Form container */ +form { + background-color: #fff; + padding: 1.5rem; + border-radius: 8px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); + width: 100%; + max-width: 500px; + margin-bottom: 2rem; +} + +/* Input field */ +input[type="text"] { + width: 100%; + padding: 0.75rem; + font-size: 1rem; + border: 1px solid #ccc; + border-radius: 5px; + box-sizing: border-box; + margin-bottom: 1rem; +} + +/* Buttons */ +button { + padding: 0.5rem 1rem; + font-size: 1rem; + margin-right: 0.5rem; + border: none; + border-radius: 5px; + cursor: pointer; +} + +/* Submit Button */ +button[type="submit"] { + background-color: #007bff; + color: white; +} + +button[type="submit"]:hover { + background-color: #0056b3; +} + +/* Remove all completed */ +#remove-all-completed { + background-color: #dc3545; + color: white; +} + +#remove-all-completed:hover { + background-color: #a71d2a; +} + +/* Todo list styling */ +ul#todo-list { + list-style-type: none; + padding: 0; + width: 100%; + max-width: 500px; +} + +/* Individual todo item */ +ul#todo-list li { + background-color: #fff; + margin-bottom: 0.5rem; + padding: 0.75rem 1rem; + border-radius: 5px; + box-shadow: 0 0 4px rgba(0, 0, 0, 0.05); + display: flex; + justify-content: space-between; + align-items: center; +} + +/* Completed todo */ +.completed { + text-decoration: line-through; + color: #888; +} + +/* Icons */ +.todo-actions i { + margin-left: 10px; + cursor: pointer; +} + +.todo-actions i:hover { + color: #007bff; +} \ No newline at end of file From 88c1a6db45fd08838b57d07b60001cfc0b66c441 Mon Sep 17 00:00:00 2001 From: Bassam-Radwan Date: Sat, 26 Jul 2025 11:16:57 +0100 Subject: [PATCH 3/6] Styling quote's file --- Sprint-3/quote-generator/index.html | 1 + Sprint-3/quote-generator/quotes.js | 2 +- Sprint-3/quote-generator/style.css | 64 +++++++++++++++++++++++++++++ 3 files changed, 66 insertions(+), 1 deletion(-) diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html index 30b434bcf..c1a9c733a 100644 --- a/Sprint-3/quote-generator/index.html +++ b/Sprint-3/quote-generator/index.html @@ -3,6 +3,7 @@ + Title here diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js index ca989cdc9..244d05877 100644 --- a/Sprint-3/quote-generator/quotes.js +++ b/Sprint-3/quote-generator/quotes.js @@ -497,7 +497,7 @@ function showRandomQuote() { const authorElement = document.getElementById("author"); quoteElement.textContent = `"${randomQuote.quote}"`; - authorElement.textContent = `— ${randomQuote.author}`; + authorElement.textContent = ` ${randomQuote.author}`; } function setup() { diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css index 63cedf2d2..131de3e00 100644 --- a/Sprint-3/quote-generator/style.css +++ b/Sprint-3/quote-generator/style.css @@ -1 +1,65 @@ /** Write your CSS in here **/ +/* Reset some default styles */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + background: linear-gradient(to right, #74ebd5, #acb6e5); + min-height: 100vh; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: 20px; + gap: 10px; +} + +.quote-container { + background: #ffffff; + padding: 30px 40px; + border-radius: 12px; + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); + max-width: 600px; + text-align: center; +} + +h1 { + margin-bottom: 20px; + font-size: 2rem; + color: #333; +} + +#quote { + font-size: 1.5rem; + font-style: italic; + color: #555; + margin-bottom: 10px; +} + +#author { + font-size: 1.1rem; + color: #05074a; + border-bottom: solid 2px #05074a; + margin-bottom: 20px; + font-weight: bold; +} + +#new-quote { + padding: 10px 20px; + font-size: 1rem; + border: none; + border-radius: 8px; + background-color: #5c6bc0; + color: white; + cursor: pointer; + transition: background-color 0.3s ease; +} + +#new-quote:hover { + background-color: #05074a; + color: white; +} \ No newline at end of file From cfea797facfb57acd75d2ab4fc58698b0a549159 Mon Sep 17 00:00:00 2001 From: Bassam-Radwan Date: Wed, 30 Jul 2025 13:24:30 +0100 Subject: [PATCH 4/6] Update alarm clock --- Sprint-3/alarmclock/alarmclock.js | 12 ++++++++++++ Sprint-3/todo-list/index.html | 1 + Sprint-3/todo-list/script.js | 5 +---- Sprint-3/todo-list/style.css | 12 ++++-------- 4 files changed, 18 insertions(+), 12 deletions(-) diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js index 36dcef168..9e5e198c6 100644 --- a/Sprint-3/alarmclock/alarmclock.js +++ b/Sprint-3/alarmclock/alarmclock.js @@ -6,6 +6,18 @@ function setAlarm() { alert("Please enter a valid number of seconds."); return; } + const mins = String(Math.floor(seconds / 60)).padStart(2, "0"); + let timeOnScreen = String(seconds % 60).padStart(2, "0"); + + const showTime = setInterval(() => { + timeOnScreen--; + document.getElementById( + "timeRemaining" + ).innerText = `TimeRemaining: ${mins}: ${timeOnScreen}`; + if (timeOnScreen == 0) { + clearInterval(showTime); + } + }, 1000); setTimeout(playAlarm, seconds * 1000); // play alarm after the entered time } diff --git a/Sprint-3/todo-list/index.html b/Sprint-3/todo-list/index.html index 7d03ee901..b475580b3 100644 --- a/Sprint-3/todo-list/index.html +++ b/Sprint-3/todo-list/index.html @@ -5,6 +5,7 @@ Title here +
diff --git a/Sprint-3/todo-list/script.js b/Sprint-3/todo-list/script.js index a498819d7..2228b70cd 100644 --- a/Sprint-3/todo-list/script.js +++ b/Sprint-3/todo-list/script.js @@ -4,8 +4,6 @@ function populateTodoList(todos) { todos.forEach((todo, index) => { const li = document.createElement("li"); - li.className = - "list-group-item d-flex justify-content-between align-items-center"; li.innerText = todo.task; if (todo.completed) { @@ -13,14 +11,13 @@ function populateTodoList(todos) { } const span = document.createElement("span"); - span.className = "badge bg-primary rounded-pill"; const checkBtn = document.createElement("i"); checkBtn.className = "fa fa-check mx-1"; checkBtn.style.cursor = "pointer"; checkBtn.addEventListener("click", () => { todo.completed = !todo.completed; - populateTodoList(todos); + li.style.textDecoration = todo.completed ? "line-through" : "none"; }); const trashBtn = document.createElement("i"); diff --git a/Sprint-3/todo-list/style.css b/Sprint-3/todo-list/style.css index aa7eca37c..7ba5b1844 100644 --- a/Sprint-3/todo-list/style.css +++ b/Sprint-3/todo-list/style.css @@ -82,18 +82,14 @@ ul#todo-list li { align-items: center; } -/* Completed todo */ -.completed { - text-decoration: line-through; - color: #888; -} /* Icons */ -.todo-actions i { - margin-left: 10px; +#todo-list i { + margin: 0 10px; cursor: pointer; + } -.todo-actions i:hover { +#todo-list i:hover { color: #007bff; } \ No newline at end of file From fa824d1ddb0419702726c6d66249a0467ec82998 Mon Sep 17 00:00:00 2001 From: Bassam-Radwan Date: Fri, 1 Aug 2025 11:52:47 +0100 Subject: [PATCH 5/6] Update the alarm clock --- Sprint-3/alarmclock/alarmclock.js | 30 ++++++++++++++++-------------- 1 file changed, 16 insertions(+), 14 deletions(-) diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js index 9e5e198c6..c59316a79 100644 --- a/Sprint-3/alarmclock/alarmclock.js +++ b/Sprint-3/alarmclock/alarmclock.js @@ -6,20 +6,22 @@ function setAlarm() { alert("Please enter a valid number of seconds."); return; } - const mins = String(Math.floor(seconds / 60)).padStart(2, "0"); - let timeOnScreen = String(seconds % 60).padStart(2, "0"); - - const showTime = setInterval(() => { - timeOnScreen--; - document.getElementById( - "timeRemaining" - ).innerText = `TimeRemaining: ${mins}: ${timeOnScreen}`; - if (timeOnScreen == 0) { - clearInterval(showTime); - } - }, 1000); - - setTimeout(playAlarm, seconds * 1000); // play alarm after the entered time +let remainingSeconds = seconds; + +const showTime = setInterval(() => { + if (remainingSeconds <= 0) { + clearInterval(showTime); + playAlarm(); + return; + } + + remainingSeconds--; + + const mins = String(Math.floor(remainingSeconds / 60)).padStart(2, "0"); + const secs = String(remainingSeconds % 60).padStart(2, "0"); + + document.getElementById("timeRemaining").innerText = `Time Remaining: ${mins}:${secs}`; +}, 1000); } // DO NOT EDIT BELOW HERE From f7494e3ec409b5e39acadbb7e2c7292defcaa06a Mon Sep 17 00:00:00 2001 From: Bassam-Radwan Date: Fri, 1 Aug 2025 12:07:54 +0100 Subject: [PATCH 6/6] Timer updates --- Sprint-3/alarmclock/alarmclock.js | 28 ++++++++++++++++------------ 1 file changed, 16 insertions(+), 12 deletions(-) diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js index c59316a79..fc45e3452 100644 --- a/Sprint-3/alarmclock/alarmclock.js +++ b/Sprint-3/alarmclock/alarmclock.js @@ -1,4 +1,6 @@ +let countInterval; function setAlarm() { + clearInterval(countInterval); const timeInput = document.getElementById("alarmSet"); // now matches the HTML const seconds = parseInt(timeInput.value, 10); @@ -6,22 +8,24 @@ function setAlarm() { alert("Please enter a valid number of seconds."); return; } -let remainingSeconds = seconds; + let remainingSeconds = seconds; -const showTime = setInterval(() => { - if (remainingSeconds <= 0) { - clearInterval(showTime); - playAlarm(); - return; - } + countInterval = setInterval(() => { + if (remainingSeconds <= 0) { + clearInterval(showTime); + playAlarm(); + return; + } - remainingSeconds--; + remainingSeconds--; - const mins = String(Math.floor(remainingSeconds / 60)).padStart(2, "0"); - const secs = String(remainingSeconds % 60).padStart(2, "0"); + const mins = String(Math.floor(remainingSeconds / 60)).padStart(2, "0"); + const secs = String(remainingSeconds % 60).padStart(2, "0"); - document.getElementById("timeRemaining").innerText = `Time Remaining: ${mins}:${secs}`; -}, 1000); + document.getElementById( + "timeRemaining" + ).innerText = `Time Remaining: ${mins}:${secs}`; + }, 1000); } // DO NOT EDIT BELOW HERE