HackYourFutureBelgium · BaselAdoum · Nov 5, 2025 · Nov 5, 2025 · Nov 5, 2025 · Nov 5, 2025
diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js
@@ -1,4 +1,68 @@
-function setAlarm() {}
+// This is our main function that gets called when "Set Alarm" button is clicked
+function setAlarm() {
+  // STEP 1: Get the number the user typed in the input box
+  // document.getElementById finds the HTML element with id="alarmSet" (our input field)
+  // .value gets whatever number the user typed in that input field
+  const alarmSet = document.getElementById("alarmSet");
+  let timeInSeconds = parseInt(alarmSet.value);
+
+  // STEP 2: Check if the user entered a valid number
+  // isNaN means "Is Not a Number" - it checks if what they typed isn't a real number
+  // We also check if the number is 0 or negative, which wouldn't make sense for a timer
+  if (isNaN(timeInSeconds) || timeInSeconds <= 0) {
+    alert("Please enter a valid positive number");
+    return; // This stops the function here if the input is invalid
+  }
+
+  // STEP 3: Stop any existing countdown (in case user clicks "Set Alarm" multiple times)
+  // We store our timer in window.countdownInterval so we can access it later
+  if (window.countdownInterval) {
+    clearInterval(window.countdownInterval); // This stops the previous timer
+  }
+
+  // STEP 4: Show the initial time immediately (don't wait 1 second for first update)
+  updateTimeDisplay(timeInSeconds);
+
+  // STEP 5: Start the countdown timer
+  // setInterval runs code repeatedly every X milliseconds (1000ms = 1 second)
+  window.countdownInterval = setInterval(() => {
+    // This code runs every second:
+
+    // STEP 5a: Decrease time by 1 second
+    timeInSeconds--;
+
+    // STEP 5b: Update the display with new time
+    updateTimeDisplay(timeInSeconds);
+
+    // STEP 5c: Check if time is up
+    if (timeInSeconds <= 0) {
+      clearInterval(window.countdownInterval); // Stop the timer
+      playAlarm(); // Play the alarm sound (this function is provided for us)
+    }
+  }, 1000); // 1000 milliseconds = 1 second
+}
+
+// This helper function takes seconds and displays them as MM:SS format
+function updateTimeDisplay(seconds) {
+  // STEP 1: Find the HTML element where we show the time
+  // This finds the <h1> tag with id="timeRemaining" where we display "Time Remaining: 00:00"
+  const timeRemaining = document.getElementById("timeRemaining");
+
+  // STEP 2: Convert total seconds into minutes and seconds
+  // Math.floor rounds DOWN to nearest whole number (so 65 seconds becomes 1 minute, not 1.08)
+  const minutes = Math.floor(seconds / 60);
+  const remainingSeconds = seconds % 60; // % gives us the remainder (65 % 60 = 5 seconds)
+
+  // STEP 3: Format numbers to always show 2 digits with leading zeros
+  // padStart(2, '0') means "make this string 2 characters long by adding '0' to the front if needed"
+  // So 5 becomes "05", but 12 stays "12"
+  const formattedMinutes = minutes.toString().padStart(2, "0");
+  const formattedSeconds = remainingSeconds.toString().padStart(2, "0");
+
+  // STEP 4: Update the actual text on the webpage
+  // This changes what the user sees on screen
+  timeRemaining.textContent = `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 app</title>
   </head>
   <body>
     <div class="centre">

diff --git a/Sprint-3/alarmclock/readme.md b/Sprint-3/alarmclock/readme.md
@@ -2,12 +2,14 @@
 
 In this folder you will find the basic setup of an alarm clock.
 
-First off, once you've branched off `main`, then update the title element in `index.html` to "Alarm clock app"
+First off, once you've branched off `main`, then update the title element 
+in `index.html` to "Alarm clock app"
 You will need to write your implementation in `alarmclock.js`.
 
 ## How the clock should work
 
-When you click the `Set Alarm` button the counter at the top of the screen should change to the number you entered in the `input` field. For example, if the `input` field says `10` then the title should say `Time Remaining: 00:10`.
+When you click the `Set Alarm` button the counter at the top of the screen should change to the number you entered in the `input` field. For example, if the `input` field says `10` then 
+the title should say `Time Remaining: 00:10`.
 
 Every one second the title should count down by one.
 
@@ -29,4 +31,6 @@ If you have time and want to do more why not try
 
 - Make the background change color when the alarm clock finishes
   - Try making the background flash!
-- Could you add `pause` functionality so that the count down stops and then you restart it later?
+- Could you add `pause` functionality so that the count down stops 
+and then you restart it later?
+
diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html
@@ -3,13 +3,16 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Title here</title>
-    <script defer src="quotes.js"></script>
+    <link rel="stylesheet" href="style.css">
+    <title>Quote generator app</title>
   </head>
   <body>
-    <h1>hello there</h1>
+    <h1>Quote Generator</h1>
     <p id="quote"></p>
     <p id="author"></p>
     <button type="button" id="new-quote">New quote</button>
+
+    <!-- Script at the bottom instead of using defer -->
+    <script src="quotes.js"></script>
   </body>
-</html>
+</html>
diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js
@@ -15,6 +15,7 @@
 // ---------------
 // pickFromArray(['a','b','c','d'])     // maybe returns 'c'
 
+
 // You don't need to change this function
 function pickFromArray(choices) {
   return choices[Math.floor(Math.random() * choices.length)];
@@ -491,3 +492,33 @@ const quotes = [
 ];
 
 // call pickFromArray with the quotes array to check you get a random quote
+
+// STEP 1: Get references to the HTML elements we need to update
+// These lines find the HTML elements by their ID so we can change their content later
+const quoteElement = document.getElementById("quote");
+const authorElement = document.getElementById("author");
+const newQuoteButton = document.getElementById("new-quote");
+
+// STEP 2: Create a function to display a random quote
+// This function will be called when page loads AND when button is clicked
+function displayRandomQuote() {
+  // Use the provided pickFromArray function to get a random quote object
+  // The quotes array contains objects, each with 'quote' and 'author' properties
+  const randomQuote = pickFromArray(quotes);
+
+  // Update the quote text on the webpage
+  // randomQuote.quote gets the actual quote text from the random quote object
+  quoteElement.textContent = randomQuote.quote;
+
+  // Update the author text on the webpage
+  // randomQuote.author gets the author's name from the random quote object
+  authorElement.textContent = "- " + randomQuote.author;
+}
+
+// STEP 3: Set up the button click event
+// When someone clicks the "New quote" button, run displayRandomQuote function
+newQuoteButton.addEventListener("click", displayRandomQuote);
+
+// STEP 4: Show a random quote when the page first loads
+// This makes sure a quote is displayed immediately when someone visits the page
+displayRandomQuote();
diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css
@@ -1 +1,69 @@
-/** Write your CSS in here **/
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+/* Style the entire page */
+body {
+    font-family: 'Arial', sans-serif;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    min-height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 20px;
+}
+
+/* Main container for the quote generator */
+.container {
+    background: white;
+    border-radius: 15px;
+    padding: 40px;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
+    max-width: 600px;
+    width: 100%;
+    text-align: center;
+}
+
+/* Style the main heading */
+h1 {
+    color: #333;
+    margin-bottom: 30px;
+    font-size: 2.5rem;
+    font-weight: 300;
+}
+
+/* Style the quote text */
+#quote {
+    font-size: 1.4rem;
+    line-height: 1.6;
+    color: #555;
+    margin-bottom: 30px;  /* Increased space below quote */
+    font-style: italic;
+}
+
+/* Style the author text */
+#author {
+    font-size: 1.1rem;
+    color: #131313;
+    margin-bottom: 30px;  /* Space between author and button */
+    font-weight: bold;
+    display: block;       /* Ensures it takes full width */
+}
+
+/* Style the button */
+#new-quote {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+    border: none;
+    padding: 15px 30px;
+    font-size: 1.1rem;
+    border-radius: 50px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+    display: block;       /* Makes button take full width */
+    margin: 0 auto;       /* Centers the button */
+    width: 200px;         /* Fixed width for the button */
+}
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/reading-list/script.js b/Sprint-3/reading-list/script.js
@@ -1,4 +1,72 @@
-// for the tests, do not modify this array of books
+// FUNCTION: readingList - This function takes an array of book objects and displays them on the webpage
+function readingList(books) {
+  // STEP 1: Get the reading list container from the HTML
+  // document.getElementById finds the <ul> element with id="reading-list" from our HTML
+  // We store it in a variable called 'readingList' so we can add books to it later
+  const readingList = document.getElementById("reading-list");
+
+  // STEP 2: Loop through each book in the array
+  // books.forEach goes through each book object in the books array, one by one
+  // For each book, it runs the code inside the curly braces {}
+  books.forEach((book) => {
+    // STEP 3: Create a list item for each book
+    // document.createElement("li") makes a new empty <li> element (list item)
+    // We store this new list item in a variable called 'listItem'
+    // This <li> will be the container for one book's information
+    const listItem = document.createElement("li");
+
+    // STEP 4: Set background color based on reading status
+    // Check if the book has been read (book.alreadyRead is true or false)
+    // If book.alreadyRead is true, make the background green
+    // If book.alreadyRead is false, make the background red
+    // This visually shows which books we've read and which we haven't
+    if (book.alreadyRead) {
+      listItem.style.backgroundColor = "green"; // Read books = green
+    } else {
+      listItem.style.backgroundColor = "red"; // Unread books = red
+    }
+
+    // STEP 5: Create the book content as HTML string
+    // We use backticks `` to create a template string that can span multiple lines
+    // ${} inside the template lets us insert JavaScript variables
+    // This creates the HTML structure for one book with:
+    // - Book cover image
+    // - Book title
+    // - Book author
+    // - Reading status text
+    const bookContent = `
+      <div class="book">
+        <img src="${book.bookCoverImage}" alt="${book.title} cover">
+        <div class="book-info">
+          <h3>${book.title}</h3>
+          <p>by ${book.author}</p>
+          <p class="reading-status">${
+            book.alreadyRead ? "Already read" : "Not read yet"
+          }</p>
+        </div>
+      </div>
+    `;
+
+    // STEP 6: Add the content to the list item
+    // listItem.innerHTML takes our HTML string from bookContent
+    // and puts it inside the <li> element we created earlier
+    // Now our empty <li> is filled with the book's information
+    listItem.innerHTML = bookContent;
+
+    // STEP 7: Add the list item to the reading list
+    // readingList.appendChild takes our completed list item (with book content)
+    // and adds it to the <ul> element on the webpage
+    // This makes the book visible to the user
+    readingList.appendChild(listItem);
+  });
+}
+
+// THE ARRAY OF BOOKS: This is our data - a list of book objects
+// Each book object has:
+// - title: the book's name
+// - author: who wrote the book
+// - alreadyRead: true/false if we've read it
+// - bookCoverImage: URL to the book's cover picture
 const books = [
   {
     title: "The Design of Everyday Things",
@@ -21,3 +89,7 @@ const books = [
   },
 ];
 
+// STEP 8: Call the function to render the reading list
+// This executes the readingList function and passes our books array to it
+// The function will then create and display all the books on the webpage
+readingList(books);
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>