From 808cd40e0a68bb4b797d50c21ee7ec811a69ceec Mon Sep 17 00:00:00 2001
From: 3bdullah-saleh <abdullahedu0@gmail.com>
Date: Sat, 28 Jun 2025 09:56:32 +0100
Subject: [PATCH 01/14] Declare array variables.

---
 prep/array.js | 9 +++++++++
 1 file changed, 9 insertions(+)
 create mode 100644 prep/array.js

diff --git a/prep/array.js b/prep/array.js
new file mode 100644
index 000000000..e146af6f0
--- /dev/null
+++ b/prep/array.js
@@ -0,0 +1,9 @@
+// declaring array literal as follows
+
+const items = [4.6, 5.9, 6.99];
+
+// In JavaScript, we can use square bracket notation to access specific elements in the array using an index.
+
+items[0]; // evaluates to 4.6
+items[1]; // evaluates to 5.9
+items[2]; // evaluates to 6.99
\ No newline at end of file

From a77628dd80429de522256c47669e9bbdc2e454c5 Mon Sep 17 00:00:00 2001
From: 3bdullah-saleh <abdullahedu0@gmail.com>
Date: Sat, 28 Jun 2025 10:00:13 +0100
Subject: [PATCH 02/14] Iteration throw a function

---
 prep/iteration.js | 14 ++++++++++++++
 1 file changed, 14 insertions(+)
 create mode 100644 prep/iteration.js

diff --git a/prep/iteration.js b/prep/iteration.js
new file mode 100644
index 000000000..1fd0c2122
--- /dev/null
+++ b/prep/iteration.js
@@ -0,0 +1,14 @@
+// In programming, the process of repeating something is called iteration.
+// In programming, we can iterate by using a loop🧶
+// 🧶 loop: A loop is a sequence of instructions that is continually repeated until some condition is reached.
+// In particular, we can use a for...of statement to sum the elements of the array.
+
+function calculateMean(list) {
+  let total = 0;
+
+  for (const item of list) {
+    total += item;
+  }
+  
+}
+calculateMean([10, 20, 30, 40, 50]);
\ No newline at end of file

From 365a03694568ac59658f15ae47f92351f06b0232 Mon Sep 17 00:00:00 2001
From: 3bdullah-saleh <abdullahedu0@gmail.com>
Date: Sat, 28 Jun 2025 10:02:07 +0100
Subject: [PATCH 03/14] Create a function for finding the mean and add some
 tests.

---
 prep/mean.js      |  8 ++++++++
 prep/mean.test.js | 15 +++++++++++++++
 2 files changed, 23 insertions(+)
 create mode 100644 prep/mean.js
 create mode 100644 prep/mean.test.js

diff --git a/prep/mean.js b/prep/mean.js
new file mode 100644
index 000000000..dde1fdcb2
--- /dev/null
+++ b/prep/mean.js
@@ -0,0 +1,8 @@
+function calculateMean(list) {
+    let total = 0;
+    for (const item of list) {
+        return total += item;
+    }
+}
+
+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..75ea790ab
--- /dev/null
+++ b/prep/mean.test.js
@@ -0,0 +1,15 @@
+// Let’s consider a problem where we calculate the mean of a list of numbers.
+
+// Given an array of numbers
+// When we call calculateMean with the array of numbers
+// Then we get the mean.
+
+const calculateMean = require('./median');
+
+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
+});

From 954a7d264a90a50de7055b0ffdd64f4ac6499f6b Mon Sep 17 00:00:00 2001
From: 3bdullah-saleh <abdullahedu0@gmail.com>
Date: Sat, 28 Jun 2025 10:06:02 +0100
Subject: [PATCH 04/14] Create a function to sum the values but it is a flawed
 approach.

---
 prep/summation.js | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)
 create mode 100644 prep/summation.js

diff --git a/prep/summation.js b/prep/summation.js
new file mode 100644
index 000000000..5d75951f3
--- /dev/null
+++ b/prep/summation.js
@@ -0,0 +1,16 @@
+// To sum a list we can start by creating a variable total with an initial value of 0.
+// We then need to repeatedly add each value in the list to our total.
+
+function sumValues(list) {
+    let total = 0;
+    total += list[0]; // access a list element and add to total
+    total += list[1];
+    total += list[2];
+    total += list[3];
+    total += list[4];
+    return total;
+}
+
+console.log(sumValues([1, 2, 3, 4, 5]));
+// However, this approach is flawed.
+

From 11dc49b411a654f531cecf7d5f07245e7aa4c965 Mon Sep 17 00:00:00 2001
From: 3bdullah-saleh <abdullahedu0@gmail.com>
Date: Sat, 28 Jun 2025 10:09:19 +0100
Subject: [PATCH 05/14] Create a function to find Median of the list

