diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js index 6ca81cd3b..fc45e3452 100644 --- a/Sprint-3/alarmclock/alarmclock.js +++ b/Sprint-3/alarmclock/alarmclock.js @@ -1,4 +1,32 @@ -function setAlarm() {} +let countInterval; +function setAlarm() { + clearInterval(countInterval); + 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; + } + let remainingSeconds = seconds; + + countInterval = 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 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 4a4d04b72..244d05877 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/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 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..b475580b3 100644 --- a/Sprint-3/todo-list/index.html +++ b/Sprint-3/todo-list/index.html @@ -5,6 +5,7 @@ Title here +
@@ -22,6 +23,7 @@
+ diff --git a/Sprint-3/todo-list/script.js b/Sprint-3/todo-list/script.js index 61982a54f..2228b70cd 100644 --- a/Sprint-3/todo-list/script.js +++ b/Sprint-3/todo-list/script.js @@ -1,10 +1,40 @@ 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.innerText = todo.task; + + if (todo.completed) { + li.style.textDecoration = "line-through"; + } + + const span = document.createElement("span"); + + const checkBtn = document.createElement("i"); + checkBtn.className = "fa fa-check mx-1"; + checkBtn.style.cursor = "pointer"; + checkBtn.addEventListener("click", () => { + todo.completed = !todo.completed; + li.style.textDecoration = todo.completed ? "line-through" : "none"; + }); + + 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 +42,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); diff --git a/Sprint-3/todo-list/style.css b/Sprint-3/todo-list/style.css index 8b1378917..7ba5b1844 100644 --- a/Sprint-3/todo-list/style.css +++ b/Sprint-3/todo-list/style.css @@ -1 +1,95 @@ +/* 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; +} + + +/* Icons */ +#todo-list i { + margin: 0 10px; + cursor: pointer; + +} + +#todo-list i:hover { + color: #007bff; +} \ No newline at end of file