From 11e30f5fccbd7900ee868dc9fadf058fa334db78 Mon Sep 17 00:00:00 2001 From: Baba05206 Date: Thu, 6 Nov 2025 18:05:48 +0000 Subject: [PATCH 1/7] Add initial implementation of mean calculation and tests --- prep/mean.js | 37 +++++++++++++++++++++++++++++++++++++ prep/mean.test.js | 12 ++++++++++++ prep/package.json | 16 ++++++++++++++++ 3 files changed, 65 insertions(+) create mode 100644 prep/mean.js create mode 100644 prep/mean.test.js create mode 100644 prep/package.json diff --git a/prep/mean.js b/prep/mean.js new file mode 100644 index 000000000..c378b7b73 --- /dev/null +++ b/prep/mean.js @@ -0,0 +1,37 @@ +/* +Let’s consider a list of prices in a bill: +4.6, 5.03, 7.99, 8.01 +instead of writing the like below +const price0 = 4.6; +const price1 = 5.03; +const price2 = 7.99; +const price3 = 8.01; +We can write it as an array literal +const items = [4.6, 5.03, 7.99, 8.01]; + +The Array object, as with arrays in other programming languages, enables storing a collection +of multiple items under a single variable name, and has members for performing common array operations. +Arrays can store items of any type & multiple pieces of information. + +In JavaScript, we can use [] notation to access specific elements in the array using index numbers. +The index numbers start from 0. + + +const items = [4.6, 5.03, 7.99, 8.01]; +console.log(items[0]); // 4.6 +console.log(items[1]); // 5.03 +console.log(items[2]); // 7.99 +console.log(items[3]); // 8.01 +// Accessing elements using index numbers +*/ +const items = [4.6, 5.03, 7.99, 8.01]; +function calculateMean(list) { + // Calculate the sum of all elements in the array + const sum = list.reduce( + (accumulator, currentValue) => accumulator + currentValue, + 0 + ); + // Calculate the mean by dividing the sum by the number of elements + const mean = sum / list.length; + return mean; +} diff --git a/prep/mean.test.js b/prep/mean.test.js new file mode 100644 index 000000000..22b24b55c --- /dev/null +++ b/prep/mean.test.js @@ -0,0 +1,12 @@ +/* +test("does something as described below", () => { + // test implementation goes here +}); +*/ +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 +}); diff --git a/prep/package.json b/prep/package.json new file mode 100644 index 000000000..663b964da --- /dev/null +++ b/prep/package.json @@ -0,0 +1,16 @@ +{ + "name": "prep", + "version": "1.0.0", + "description": "", + "main": "index.js", + "scripts": { + "test": "jest" + }, + "keywords": [], + "author": "", + "license": "ISC", + "type": "commonjs", + "devDependencies": { + "jest": "^30.2.0" + } +} From 3cb29a05ca2867b60c8dd968537c74fe3abee781 Mon Sep 17 00:00:00 2001 From: Baba05206 Date: Fri, 7 Nov 2025 17:03:55 +0000 Subject: [PATCH 2/7] Refactor mean calculation and tests for clarity and functionality --- prep/mean.js | 24 +++++++++++++++++++++++- prep/mean.test.js | 14 ++++++++++++++ 2 files changed, 37 insertions(+), 1 deletion(-) diff --git a/prep/mean.js b/prep/mean.js index c378b7b73..2aec83fb7 100644 --- a/prep/mean.js +++ b/prep/mean.js @@ -23,7 +23,7 @@ console.log(items[1]); // 5.03 console.log(items[2]); // 7.99 console.log(items[3]); // 8.01 // Accessing elements using index numbers -*/ + const items = [4.6, 5.03, 7.99, 8.01]; function calculateMean(list) { // Calculate the sum of all elements in the array @@ -35,3 +35,25 @@ function calculateMean(list) { const mean = sum / list.length; return mean; } + */ +//const list = [4.6, 5.03, 7.99, 8.01]; +function calculateMean(list) { + //1. sum the elements of the array + let sum = 0; + for (let i = 0; i < list.length; i++) { + const arrayInValue = Number(list); + if (typeof list[i] === "number" && !isNaN(list[i])) { + sum += list[i]; + } + } + //2. determine the length of the array + let count = list.length; + //3. divide #1 by #2 + const mean = sum / count; + //4. return #3 + return mean; +} +console.log(calculateMean([4.6, 5.03, 7.99, 8.01])); +console.log(calculateMean([3, "50", 7])); + +//module.exports = calculateMean; diff --git a/prep/mean.test.js b/prep/mean.test.js index 22b24b55c..8b893a0b9 100644 --- a/prep/mean.test.js +++ b/prep/mean.test.js @@ -2,7 +2,19 @@ test("does something as described below", () => { // test implementation goes here }); + + */ +//mean.test.js +const mean = require("./mean"); // Import the mean function from mean.js +test("calculates the mean of a list of numbers", () => { + expect(mean([3, 50, 7])).toBe(20); // 20 is (3 + 50 + 7) / 3 + expect(mean([4.6, 5.03, 7.99, 8.01])).toBeCloseTo(6.4075); // 6.4075 is (4.6 + 5.03 + 7.99 + 8.01) / 4 + expect(mean([10, 20, 30, 40, 50])).toBe(30); // 30 is (10 + 20 + 30 + 40 + 50) / 5 + expect(mean([1, 2, 3, 4, 5, 6])).toBe(3.5); // 3.5 is (1 + 2 + 3 + 4 + 5 + 6) / 6 +}); +/* +The expect statement is used to create an assertion that checks if the output of the mean function matches the expected value. test("calculates the mean of a list of numbers", () => { const list = [3, 50, 7]; const currentOutput = calculateMean(list); @@ -10,3 +22,5 @@ test("calculates the mean of a list of numbers", () => { expect(currentOutput).toEqual(targetOutput); // 20 is (3 + 50 + 7) / 3 }); + +*/ From 3d4c4072900c18bbd170d1fa462ad408f75156dc Mon Sep 17 00:00:00 2001 From: Baba05206 Date: Tue, 18 Nov 2025 20:16:10 +0000 Subject: [PATCH 3/7] Update mean.js --- prep/mean.js | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/prep/mean.js b/prep/mean.js index 2aec83fb7..f30eafb97 100644 --- a/prep/mean.js +++ b/prep/mean.js @@ -36,6 +36,7 @@ function calculateMean(list) { return mean; } */ +/* //const list = [4.6, 5.03, 7.99, 8.01]; function calculateMean(list) { //1. sum the elements of the array @@ -57,3 +58,23 @@ console.log(calculateMean([4.6, 5.03, 7.99, 8.01])); console.log(calculateMean([3, "50", 7])); //module.exports = calculateMean; +*/ +function calculateMean(list) { + //1. sum the elements of the array + let sum = 0; + for (const item of list) { + const value = Number(item); + if (!isNaN(value)) { + sum += value; + } + } + + //2. determine the length of the array + let count = list.length; + //3. divide #1 by #2 + const mean = sum / count; + //4. return #3 + return mean; +} +console.log(calculateMean([4.6, 5.03, 7.99, 8.01])); +console.log(calculateMean([3, "50", 7])); From 7ed0f8ad6c7b5b1969527dae7c80a80e62c937f4 Mon Sep 17 00:00:00 2001 From: Baba05206 Date: Fri, 28 Nov 2025 07:37:15 +0000 Subject: [PATCH 4/7] Refactor index.html structure and enhance quotes.js functionality for random quote display --- Sprint-3/quote-generator/index.html | 15 ++++--- Sprint-3/quote-generator/quotes.js | 37 ++++++++++++++- Sprint-3/quote-generator/style.css | 70 ++++++++++++++++++++++++++++- 3 files changed, 114 insertions(+), 8 deletions(-) diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html index 30b434bcf..5ecc40e20 100644 --- a/Sprint-3/quote-generator/index.html +++ b/Sprint-3/quote-generator/index.html @@ -3,13 +3,18 @@ - Title here + Quote generator app + -

hello there

-

-

- +
+
+

“

+

+

+ +
+
diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js index 4a4d04b72..59153a08e 100644 --- a/Sprint-3/quote-generator/quotes.js +++ b/Sprint-3/quote-generator/quotes.js @@ -13,7 +13,7 @@ // // Examples of use // --------------- -// pickFromArray(['a','b','c','d']) // maybe returns 'c' +// pickFromArray(['a','b','c','d']) // maybe returns 'c' // You don't need to change this function function pickFromArray(choices) { @@ -490,4 +490,37 @@ const quotes = [ }, ]; -// call pickFromArray with the quotes array to check you get a random quote +// ************************************************************ +// YOUR CODE STARTS HERE +// ************************************************************ + +/** + * Updates the content of the quote and author elements + * with a random quote from the quotes array. + */ +function displayRandomQuote() { + const randomQuote = pickFromArray(quotes); + + const quoteElement = document.getElementById("quote"); + const authorElement = document.getElementById("author"); + + if (!quoteElement || !authorElement) { + console.error("Quote or author element not found in the DOM."); + return; + } + + quoteElement.innerText = randomQuote.quote; + authorElement.innerText = randomQuote.author; +} + +// ************************************************************ +// INITIALIZATION (no need for DOMContentLoaded because of defer) +// ************************************************************ +displayRandomQuote(); + +const newQuoteButton = document.getElementById("new-quote"); +if (newQuoteButton) { + newQuoteButton.addEventListener("click", displayRandomQuote); +} else { + console.error("New quote button not found in the DOM."); +} diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css index 63cedf2d2..0f40b83ff 100644 --- a/Sprint-3/quote-generator/style.css +++ b/Sprint-3/quote-generator/style.css @@ -1 +1,69 @@ -/** Write your CSS in here **/ +body { + margin: 0; + font-family: sans-serif; +} + +.main-container { + background-color: #ff9933; + min-height: 100vh; + display: flex; + justify-content: center; + align-items: center; + padding: 20px; +} + +.quote-box { + background-color: white; + padding: 40px; + max-width: 700px; + width: 90%; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + position: relative; +} + +.quote-mark { + position: absolute; + top: 10px; + left: 20px; + font-size: 100px; + font-family: serif; + color: #ff9933; + margin: 0; + line-height: 1; + opacity: 0.6; +} + +#quote { + font-size: 24px; + line-height: 1.5; + margin-top: 50px; + margin-bottom: 20px; + text-align: left; + padding-left: 15px; +} + +#author { + font-size: 18px; + text-align: right; + margin-bottom: 30px; + margin-top: 0; +} + +#author::before { + content: "- "; +} + +#new-quote { + background-color: #ff9933; + color: white; + border: none; + padding: 10px 20px; + font-size: 16px; + cursor: pointer; + float: right; + transition: background-color 0.2s; +} + +#new-quote:hover { + background-color: #e0872c; +} From b12fba78256b5d5c741c43d9179eb566b1404f97 Mon Sep 17 00:00:00 2001 From: Baba05206 Date: Fri, 28 Nov 2025 08:00:51 +0000 Subject: [PATCH 5/7] Refactor displayRandomQuote function for improved readability and add event listener for new quote button --- Sprint-3/quote-generator/quotes.js | 31 ++++++++---------------------- 1 file changed, 8 insertions(+), 23 deletions(-) diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js index 59153a08e..9240e5cef 100644 --- a/Sprint-3/quote-generator/quotes.js +++ b/Sprint-3/quote-generator/quotes.js @@ -490,37 +490,22 @@ const quotes = [ }, ]; -// ************************************************************ -// YOUR CODE STARTS HERE -// ************************************************************ - -/** - * Updates the content of the quote and author elements - * with a random quote from the quotes array. - */ function displayRandomQuote() { const randomQuote = pickFromArray(quotes); - const quoteElement = document.getElementById("quote"); const authorElement = document.getElementById("author"); - if (!quoteElement || !authorElement) { - console.error("Quote or author element not found in the DOM."); - return; - } + if (!quoteElement || !authorElement) return; quoteElement.innerText = randomQuote.quote; authorElement.innerText = randomQuote.author; } -// ************************************************************ -// INITIALIZATION (no need for DOMContentLoaded because of defer) -// ************************************************************ -displayRandomQuote(); +window.addEventListener("load", () => { + displayRandomQuote(); -const newQuoteButton = document.getElementById("new-quote"); -if (newQuoteButton) { - newQuoteButton.addEventListener("click", displayRandomQuote); -} else { - console.error("New quote button not found in the DOM."); -} + const newQuoteButton = document.getElementById("new-quote"); + if (newQuoteButton) { + newQuoteButton.addEventListener("click", displayRandomQuote); + } +}); From 3539f6aaee33b185f21e6b26afc914d61c62e573 Mon Sep 17 00:00:00 2001 From: Baba05206 Date: Sat, 29 Nov 2025 14:55:30 +0000 Subject: [PATCH 6/7] deleted prep --- prep/mean.js | 80 ----------------------------------------------- prep/mean.test.js | 26 --------------- prep/package.json | 16 ---------- 3 files changed, 122 deletions(-) delete mode 100644 prep/mean.js delete mode 100644 prep/mean.test.js delete mode 100644 prep/package.json diff --git a/prep/mean.js b/prep/mean.js deleted file mode 100644 index f30eafb97..000000000 --- a/prep/mean.js +++ /dev/null @@ -1,80 +0,0 @@ -/* -Let’s consider a list of prices in a bill: -4.6, 5.03, 7.99, 8.01 -instead of writing the like below -const price0 = 4.6; -const price1 = 5.03; -const price2 = 7.99; -const price3 = 8.01; -We can write it as an array literal -const items = [4.6, 5.03, 7.99, 8.01]; - -The Array object, as with arrays in other programming languages, enables storing a collection -of multiple items under a single variable name, and has members for performing common array operations. -Arrays can store items of any type & multiple pieces of information. - -In JavaScript, we can use [] notation to access specific elements in the array using index numbers. -The index numbers start from 0. - - -const items = [4.6, 5.03, 7.99, 8.01]; -console.log(items[0]); // 4.6 -console.log(items[1]); // 5.03 -console.log(items[2]); // 7.99 -console.log(items[3]); // 8.01 -// Accessing elements using index numbers - -const items = [4.6, 5.03, 7.99, 8.01]; -function calculateMean(list) { - // Calculate the sum of all elements in the array - const sum = list.reduce( - (accumulator, currentValue) => accumulator + currentValue, - 0 - ); - // Calculate the mean by dividing the sum by the number of elements - const mean = sum / list.length; - return mean; -} - */ -/* -//const list = [4.6, 5.03, 7.99, 8.01]; -function calculateMean(list) { - //1. sum the elements of the array - let sum = 0; - for (let i = 0; i < list.length; i++) { - const arrayInValue = Number(list); - if (typeof list[i] === "number" && !isNaN(list[i])) { - sum += list[i]; - } - } - //2. determine the length of the array - let count = list.length; - //3. divide #1 by #2 - const mean = sum / count; - //4. return #3 - return mean; -} -console.log(calculateMean([4.6, 5.03, 7.99, 8.01])); -console.log(calculateMean([3, "50", 7])); - -//module.exports = calculateMean; -*/ -function calculateMean(list) { - //1. sum the elements of the array - let sum = 0; - for (const item of list) { - const value = Number(item); - if (!isNaN(value)) { - sum += value; - } - } - - //2. determine the length of the array - let count = list.length; - //3. divide #1 by #2 - const mean = sum / count; - //4. return #3 - return mean; -} -console.log(calculateMean([4.6, 5.03, 7.99, 8.01])); -console.log(calculateMean([3, "50", 7])); diff --git a/prep/mean.test.js b/prep/mean.test.js deleted file mode 100644 index 8b893a0b9..000000000 --- a/prep/mean.test.js +++ /dev/null @@ -1,26 +0,0 @@ -/* -test("does something as described below", () => { - // test implementation goes here -}); - - -*/ -//mean.test.js -const mean = require("./mean"); // Import the mean function from mean.js -test("calculates the mean of a list of numbers", () => { - expect(mean([3, 50, 7])).toBe(20); // 20 is (3 + 50 + 7) / 3 - expect(mean([4.6, 5.03, 7.99, 8.01])).toBeCloseTo(6.4075); // 6.4075 is (4.6 + 5.03 + 7.99 + 8.01) / 4 - expect(mean([10, 20, 30, 40, 50])).toBe(30); // 30 is (10 + 20 + 30 + 40 + 50) / 5 - expect(mean([1, 2, 3, 4, 5, 6])).toBe(3.5); // 3.5 is (1 + 2 + 3 + 4 + 5 + 6) / 6 -}); -/* -The expect statement is used to create an assertion that checks if the output of the mean function matches the expected value. -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 -}); - -*/ diff --git a/prep/package.json b/prep/package.json deleted file mode 100644 index 663b964da..000000000 --- a/prep/package.json +++ /dev/null @@ -1,16 +0,0 @@ -{ - "name": "prep", - "version": "1.0.0", - "description": "", - "main": "index.js", - "scripts": { - "test": "jest" - }, - "keywords": [], - "author": "", - "license": "ISC", - "type": "commonjs", - "devDependencies": { - "jest": "^30.2.0" - } -} From 2e420ba3ef4589e0eaa60671d19d631a03d8585b Mon Sep 17 00:00:00 2001 From: Baba05206 Date: Sat, 29 Nov 2025 16:08:43 +0000 Subject: [PATCH 7/7] fixed the testing of quote generator --- Sprint-3/quote-generator/quotes.js | 48 ++++++++++++++----------- Sprint-3/quote-generator/quotes.test.js | 5 ++- 2 files changed, 29 insertions(+), 24 deletions(-) diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js index 9240e5cef..822a08a88 100644 --- a/Sprint-3/quote-generator/quotes.js +++ b/Sprint-3/quote-generator/quotes.js @@ -1,3 +1,25 @@ + +function displayRandomQuote() { + const randomQuote = pickFromArray(quotes); + const quoteElement = document.getElementById("quote"); + const authorElement = document.getElementById("author"); + console.log(`quote: ${randomQuote.quote}`) + console.log(`author: ${randomQuote.author}`) + + if (!quoteElement || !authorElement) return; + + quoteElement.innerText = randomQuote.quote; + authorElement.innerText = randomQuote.author; +} + +window.addEventListener("load", () => { + displayRandomQuote(); + + const newQuoteButton = document.getElementById("new-quote"); + if (newQuoteButton) { + newQuoteButton.addEventListener("click", displayRandomQuote); + } +}); // DO NOT EDIT BELOW HERE // pickFromArray is a function which will return one item, at @@ -17,7 +39,11 @@ // You don't need to change this function function pickFromArray(choices) { - return choices[Math.floor(Math.random() * choices.length)]; + var rnd = Math.random(); + console.log(`random value ${rnd}`); + var found = choices[Math.floor(rnd * choices.length)]; + console.log(`we chose ${found.quote} by ${found.author}`); + return found; } // A list of quotes you can use in your app. @@ -489,23 +515,3 @@ const quotes = [ author: "Zig Ziglar", }, ]; - -function displayRandomQuote() { - const randomQuote = pickFromArray(quotes); - const quoteElement = document.getElementById("quote"); - const authorElement = document.getElementById("author"); - - if (!quoteElement || !authorElement) return; - - quoteElement.innerText = randomQuote.quote; - authorElement.innerText = randomQuote.author; -} - -window.addEventListener("load", () => { - displayRandomQuote(); - - const newQuoteButton = document.getElementById("new-quote"); - if (newQuoteButton) { - newQuoteButton.addEventListener("click", displayRandomQuote); - } -}); diff --git a/Sprint-3/quote-generator/quotes.test.js b/Sprint-3/quote-generator/quotes.test.js index 288ab4651..f7b128bf7 100644 --- a/Sprint-3/quote-generator/quotes.test.js +++ b/Sprint-3/quote-generator/quotes.test.js @@ -4,7 +4,6 @@ There are some Tests in this file that will help you work out if your code is wo const path = require("path"); const { JSDOM } = require("jsdom"); -const { default: userEvent } = require("@testing-library/user-event"); let page = null; @@ -61,14 +60,14 @@ describe("Quote generator", () => { expect(authorP).toHaveTextContent("Albert Einstein"); expect(newQuoteBtn).toHaveTextContent("New quote"); - userEvent.click(newQuoteBtn); + newQuoteBtn.click(); expect(quoteP).toHaveTextContent( "I've learned that people will forget what you said, people will forget what you did, but people will never forget how you made them feel." ); expect(authorP).toHaveTextContent("Maya Angelou"); - userEvent.click(newQuoteBtn); + newQuoteBtn.click(); expect(quoteP).toHaveTextContent( "I have learned over the years that when one's mind is made up, this diminishes fear."