---
 prep/median.js      | 9 +++++++++
 prep/median.test.js | 9 +++++++++
 2 files changed, 18 insertions(+)
 create mode 100644 prep/median.js
 create mode 100644 prep/median.test.js

diff --git a/prep/median.js b/prep/median.js
new file mode 100644
index 000000000..b2cab619f
--- /dev/null
+++ b/prep/median.js
@@ -0,0 +1,9 @@
+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..f2ac18bbf
--- /dev/null
+++ b/prep/median.test.js
@@ -0,0 +1,9 @@
+const calculateMedian = require('./median');
+
+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);
+});
\ No newline at end of file

From 985755c1481ced35a93f2f7bbff4a58a98037860 Mon Sep 17 00:00:00 2001
From: 3bdullah-saleh <abdullahedu0@gmail.com>
Date: Sat, 28 Jun 2025 10:10:35 +0100
Subject: [PATCH 06/14] Assembling the Median and Mean function.

---
 prep/assembling.the.parts.js | 11 +++++++++++
 1 file changed, 11 insertions(+)
 create mode 100644 prep/assembling.the.parts.js

diff --git a/prep/assembling.the.parts.js b/prep/assembling.the.parts.js
new file mode 100644
index 000000000..3feb6b233
--- /dev/null
+++ b/prep/assembling.the.parts.js
@@ -0,0 +1,11 @@
+const calculateMedian = require('./median');
+const calculateMean = require('./mean');
+
+const salaries = [10, 20, 30, 40, 60, 80, 80];
+const median = calculateMedian(salaries);
+
+console.log(salaries, "<--- salaries input before we call calculateMean");
+const mean = calculateMean(salaries);
+
+console.log(`The median salary is ${median}`);
+console.log(`The mean salary is ${mean}`);
\ No newline at end of file

From 5505319ebbfd356e693ba6373a09c6c5d1c80160 Mon Sep 17 00:00:00 2001
From: 3bdullah-saleh <abdullahedu0@gmail.com>
Date: Wed, 23 Jul 2025 12:02:12 +0100
Subject: [PATCH 07/14] Update title element

---
 Sprint-3/quote-generator/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html
index 30b434bcf..5f6a720f1 100644
--- a/Sprint-3/quote-generator/index.html
+++ b/Sprint-3/quote-generator/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>Quote generator app</title>
     <script defer src="quotes.js"></script>
   </head>
   <body>

From 143bf6368c19ad5df89666b9c531ad77cc7bac90 Mon Sep 17 00:00:00 2001
From: 3bdullah-saleh <abdullahedu0@gmail.com>
Date: Wed, 23 Jul 2025 13:08:05 +0100
Subject: [PATCH 08/14] Add generateQuote function to display random quote and
 author on button click

---
 Sprint-3/quote-generator/quotes.js | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js
index 4a4d04b72..c74d3fc01 100644
--- a/Sprint-3/quote-generator/quotes.js
+++ b/Sprint-3/quote-generator/quotes.js
@@ -490,4 +490,21 @@ const quotes = [
   },
 ];
 
-// call pickFromArray with the quotes array to check you get a random quote
+//  Get the quote and author elements from the DOM
+const quote = document.querySelector("#quote");
+const author = document.querySelector("#author");
+
+// Attach a click event listener to the "New Quote" button
+const newClick = document.getElementById("new-quote").addEventListener("click", () => {
+  generateQuote();
+});
+
+/**
+ * Generates a new quote by selecting a random item from the quotes array.
+ * and updates the DOM with the new quote and author.
+ */
+function generateQuote() {
+  const randomQuote = pickFromArray(quotes)
+  quote.textContent = `${randomQuote.quote}`
+  author.textContent = `${randomQuote.author}`
+};

From 0b8f068f18f325c6cfa4a56de338a6ee981be66f Mon Sep 17 00:00:00 2001
From: 3bdullah-saleh <abdullahedu0@gmail.com>
Date: Wed, 23 Jul 2025 13:16:56 +0100
Subject: [PATCH 09/14] Update the header part

---
 Sprint-3/quote-generator/index.html | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html
index 5f6a720f1..1367931d7 100644
--- a/Sprint-3/quote-generator/index.html
+++ b/Sprint-3/quote-generator/index.html
@@ -7,7 +7,10 @@
     <script defer src="quotes.js"></script>
   </head>
   <body>
