diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html index 30b434bcf..356fd96a1 100644 --- a/Sprint-3/quote-generator/index.html +++ b/Sprint-3/quote-generator/index.html @@ -3,13 +3,19 @@ - Title here + Quote generator app + -

hello there

-

-

- +

Random Quote Generator

+
+

Click the button to get inspired with a random quote!

+

+ +
diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js index 4a4d04b72..22a376cd8 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 quoteElement = document.querySelector("#quote"); +const authorElement = document.querySelector("#author"); + +// Attach a click event listener to the "New Quote" button +document.querySelector("#btn").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); + 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 63cedf2d2..6f7c81bc4 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; +} + + 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 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 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 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 +}); 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 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. +