diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js
index 6ca81cd3b..3ea7da2c7 100644
--- 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
index 48e2e80d9..ff2d3b453 100644
--- 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
index c00a20c9c..d3848e885 100644
--- 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
index 30b434bcf..8ce367d53 100644
--- 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>
\ No newline at end of file
diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js
index 4a4d04b72..42b8471b0 100644
--- 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();
\ No newline at end of file
diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css
index 63cedf2d2..38a60d3ad 100644
--- 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
index dbdb0f471..c67805f51 100644
--- 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
index 6024d73a0..86bb477c8 100644
--- 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/package.json b/package.json
new file mode 100644
index 000000000..d15e6373b
--- /dev/null
+++ b/package.json
@@ -0,0 +1,10 @@
+{
+  "name": "module-data-groups",
+  "version": "1.0.0",
+  "scripts": {
+    "test": "jest"
+  },
+  "devDependencies": {
+    "jest": "^30.2.0"
+  }
+}
diff --git a/prep/100.js b/prep/100.js
new file mode 100644
index 000000000..86666f0fc
--- /dev/null
+++ b/prep/100.js
@@ -0,0 +1,19 @@
+const ingredients = ["olive oil", "tomatoes", "garlic", "onion", "carrot"];
+let ingredientsCopy = ingredients;
+ingredientsCopy.push("pasta", "salt", "pepper");
+const otherRecipe = [
+  "olive oil",
+  "tomatoes",
+  "garlic",
+  "onion",
+  "carrot",
+  "pasta",
+  "salt",
+  "pepper",
+];
+
+console.log(ingredients === ingredientsCopy);
+console.log(ingredients === otherRecipe);
+console.log(otherRecipe === ingredientsCopy);
+console.log(otherRecipe.length === ingredients.length);
+
diff --git a/prep/600.js b/prep/600.js
new file mode 100644
index 000000000..1119186e8
--- /dev/null
+++ b/prep/600.js
@@ -0,0 +1,26 @@
+function collectNumbers(list) {
+  const numbersOnly = [];
+  for (const item of list) {
+    if (item === "string") {
+      numbersOnly.push(item);
+    }
+  }
+  return numbersOnly;
+}
+
+test("only collects numbers in the array", () => {
+  const currentOutput = collectNumbers([
+    10.1,
+    "hello",
+    6.1,
+    8.0,
+    9.7,
+    10.1,
+    "hi",
+    3.5,
+    "oops",
+  ]);
+  const targetOutput = [10.1, 6.1, 8.0, 9.7, 10.1, 3.5];
+
+  expect(currentOutput).toEqual(targetOutput);
+});
diff --git a/prep/600.test.js b/prep/600.test.js
new file mode 100644
index 000000000..637438307
--- /dev/null
+++ b/prep/600.test.js
@@ -0,0 +1,26 @@
+function collectNumbers(list) {
+  const numbersOnly = [];
+  for (const item of list) {
+    if (typeof item === "number") {
+      numbersOnly.push(item);
+    }
+  }
+  return numbersOnly;
+}
+
+test("only collects numbers in the array", () => {
+  const currentOutput = collectNumbers([
+    10.1,
+    "hello",
+    6.1,
+    8.0,
+    9.7,
+    10.1,
+    "hi",
+    3.5,
+    "oops",
+  ]);
+  const targetOutput = [10.1, 6.1, 8.0, 9.7, 10.1, 3.5];
+
+  expect(currentOutput).toEqual(targetOutput);
+});
diff --git a/prep/Stair.js b/prep/Stair.js
new file mode 100644
index 000000000..a3f1a3612
--- /dev/null
+++ b/prep/Stair.js
@@ -0,0 +1,32 @@
+function drawStairs(n) {
+  let result = "";
+
+  for (let i = 0; i < n; i++) {
+    // Add spaces BEFORE the "I"
+    result += writeSpace(i);
+
+    // Then add the "I"
+    result += "I";
+
+    // Add newline if not the last line
+    if (i < n - 1) {
+      result += "\n";
+    }
+  }
+
+  return result;
+}
+
+function writeSpace(n) {
+  let result = "";
+  for (let i = 0; i < n; i++) {
+    result += "*"; // Use spaces, not asterisks
+  }
+  return result;
+}
+
+
+console.log(drawStairs(16));
+console.log(drawStairs(1));
+console.log(drawStairs(1));
+console.log ("^^^^")
diff --git a/prep/can-eat-icecream.js b/prep/can-eat-icecream.js
new file mode 100644
index 000000000..b2e76897e
--- /dev/null
+++ b/prep/can-eat-icecream.js
@@ -0,0 +1,45 @@
+// Write a function that returns true if I can eat the ice cream
+//  The function has 1 parameter representing an ice cream object
+//  I can eat the ice cream if it is lactose-free and contains less than 10 grams of sugar
+
+function canEat(iceCream) {
+      return (
+        iceCream.lactoseFree === true && iceCream.gramsOfSugarPerScoop < 10
+      );
+}
+
+const iceCream1 = {
+  flavour: "Vanilla",
+  lactoseFree: false,
+  gramsOfSugarPerScoop: 12,
+};
+
+const iceCream2 = {
+  flavour: "Mango Sorbet",
+  lactoseFree: true,
+  gramsOfSugarPerScoop: 10,
+};
+
+const iceCream3 = {
+  flavour: "Coconut",
+  lactoseFree: true,
+  gramsOfSugarPerScoop: 8,
+};
+
+const iceCream4 = {
+  flavour: "Strawberry",
+  lactoseFree: false,
+  gramsOfSugarPerScoop: 8,
+};
+
+const iceCream5 = {
+  flavour: "Lemon Sorbet",
+  lactoseFree: true,
+  gramsOfSugarPerScoop: 7,
+};
+
+console.log(canEat(iceCream1)); // what should this output?
+console.log(canEat(iceCream2)); // what should this output?
+console.log(canEat(iceCream3)); // what should this output?
+console.log(canEat(iceCream4)); // what should this output?
+console.log(canEat(iceCream5)); // what should this output?
diff --git a/prep/cheap-book.js b/prep/cheap-book.js
new file mode 100644
index 000000000..f4d31526f
--- /dev/null
+++ b/prep/cheap-book.js
@@ -0,0 +1,49 @@
+function getCheapest(book1, book2) {
+  const cost1 = book1.cost;
+  const cost2 = book2.cost;
+
+  if (cost1 < cost2) {
+    return book1.title; // book1 is cheaper
+  } else {
+    return book2.title; // book2 is cheaper (or equal)
+  }
+}
+// Write a function called `getCheapest` that will take 2 book objects as parameters
+//  and return the name of the cheaper book
+
+const fictionBook = {
+  title: "1984",
+  author: "George Orwell",
+  category: "Dystopian Fiction",
+  subcategory: "Political",
+  cost: 9.99,
+};
+
+const productivityBook = {
+  title: "Atomic Habits",
+  author: "James Clear",
+  category: "Self-Help",
+  subcategory: "Productivity",
+  cost: 16.2,
+};
+
+// this should output 1984
+console.log(getCheapest(fictionBook, productivityBook));
+
+
+
+
+// this is for plural 
+function getCheapest(books) {
+  if (books.length === 0) return null; // Handle empty array case
+
+  let cheapestBook = books[0]; // Start with the first book as the cheapest
+
+  for (let i = 1; i < books.length; i++) {
+    if (books[i].cost < cheapestBook.cost) {
+      cheapestBook = books[i]; // Update if we find a cheaper book
+    }
+  }
+
+  return cheapestBook.title;
+}
\ No newline at end of file
diff --git a/prep/dom-tutorial/index.html b/prep/dom-tutorial/index.html
new file mode 100644
index 000000000..e7e380d96
--- /dev/null
+++ b/prep/dom-tutorial/index.html
@@ -0,0 +1,156 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="We love Javascript" />
+    <title>Expense Tracker</title>
+    <link rel="icon" type="image/svg+xml" href="./images/favicon.png" />
+    <meta title="og:image" width="1920" height="1080" />
+    <link rel="stylesheet" href="style.css" />
+  </head>
+
+  <body>
+    <div class="container">
+      <div class="sidebar">
+        <div class="header">
+          <div class="logo">
+            <img src="./images/favicon.png" />
+          </div>
+          <h1 id="expense_tracker" class="title">
+            Expense <span>Tracker</span>
+          </h1>
+        </div>
+
+        <div class="balance-summary">
+          <h3>Balance Summary</h3>
+          <div class="label">Total Balance</div>
+          <div class="total-balance" id="totalBalance">$0</div>
+
+          <div class="income-expense">
+            <div>
+              <div class="label">Total Income</div>
+              <div class="income" id="totalIncome">$0</div>
+            </div>
+            <div>
+              <div class="label">Total Expense</div>
+              <div class="expense" id="totalExpense">$0</div>
+            </div>
+          </div>
+        </div>
+
+        <div class="add-transaction">
+          <h3>Add New Transaction</h3>
+
+          <form class="form-grid" id="transactionForm">
+            <div class="form-group">
+              <label>Type</label>
+              <select id="type" name="type">
+                <option>Income</option>
+                <option>Expense</option>
+              </select>
+            </div>
+
+            <div class="form-group">
+              <label>Amount</label>
+              <input
+                type="text"
+                placeholder="$ 0.00"
+                id="amount"
+                name="amount"
+              />
+            </div>
+
+            <div class="form-group">
+              <label>Date</label>
+              <input
+                type="date"
+                placeholder="mm/dd/yyyy"
+                id="date"
+                name="date"
+              />
+            </div>
+
+            <div class="form-group">
+              <label>Category</label>
+              <input
+                type="text"
+                placeholder="e.g. Salary, Groceries"
+                id="category"
+                name="category"
+              />
+            </div>
+
+            <input
+              role="button"
+              type="submit"
+              class="add-btn"
+              value="Add Transaction"
+            />
+          </form>
+        </div>
+      </div>
+
+      <div class="main-content">
+        <h2>Transaction History</h2>
+
+        <ul class="transaction-list" id="transactionList"></ul>
+      </div>
+    </div>
+
+    <!-- <footer class="footer">
+      <div class="footer-content">
+        <div class="footer-left">
+          <img class="footer-logo" src="./images/favicon.png" />
+          <p class="footer-text">© 2025 Logicbase Labs. All rights reserved.</p>
+        </div>
+        <div class="social-icons">
+          <p class="social-icon">
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
+              <path
+                d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"
+              />
+            </svg>
+          </p>
+          <p class="social-icon">
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
+              <path
+                d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"
+              />
+            </svg>
+          </p>
+          <p class="social-icon">
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
+              <path
+                d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"
+              />
+            </svg>
+          </p>
+          <p class="social-icon">
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
+              <path
+                d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"
+              />
+            </svg>
+          </p>
+          <p class="social-icon">
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
+              <path
+                d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"
+              />
+            </svg>
+          </p>
+          <p class="social-icon">
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
+              <path
+                d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"
+              />
+            </svg>
+          </p>
+        </div>
+      </div>
+    </footer> -->
+
+    <script src="./script.js"></script>
+  </body>
+</html>
diff --git a/prep/dom-tutorial/script.js b/prep/dom-tutorial/script.js
new file mode 100644
index 000000000..5f7e21989
--- /dev/null
+++ b/prep/dom-tutorial/script.js
@@ -0,0 +1,97 @@
+let all_transaction = [];
+
+const transaction_form = document.getElementById("transactionForm");
+const transaction_list = document.getElementById("transactionList");
+
+const total_balance = document.getElementById("totalBalance");
+const total_income = document.getElementById("totalIncome");
+const total_expense = document.getElementById("totalExpense");
+
+function updateList(type, amount, date, category) {
+  const itemEl = document.createElement("li");
+  const iconEl = document.createElement("div");
+  const detailsEl = document.createElement("div");
+  const nameEl = document.createElement("div");
+  const dateEl = document.createElement("div");
+  const amountEl = document.createElement("div");
+  const deleteEl = document.createElement("button");
+
+  itemEl.classList.add("transaction-item");
+  iconEl.classList.add("transaction-icon");
+  detailsEl.classList.add("transaction-details");
+  nameEl.classList.add("transaction-name");
+  dateEl.classList.add("transaction-date");
+  amountEl.classList.add("transaction-amount");
+  deleteEl.classList.add("transaction-delete");
+
+  iconEl.innerText = type === "Income" ? "↑" : "↓";
+  iconEl.classList.add(type === "Income" ? "income" : "expense");
+
+  nameEl.innerText = category;
+  dateEl.innerText = new Date(date).toLocaleDateString("en-US", {
+    month: "short",
+    day: "numeric",
+    year: "numeric",
+  });
+
+  amountEl.innerText = (type === "Income" ? "+" : "-") + "$" + amount;
+  amountEl.classList.add(type === "Income" ? "income" : "expense");
+
+  deleteEl.innerText = "x";
+  deleteEl.addEventListener("click", deleteTransaction);
+
+  detailsEl.appendChild(nameEl);
+  detailsEl.appendChild(dateEl);
+  itemEl.appendChild(iconEl);
+  itemEl.appendChild(detailsEl);
+  itemEl.appendChild(amountEl);
+  itemEl.appendChild(deleteEl);
+
+  transaction_list.prepend(itemEl);
+}
+
+function deleteTransaction(event) {
+  const btn = event.currentTarget;
+  const itemEl = btn.closest(".transaction-item");
+
+  const index = Array.from(transaction_list.children).indexOf(itemEl);
+  all_transaction.splice(index, 1);
+  updateBalance();
+
+  itemEl.remove();
+}
+
+function updateBalance() {
+  let income = 0;
+  let expense = 0;
+  let balance = 0;
+
+  all_transaction.forEach((transaction) => {
+    if (transaction.type === "Income") {
+      income += parseFloat(transaction.amount);
+      balance += parseFloat(transaction.amount);
+    } else {
+      expense += parseFloat(transaction.amount);
+      balance -= parseFloat(transaction.amount);
+    }
+  });
+
+  total_balance.innerText = "$" + balance;
+  total_income.innerText = "$" + income;
+  total_expense.innerText = "$" + expense;
+}
+
+transaction_form.addEventListener("submit", function (event) {
+  event.preventDefault();
+
+  const type = event.target.type.value;
+  const amount = event.target.amount.value;
+  const date = event.target.date.value;
+  const category = event.target.category.value;
+
+  updateList(type, amount, date, category);
+  all_transaction.unshift({ type, amount, date, category });
+  updateBalance();
+
+  transaction_form.reset();
+});
diff --git a/prep/dom-tutorial/style.css b/prep/dom-tutorial/style.css
new file mode 100644
index 000000000..41300f3b3
--- /dev/null
+++ b/prep/dom-tutorial/style.css
@@ -0,0 +1,561 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  background-color: #040404;
+  color: #ffffff;
+  min-height: 100vh;
+  padding: 24px;
+}
+
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  display: grid;
+  grid-template-columns: 400px 1fr;
+  gap: 24px;
+  height: calc(100vh - 48px - 120px);
+}
+
+.sidebar {
+  background-color: #141414;
+  border-radius: 12px;
+  padding: 24px;
+  display: flex;
+  flex-direction: column;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 32px;
+}
+
+.logo {
+  width: 32px;
+  height: 32px;
+  background-color: #f5f5dc;
+  border-radius: 6px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 16px;
+  color: #333;
+  border-radius: 9999px;
+  overflow: hidden;
+}
+
+.logo img {
+  width: 100%;
+  border-radius: 9999px;
+  overflow: hidden;
+}
+
+.title {
+  font-size: 20px;
+  font-weight: 600;
+  color: #ffffff;
+  text-transform: uppercase;
+}
+
+.title span {
+  font-weight: bold;
+}
+
+.balance-summary {
+  margin-bottom: 32px;
+}
+
+.balance-summary h3 {
+  font-size: 16px;
+  font-weight: 500;
+  color: #cccccc;
+  margin-bottom: 12px;
+}
+
+.balance-summary .label {
+  font-size: 14px;
+  color: #999999;
+  margin-bottom: 4px;
+}
+
+.total-balance {
+  font-size: 32px;
+  font-weight: 700;
+  color: #ffffff;
+  margin-bottom: 24px;
+}
+
+.income-expense {
+  display: flex;
+  justify-content: space-between;
+  padding-top: 16px;
+  border-top: 1px solid #404040;
+}
+
+.income-expense div {
+  display: flex;
+  flex-direction: column;
+}
+
+.income-expense .label {
+  font-size: 14px;
+  color: #999999;
+  margin-bottom: 4px;
+}
+
+.income {
+  color: #22c55e;
+  font-size: 18px;
+  font-weight: 600;
+}
+
+.expense {
+  color: #ef4444;
+  font-size: 18px;
+  font-weight: 600;
+}
+
+.add-transaction h3 {
+  font-size: 16px;
+  font-weight: 500;
+  color: #cccccc;
+  margin-bottom: 24px;
+}
+
+.form-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 16px;
+  margin-bottom: 20px;
+}
+
+.form-group {
+  margin-bottom: 20px;
+}
+
+.form-group.full-width {
+  grid-column: 1 / -1;
+}
+
+.form-group label {
+  display: block;
+  font-size: 14px;
+  color: #cccccc;
+  margin-bottom: 8px;
+}
+
+.form-group select,
+.form-group input {
+  width: 100%;
+  padding: 12px 16px;
+  background-color: #1a1a1a;
+  border: 1px solid #404040;
+  border-radius: 8px;
+  color: #ffffff;
+  font-size: 14px;
+}
+
+.form-group select:focus,
+.form-group input:focus {
+  outline: none;
+  border-color: #666666;
+}
+
+.form-group input::placeholder {
+  color: #666666;
+}
+
+.add-btn {
+  width: 100%;
+  padding: 12px;
+  background-color: #404040;
+  border: none;
+  border-radius: 8px;
+  color: #ffffff;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  margin-top: 8px;
+  grid-column: span 2;
+}
+
+.add-btn:hover {
+  background-color: #505050;
+}
+
+.main-content {
+  background-color: #141414;
+  border-radius: 12px;
+  padding: 24px;
+  overflow-y: auto;
+}
+
+.main-content h2 {
+  font-size: 20px;
+  font-weight: 600;
+  color: #ffffff;
+  margin-bottom: 24px;
+}
+
+.transaction-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.transaction-item {
+  display: flex;
+  align-items: center;
+  padding: 16px;
+  background-color: #1a1a1a;
+  border-radius: 8px;
+  border: 1px solid #333333;
+  transition: all 0.3s ease;
+  cursor: pointer;
+}
+
+.transaction-item:hover {
+  background-color: #141414;
+  border-color: #404040;
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+}
+
+.transaction-icon {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 16px;
+  font-size: 16px;
+  font-weight: bold;
+}
+
+.transaction-icon.income {
+  background-color: #22c55e;
+  color: #ffffff;
+}
+
+.transaction-icon.expense {
+  background-color: #ef4444;
+  color: #ffffff;
+}
+
+.transaction-details {
+  flex: 1;
+}
+
+.transaction-name {
+  font-size: 16px;
+  font-weight: 500;
+  color: #ffffff;
+  margin-bottom: 4px;
+}
+
+.transaction-date {
+  font-size: 14px;
+  color: #999999;
+}
+
+.transaction-amount {
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.transaction-amount.income {
+  color: #22c55e;
+}
+
+.transaction-amount.expense {
+  color: #ef4444;
+}
+
+@media (max-width: 768px) {
+  body {
+    padding: 16px;
+    min-height: 100vh;
+    display: block;
+  }
+
+  .container {
+    grid-template-columns: 1fr;
+    gap: 16px;
+    height: auto;
+    display: grid;
+  }
+
+  .form-grid {
+    grid-template-columns: 1fr;
+    gap: 0;
+  }
+
+  .sidebar {
+    padding: 20px;
+    overflow-y: auto;
+    flex-shrink: 0;
+    height: 100%;
+    margin-bottom: 20px;
+  }
+
+  .main-content {
+    padding: 20px;
+    max-height: none;
+    overflow-y: visible;
+    flex-shrink: 0;
+  }
+
+  .total-balance {
+    font-size: 28px;
+    margin-bottom: 20px;
+  }
+
+  .income-expense {
+    flex-direction: column;
+    gap: 12px;
+    padding-top: 12px;
+  }
+
+  .transaction-item {
+    padding: 12px;
+  }
+
+  .transaction-icon {
+    width: 36px;
+    height: 36px;
+    margin-right: 12px;
+    font-size: 14px;
+  }
+
+  .transaction-name {
+    font-size: 15px;
+  }
+
+  .transaction-amount {
+    font-size: 15px;
+  }
+}
+
+/* Footer Styles */
+.footer {
+  max-width: 1200px;
+  margin: 24px auto 0;
+  background-color: #141414;
+  border-radius: 12px;
+  padding: 24px;
+}
+
+.footer-content {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 16px;
+}
+
+.footer-left {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.footer-logo {
+  width: 40px;
+  height: 40px;
+}
+
+.footer-text {
+  font-size: 14px;
+  color: #999999;
+  margin: 0;
+}
+
+.social-icons {
+  display: flex;
+  gap: 16px;
+}
+
+.social-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  background-color: #404040;
+  border-radius: 50%;
+  color: #cccccc;
+  text-decoration: none;
+  transition: all 0.3s ease;
+}
+
+.social-icon:hover {
+  background-color: #555555;
+  color: #ffffff;
+  transform: translateY(-2px);
+}
+
+.social-icon svg {
+  transition: transform 0.3s ease;
+}
+
+.social-icon:hover svg {
+  transform: scale(1.1);
+}
+
+/* Responsive footer */
+@media (max-width: 768px) {
+  .footer {
+    margin: 0 auto;
+    margin-top: 24px;
+    padding: 16px 20px;
+    border-radius: 8px;
+  }
+
+  .footer-content {
+    flex-direction: column;
+    text-align: center;
+    gap: 12px;
+  }
+
+  .footer-left {
+    justify-content: center;
+    gap: 6px;
+  }
+
+  .footer-text {
+    font-size: 12px;
+  }
+
+  .footer-logo {
+    width: 40px;
+    height: 40px;
+  }
+
+  .social-icons {
+    gap: 16px;
+    justify-content: center;
+  }
+
+  .social-icon {
+    width: 40px;
+    height: 40px;
+  }
+}
+
+/* Additional mobile improvements */
+@media (max-width: 480px) {
+  body {
+    padding: 12px;
+    min-height: 100vh;
+  }
+
+  .container {
+    gap: 12px;
+    height: auto;
+  }
+
+  .sidebar,
+  .main-content {
+    padding: 16px;
+    border-radius: 8px;
+  }
+
+  .sidebar {
+    overflow-y: visible;
+  }
+
+  .main-content {
+    overflow-y: visible;
+  }
+
+  .header {
+    margin-bottom: 20px;
+  }
+
+  .title {
+    font-size: 18px;
+    text-transform: uppercase;
+  }
+
+  .total-balance {
+    font-size: 24px;
+  }
+
+  .form-group {
+    margin-bottom: 16px;
+  }
+
+  .form-group select,
+  .form-group input {
+    padding: 10px 12px;
+    font-size: 16px;
+  }
+
+  .add-btn {
+    padding: 14px;
+    font-size: 16px;
+  }
+
+  .footer {
+    padding: 12px 16px;
+    margin-top: 20px;
+    position: absolute;
+    bottom: 0;
+  }
+
+  .footer-left {
+    gap: 4px;
+  }
+
+  .footer-text {
+    font-size: 11px;
+  }
+
+  .footer-logo {
+    width: 40px;
+    height: 40px;
+  }
+
+  .social-icon {
+    width: 40px;
+    height: 40px;
+  }
+}
+
+/* Hide scrollbars by default */
+::-webkit-scrollbar {
+  width: 6px;
+  background: transparent;
+}
+
+.transaction-delete {
+  aspect-ratio: 1/1;
+  padding: 10px;
+  outline: none;
+  border: none;
+  background-color: transparent;
+  width: 40px;
+  height: 40px;
+  border-radius: 9999px;
+  font-size: 18px;
+  color: white;
+  margin-left: 20px;
+  cursor: pointer;
+  transition: all 0.3s ease-in-out;
+}
+
+.transaction-delete:hover {
+  background: orangered;
+  transform: scale(1.1);
+  box-shadow: 0px 0px 13px 1px #ff450054;
+}
+
+.transaction-delete:active {
+  transform: scale(0.95);
+}
diff --git a/prep/doubleNnumber.test.js b/prep/doubleNnumber.test.js
new file mode 100644
index 000000000..0a2907123
--- /dev/null
+++ b/prep/doubleNnumber.test.js
@@ -0,0 +1,16 @@
+const doubleAllNumbers = require("./doubleNumber.js");
+
+test("doubles [10, 20, 30] to [20, 40, 60]", () => {
+  const input = [10, 20, 30];
+  const result = doubleAllNumbers(input);
+  const expected = [20, 40, 60];
+
+  expect(result).toEqual(expected);
+});
+
+test("works with negative numbers", () => {
+  const input = [-5, -10, 15]; // ← This is ONLY for the test
+  const result = doubleAllNumbers(input);
+  const expected = [-10, -20, 30];
+  expect(result).toEqual(expected);
+});
diff --git a/prep/doubleNumber.js b/prep/doubleNumber.js
new file mode 100644
index 000000000..2ab928597
--- /dev/null
+++ b/prep/doubleNumber.js
@@ -0,0 +1,24 @@
+// Can you fix this code?
+// function doubleAllNumbers(numbers) {
+//   let doubledNumbers= []
+
+//   for (let n of numbers) {
+//     doubledNumbers.push(n * 2);
+//   }
+
+//   return doubledNumbers;
+// }
+
+// const myNums = [10, 20, 30];
+// console.log(doubleAllNumbers(myNums));
+
+// make it better code
+
+function doubleAllNumbers(numbers) {
+  let doubledNumbers = [];
+  for (let n of numbers) {
+    doubledNumbers.push(n * 2);
+  }
+  return doubledNumbers;
+}
+module.exports = doubleAllNumbers;
diff --git a/prep/lesson-plan/100.js b/prep/lesson-plan/100.js
new file mode 100644
index 000000000..d7f33fea2
--- /dev/null
+++ b/prep/lesson-plan/100.js
@@ -0,0 +1,28 @@
+// Predict and explain...
+// What will be logged by this code?
+// Check your prediction and explanation by running the code.
+
+const person1 = {
+  name: "Abdi",
+  location: "London",
+  id_number: 17,
+};
+
+const person2 = {
+  name: "Shadi",
+  job: "Software Engineer",
+  location: "London",
+  id_number: 28,
+};
+
+const person3 = person2;
+
+person3.location = "Manchester";
+
+console.log(person1.name);
+console.log(person2["name"]);
+console.log(person1.id_number > person2["id_number"]);
+console.log(person1.job);
+console.log(person1.location === person2.location);
+console.log(person1.location === person3.location);
+console.log(person2.location === person3.location);
diff --git a/prep/lesson-plan/200.js b/prep/lesson-plan/200.js
new file mode 100644
index 000000000..2822c3304
--- /dev/null
+++ b/prep/lesson-plan/200.js
@@ -0,0 +1,15 @@
+// Predict and explain...
+// What will happen when this program is run?
+// Check your prediction and explanation by running the program.
+// Fix anything that needs fixing.
+
+const person = {
+    "name": "Jemima",
+    "location": "Glasgow",
+    "id_number" : 9,
+};
+
+console.assert(person.name === "Jemima");
+console.assert(person.location === "Glasgow");
+console.assert(person.id_number === 9);
+console.log(person.id_number);
\ No newline at end of file
diff --git a/prep/lesson-plan/300.js b/prep/lesson-plan/300.js
new file mode 100644
index 000000000..b35a1badf
--- /dev/null
+++ b/prep/lesson-plan/300.js
@@ -0,0 +1,25 @@
+function checkLivesNearCYF(person) {
+  const cyfLocations = [
+    "Birmingham",
+    "Cape Town",
+    "Glasgow",
+    "London",
+    "Manchester",
+  ];
+  return cyfLocations.includes(person.city); // Changed from .location to .city
+}
+
+const mo = {
+  name: "Mo",
+  city: "Glasgow", // Uses city
+  focus: "React",
+};
+
+const sayed = {
+  name: "Sayed",
+  city: "Edinburgh", // Uses city
+  focus: "SQL",
+};
+
+console.assert(checkLivesNearCYF(mo)); // true - Glasgow is in CYF locations
+console.assert(!checkLivesNearCYF(sayed)); // true - Edinburgh is NOT in CYF locations
diff --git a/prep/lesson-plan/400.js b/prep/lesson-plan/400.js
new file mode 100644
index 000000000..e41ed322e
--- /dev/null
+++ b/prep/lesson-plan/400.js
@@ -0,0 +1,47 @@
+// Predict and explain...
+// What will happen when this program is run?
+// Check your prediction and explanation by running the program.
+// Fix anything that needs fixing.
+
+function printSaladRecipe(forPerson) {
+  const saladRecipe = {
+    name: "salad",
+    ingredients: ["lettuce", "corn", "carrots", "cucumber"],
+    rating_out_of_10: 8,
+    steps: [
+      "Shred the lettuce",
+      "Cut the carrots into small pieces",
+      "Slice the cucumber",
+      "Mix all the vegetables together in a bowl",
+    ],
+  };
+
+  if (forPerson.eatsMeat) {
+    saladRecipe.ingredients.push("chicken"); // FIXED: .push works only with arrays; not with objects. 
+                                                // therefore we added it to ingredients array.
+    saladRecipe.steps.push("Mix in the chicken"); // this one is good because it is added to array already.
+  }
+
+  console.log(`For ${forPerson.name} to make ${saladRecipe.name}:`);
+  console.log("Get:");
+  for (const ingredient of saladRecipe.ingredients) {
+    console.log(` * ${ingredient}`);
+  }
+  for (const step of saladRecipe.steps) {
+    console.log(step);
+  }
+}
+
+const person1 = {
+  name: "Ola",
+  eatsMeat: true,
+};
+
+const person2 = {
+  name: "Steve",
+  eatsMeat: false,
+};
+
+printSaladRecipe(person1);
+console.log("");
+printSaladRecipe(person2);
diff --git a/prep/lesson-plan/500.js b/prep/lesson-plan/500.js
new file mode 100644
index 000000000..870891d51
--- /dev/null
+++ b/prep/lesson-plan/500.js
@@ -0,0 +1,36 @@
+// Fill in the code below so that the tests pass.
+
+const people = [];
+
+people.push({
+  name: "Saqib",
+  favourite_food: "salad",
+});
+
+people.push({
+  name: "Shadi",
+  favourite_food: "mango",
+});
+
+people.push({
+  name: "Navid",
+  favourite_food: "macarons",
+});
+
+const favouriteFoods = [];
+
+//
+//option one 
+for (const person of people) {
+  favouriteFoods.push(person.favourite_food);
+}
+// Option 2: for loop with index
+// for (let i = 0; i < people.length; i++) {
+//     favouriteFoods.push(people[i].favourite_food);
+// TODO: Fill the array favouriteFoods with the favourite foods of each person.
+// You must not type the strings (i.e. your solution should not involve you typing the word "salad").
+
+console.assert(favouriteFoods.length === 3);
+console.assert(favouriteFoods.includes("salad"));
+console.assert(favouriteFoods.includes("mango"));
+console.assert(favouriteFoods.includes("macarons"));
diff --git a/prep/lesson-plan/600.js b/prep/lesson-plan/600.js
new file mode 100644
index 000000000..cfb1f109f
--- /dev/null
+++ b/prep/lesson-plan/600.js
@@ -0,0 +1,16 @@
+// Predict and explain...
+// What will happen when this program is run?
+// Check your prediction and explanation by running the program.
+// Fix anything that needs fixing.
+
+const person = {
+  name: "Manu",
+  favourite_ice_cream: "vanilla",
+  favourite_topping: "marshmallows",
+};
+
+function assertFieldEquals(object, field, targetValue) {
+    console.assert(object[field] === targetValue);
+}
+
+assertFieldEquals(person, "favourite_ice_cream", "vanilla");
diff --git a/prep/mean.js b/prep/mean.js
new file mode 100644
index 000000000..8a3c20906
--- /dev/null
+++ b/prep/mean.js
@@ -0,0 +1,30 @@
+// function calculateMean(list) {
+//   let total = 0;
+//   for (const item of list) {
+//     total += item;
+//   }
+// }
+// calculateMean([10, 20, 30, 40, 50])
+// DEbugger shift ctrl P
+//debug: toggle auto attach
+//only auto attach when the inspect flag is given
+// node --inspect file.js
+// This function calculates the average of numbers in an array
+function calculateMean(list) {
+    // If the list is empty, return 0---- that is another test level
+    if (list.length === 0) {
+        return 0;
+    }
+    
+    // Add up all the numbers
+    let total = 0;
+    for (const item of list) {
+        total += item;
+    }
+    
+    // Divide by how many numbers there are
+    return total / list.length;
+}
+
+// This makes the function available to other files
+module.exports = calculateMean;
\ No newline at end of file
diff --git a/prep/mean.test.js b/prep/mean.test.js
new file mode 100644
index 000000000..8e9e35e01
--- /dev/null
+++ b/prep/mean.test.js
@@ -0,0 +1,17 @@
+const calculateMean = require("./mean.js");
+
+test("calculates the mean of a list of numbers", () => {
+  const list = [3, 50, 7];
+  const currentOutput = calculateMean(list);
+  const targetOutput = 20;
+
+  expect(currentOutput).toEqual(targetOutput); // 20 is (3 + 50 + 7) / 3
+});
+
+test("calculates the mean of a list of numbers", () => {
+  const list = [0];
+  const currentOutput = calculateMean(list);
+  const targetOutput = 0;
+
+  expect(currentOutput).toEqual(targetOutput); 0
+});
diff --git a/prep/median.js b/prep/median.js
new file mode 100644
index 000000000..10fceee97
--- /dev/null
+++ b/prep/median.js
@@ -0,0 +1,7 @@
+function calculateMedian(list) {
+  const middleIndex = Math.floor(list.length / 2);
+  const median = list.splice(middleIndex, 1)[0];
+
+  return median;
+}
+module.exports = calculateMedian
\ No newline at end of file
diff --git a/prep/median.test.js b/prep/median.test.js
new file mode 100644
index 000000000..3e9127ba4
--- /dev/null
+++ b/prep/median.test.js
@@ -0,0 +1,7 @@
+test("calculates the median of a list of odd length", () => {
+  const list = [10, 20, 30, 50, 60];
+  const currentOutput = calculateMedian(list);
+  const targetOutput = 30;
+  expect(currentOutput).toEqual(targetOutput);
+});
+const calculateMedian = require("./median.js");
diff --git a/prep/names-icecream.js b/prep/names-icecream.js
new file mode 100644
index 000000000..8e05689bc
--- /dev/null
+++ b/prep/names-icecream.js
@@ -0,0 +1,69 @@
+// function whichIceCreamsCanIEat(iceCreams) {
+//   return iceCreams
+//     .filter(
+//       (iceCream) =>
+//         iceCream.lactoseFree === true && iceCream.gramsOfSugarPerScoop < 10
+//     )
+//     .map((iceCream) => iceCream.flavour);
+// }
+
+//OR
+function whichIceCreamsCanIEat(iceCreams) {
+  const edibleFlavours = [];
+
+  for (let i = 0; i < iceCreams.length; i++) {
+    if (
+      iceCreams[i].lactoseFree === true &&
+      iceCreams[i].gramsOfSugarPerScoop < 10
+    ) {
+      edibleFlavours.push(iceCreams[i].flavour);
+    }
+  }
+
+  return edibleFlavours;
+}
+test("given one edible ice cream, returns its flavour", () => {
+  const input = [
+    { flavour: "Coconut", lactoseFree: true, gramsOfSugarPerScoop: 8 },
+  ];
+
+  const currentOutput = whichIceCreamsCanIEat(input);
+  const targetOutput = ["Coconut"];
+
+  expect(currentOutput).toEqual(targetOutput);
+});
+
+const iceCream1 = {
+  flavour: "Vanilla",
+  lactoseFree: false,
+  gramsOfSugarPerScoop: 12,
+};
+
+const iceCream2 = {
+  flavour: "Mango Sorbet",
+  lactoseFree: true,
+  gramsOfSugarPerScoop: 10,
+};
+
+const iceCream3 = {
+  flavour: "Coconut",
+  lactoseFree: true,
+  gramsOfSugarPerScoop: 8,
+};
+
+const iceCream4 = {
+  flavour: "Strawberry",
+  lactoseFree: false,
+  gramsOfSugarPerScoop: 8,
+};
+
+const iceCream5 = {
+  flavour: "Lemon Sorbet",
+  lactoseFree: true,
+  gramsOfSugarPerScoop: 7,
+};
+
+const allIceCreams = [iceCream1, iceCream2, iceCream3, iceCream4, iceCream5];
+
+const iceCreamsICanEat = whichIceCreamsCanIEat(allIceCreams);
+console.log(iceCreamsICanEat); // what should this output?
\ No newline at end of file
diff --git a/prep/parse-query-string.js b/prep/parse-query-string.js
new file mode 100644
index 000000000..178cdba98
--- /dev/null
+++ b/prep/parse-query-string.js
@@ -0,0 +1,61 @@
+//function parseQueryString(queryString) {
+  ///We first need to separate out the "fruit=banana" string so we can access "fruit" and "banana" separately.
+  //  We can do this by splitting up the string by the = character.
+  // We can split the string into an array consisting of ['fruit', 'banana'].
+  // Then we can grab the array's contents and assign the elements meaningful names:
+//   const queryParams = {};
+
+//   const keyValuePair = queryString.split("=");
+//   const key = keyValuePair[0];
+//   const value = keyValuePair[1]; // value will hold 'banana'
+
+  ///const [key, value] = queryString.split("="); // key will hold 'fruit', value will hold 'banana'
+
+
+
+//   queryParams[key] = value; // Fixed: use bracket notation to use the variable as key
+//   return queryParams;
+// }
+
+
+// // in case of multible pairs we are missing one step  - breaking up the string of multiple key-value pairs
+// //  into an array where each element is a single key-value pair. If we do this, 
+// // then we can iterate over the array, and do what we already know how to do on each key-value pair.
+// function parseQueryString(queryString) {
+//   // assume queryString has a value of "sort=lowest&colour=yellow"
+//   const queryParams = {};
+//   const keyValuePairs = queryString.split("&"); // keyValuePairs will point to ["sort=lowest", "colour=yellow"]
+
+//   for (const pair of keyValuePairs) {
+//     const [key, value] = pair.split("=");
+//     queryParams[key] = value;
+//   }
+
+//   return queryParams;
+// }
+// module.exports = parseQueryString;
+
+//Now that we’ve worked out how to solve this problem in the case of multiple query parameters, 
+// let’s integrate that solution into our previous implementation, to make sure it works for all cases.
+
+//We can keep our if (queryString.length === 0) 
+// { check from before. We still need it because split on an empty string still returns an empty string. 
+// If we don’t have this special case, we’ll try to parse the empty string, probably incorrectly.
+
+//We don’t need to do anything special for the one-value case,
+//  as an array containing one element gets iterated the same as an array of multiple elements:
+function parseQueryString(queryString) {
+  const queryParams = {};
+  if (queryString.length === 0) {
+    return queryParams;
+  }
+  const keyValuePairs = queryString.split("&");
+
+  for (const pair of keyValuePairs) {
+    const [key, value] = pair.split("=");
+    queryParams[key] = value;
+  }
+
+  return queryParams;
+}
+ module.exports = parseQueryString;
diff --git a/prep/parse-query-string.test.js b/prep/parse-query-string.test.js
new file mode 100644
index 000000000..319158c88
--- /dev/null
+++ b/prep/parse-query-string.test.js
@@ -0,0 +1,20 @@
+test("given a query string with no query parameters, returns an empty object", () => {
+  const input= "";
+  const currentOutput = parseQueryString(input);
+  const targetOutput = {};
+  expect(currentOutput).toEqual(targetOutput);
+});
+const parseQueryString = require("./parse-query-string.js");
+test("given a query string with one pair of query params, returns them in object", () => {
+  const input = "fruit=banana";
+  const currentOutput = parseQueryString(input);
+  const targetOutput = { fruit: "banana" };
+
+  expect(currentOutput).toEqual(targetOutput);
+});
+test("given a query string with multiple key-value pairs, returns them in object", () => {
+  const input = "sort=lowest&colour=yellow";
+  const currentOutput = parseQueryString(input);
+  const targetOutput = { sort: "lowest", colour: "yellow" };
+  expect(currentOutput).toEqual(targetOutput);
+});
\ No newline at end of file
diff --git a/prep/swapFirstAndLast.js b/prep/swapFirstAndLast.js
new file mode 100644
index 000000000..003cc8265
--- /dev/null
+++ b/prep/swapFirstAndLast.js
@@ -0,0 +1,19 @@
+// Write a function which takes an array as a parameter
+//   and swaps the first element with the last element
+
+// function swapFirstAndLast(arr) {}
+
+// const myArray = [5, 2, 3, 4, 1];
+// swapFirstAndLast(myArray);
+// console.log(myArray); 
+// what output should we expect?
+// Write a function which takes an array as a parameter
+//   and swaps the first element with the last element
+
+function swapFirstAndLast(arr) {
+  let temp = arr[0];
+  arr[0] = arr[arr.length - 1];
+  arr[arr.length - 1] = temp;
+}
+
+module.exports = swapFirstAndLast;
\ No newline at end of file
diff --git a/prep/swapFirstAndLast.test.js b/prep/swapFirstAndLast.test.js
new file mode 100644
index 000000000..7d9f9c6a1
--- /dev/null
+++ b/prep/swapFirstAndLast.test.js
@@ -0,0 +1,7 @@
+const swapFirstAndLast = require("./swapFirstAndLast.js");
+
+test("swaps first and last elements of [5, 2, 3, 4, 1]", () => {
+  const myArray = [5, 2, 3, 4, 1];
+  swapFirstAndLast(myArray);
+  expect(myArray).toEqual([1, 2, 3, 4, 5]);
+});