-    <h1>hello there</h1>
+    <header>
+      <h1>Random Quote Generator</h1>
+      <p>Click the button to get inspired with a random quote!</p>
+    </header>
     <p id="quote"></p>
     <p id="author"></p>
     <button type="button" id="new-quote">New quote</button>

From c4e1a298cddd9f4db8ef4526af20046927542eb6 Mon Sep 17 00:00:00 2001
From: 3bdullah-saleh <abdullahedu0@gmail.com>
Date: Wed, 23 Jul 2025 15:28:41 +0100
Subject: [PATCH 10/14] Update event listener selector to use .btn class
 instead of #new-quote ID

---
 Sprint-3/quote-generator/quotes.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js
index c74d3fc01..18bff2279 100644
--- a/Sprint-3/quote-generator/quotes.js
+++ b/Sprint-3/quote-generator/quotes.js
@@ -495,7 +495,7 @@ const quote = document.querySelector("#quote");
 const author = document.querySelector("#author");
 
 // Attach a click event listener to the "New Quote" button
-const newClick = document.getElementById("new-quote").addEventListener("click", () => {
+const newClick = document.querySelector(".btn").addEventListener("click", () => {
   generateQuote();
 });
 

From 2726d1c7ab91682efff39a4f30bd48ef6417bd85 Mon Sep 17 00:00:00 2001
From: 3bdullah-saleh <abdullahedu0@gmail.com>
Date: Wed, 23 Jul 2025 15:29:09 +0100
Subject: [PATCH 11/14] Update the button

---
 Sprint-3/quote-generator/index.html | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html
index 1367931d7..326f2282a 100644
--- a/Sprint-3/quote-generator/index.html
+++ b/Sprint-3/quote-generator/index.html
@@ -4,15 +4,18 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Quote generator app</title>
+    <link rel="stylesheet" href="style.css" />
     <script defer src="quotes.js"></script>
   </head>
   <body>
-    <header>
-      <h1>Random Quote Generator</h1>
-      <p>Click the button to get inspired with a random quote!</p>
-    </header>
-    <p id="quote"></p>
-    <p id="author"></p>
-    <button type="button" id="new-quote">New quote</button>
+    <h1>Random Quote Generator</h1>
+    <div id="quote-box">
+      <p id="quote">Click the button to get inspired with a random quote!</p>
+      <p id="author"></p>
+      <button class="btn">
+        <span class="btn-text-one">Hover me</span>
+        <span class="btn-text-two">New quote</span>
+      </button>
+    </div>
   </body>
 </html>

From bf4e6f9d0cb9e4ca5c7eb45d207202de97f8dc39 Mon Sep 17 00:00:00 2001
From: 3bdullah-saleh <abdullahedu0@gmail.com>
Date: Wed, 23 Jul 2025 15:30:15 +0100
Subject: [PATCH 12/14] Add style to the HTML file

---
 Sprint-3/quote-generator/style.css | 84 +++++++++++++++++++++++++++++-
 1 file changed, 83 insertions(+), 1 deletion(-)

diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css
index 63cedf2d2..9d2df2429 100644
--- a/Sprint-3/quote-generator/style.css
+++ b/Sprint-3/quote-generator/style.css
@@ -1 +1,83 @@
-/** Write your CSS in here **/
+body {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
+  background-color: #e4ac53;
+}
+
+#quote-box {
+  background-color: #ffffff;
+  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
+  width: 600px;
+  border: 15px ;
+  padding: 50px;
+  margin: auto;
+}
+#quote {
+    font-family: "Courier New", "Sans-serif";
+    font-size: 1.5rem;
+    font-style: Italic;
+    color: #333;
+    text-align: center;
+}
+
+#author {
+    font-family: "Sans-serif";
+    font-size: 1rem;
+    color: #777;
+    text-align: right;
+    Margin: 1rem;
+}
+
+.btn {
+  width: 140px;
+  height: 50px;
+  background: linear-gradient(to top, #00154c, #12376e, #23487f);
+  color: #fff;
+  border-radius: 50px;
+  border: none;
+  outline: none;
+  cursor: pointer;
+  position: relative;
+  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5);
+  overflow: hidden;
+}
+
+.btn span {
+  font-size: 12px;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  transition: top 0.5s;
+}
+
+.btn-text-one {
+  position: absolute;
+  width: 100%;
+  top: 50%;
+  left: 0;
+  transform: translateY(-50%);
+}
+
+.btn-text-two {
+  position: absolute;
+  width: 100%;
+  top: 150%;
+  left: 0;
+  transform: translateY(-50%);
+}
+
+.btn:hover .btn-text-one {
+  top: -100%;
+}
+
+.btn:hover .btn-text-two {
+  top: 50%;
+}
+
+h1 {
+  text-align: center;
+}
+
+

From da7a16ca9a9891e87c95b36a48fd2a3c1c444102 Mon Sep 17 00:00:00 2001
From: 3bdullah-saleh <abdullahedu0@gmail.com>
Date: Thu, 31 Jul 2025 18:29:42 +0100
Subject: [PATCH 13/14] rename DOM node variables to follow naming conventions.

---
 Sprint-3/quote-generator/quotes.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js
index 18bff2279..c2ba67e6d 100644
--- a/Sprint-3/quote-generator/quotes.js
+++ b/Sprint-3/quote-generator/quotes.js
@@ -491,8 +491,8 @@ const quotes = [
 ];
 
 //  Get the quote and author elements from the DOM
-const quote = document.querySelector("#quote");
-const author = document.querySelector("#author");
+const quoteElement = document.querySelector("#quote");
+const authorElement = document.querySelector("#author");
 
 // Attach a click event listener to the "New Quote" button
 const newClick = document.querySelector(".btn").addEventListener("click", () => {

From 04f2aa69623f5a7010ed4e2e4eefeaa16d9e2650 Mon Sep 17 00:00:00 2001
From: 3bdullah-saleh <abdullahedu0@gmail.com>
Date: Thu, 31 Jul 2025 18:44:33 +0100
Subject: [PATCH 14/14] replace class selector with ID and remove unnecessary
 'newClick' button

---
 Sprint-3/quote-generator/index.html |  6 +++---
 Sprint-3/quote-generator/quotes.js  | 10 +++++-----
 Sprint-3/quote-generator/style.css  | 12 ++++++------
 3 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html
index 326f2282a..356fd96a1 100644
--- a/Sprint-3/quote-generator/index.html
+++ b/Sprint-3/quote-generator/index.html
@@ -12,9 +12,9 @@ <h1>Random Quote Generator</h1>
     <div id="quote-box">
       <p id="quote">Click the button to get inspired with a random quote!</p>
       <p id="author"></p>
-      <button class="btn">
-        <span class="btn-text-one">Hover me</span>
-        <span class="btn-text-two">New quote</span>
+      <button id="btn">
+        <span id="btn-text-one">Hover me</span>
+        <span id="btn-text-two">New quote</span>
       </button>
     </div>
   </body>
diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js
index c2ba67e6d..22a376cd8 100644
--- a/Sprint-3/quote-generator/quotes.js
+++ b/Sprint-3/quote-generator/quotes.js
@@ -495,7 +495,7 @@ const quoteElement = document.querySelector("#quote");
 const authorElement = document.querySelector("#author");
 
 // Attach a click event listener to the "New Quote" button
-const newClick = document.querySelector(".btn").addEventListener("click", () => {
+document.querySelector("#btn").addEventListener("click", () => {
   generateQuote();
 });
 
@@ -504,7 +504,7 @@ const newClick = document.querySelector(".btn").addEventListener("click", () =>
  * and updates the DOM with the new quote and author.
  */
 function generateQuote() {
-  const randomQuote = pickFromArray(quotes)
-  quote.textContent = `${randomQuote.quote}`
-  author.textContent = `${randomQuote.author}`
-};
+  const randomQuote = pickFromArray(quotes);
+  quoteElement.textContent = `${randomQuote.quote}`;
+  authorElement.textContent = `${randomQuote.author}`;
+}
diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css
index 9d2df2429..6f7c81bc4 100644
--- a/Sprint-3/quote-generator/style.css
+++ b/Sprint-3/quote-generator/style.css
@@ -31,7 +31,7 @@ body {
     Margin: 1rem;
 }
 
-.btn {
+#btn {
   width: 140px;
   height: 50px;
   background: linear-gradient(to top, #00154c, #12376e, #23487f);
@@ -45,14 +45,14 @@ body {
   overflow: hidden;
 }
 
-.btn span {
+#btn span {
   font-size: 12px;
   text-transform: uppercase;
   letter-spacing: 1px;
   transition: top 0.5s;
 }
 
-.btn-text-one {
+#btn-text-one {
   position: absolute;
   width: 100%;
   top: 50%;
@@ -60,7 +60,7 @@ body {
   transform: translateY(-50%);
 }
 
-.btn-text-two {
+#btn-text-two {
   position: absolute;
   width: 100%;
   top: 150%;
@@ -68,11 +68,11 @@ body {
   transform: translateY(-50%);
 }
 
-.btn:hover .btn-text-one {
+#btn:hover #btn-text-one {
   top: -100%;
 }
 
-.btn:hover .btn-text-two {
+#btn:hover #btn-text-two {
   top: 50%;
 }