Skip to content

WM | 25-ITP-May | Abdullah Saleh | Sprint 3 | Quote Generator #688

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 14 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 11 additions & 5 deletions Sprint-3/quote-generator/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,19 @@
<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>
<link rel="stylesheet" href="style.css" />
<script defer src="quotes.js"></script>
</head>
<body>
<h1>hello there</h1>
<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 id="btn">
<span id="btn-text-one">Hover me</span>
<span id="btn-text-two">New quote</span>
</button>
</div>
</body>
</html>
19 changes: 18 additions & 1 deletion Sprint-3/quote-generator/quotes.js
Original file line number Diff line number Diff line change
Expand Up @@ -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}`;
}
84 changes: 83 additions & 1 deletion Sprint-3/quote-generator/style.css
Original file line number Diff line number Diff line change
@@ -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;
}


9 changes: 9 additions & 0 deletions prep/array.js
Original file line number Diff line number Diff line change
@@ -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
11 changes: 11 additions & 0 deletions prep/assembling.the.parts.js
Original file line number Diff line number Diff line change
@@ -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}`);
14 changes: 14 additions & 0 deletions prep/iteration.js
Original file line number Diff line number Diff line change
@@ -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]);
8 changes: 8 additions & 0 deletions prep/mean.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
function calculateMean(list) {
let total = 0;
for (const item of list) {
return total += item;
}
}

module.exports = calculateMean;
15 changes: 15 additions & 0 deletions prep/mean.test.js
Original file line number Diff line number Diff line change
@@ -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
});
9 changes: 9 additions & 0 deletions prep/median.js
Original file line number Diff line number Diff line change
@@ -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;
9 changes: 9 additions & 0 deletions prep/median.test.js
Original file line number Diff line number Diff line change
@@ -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);
});
16 changes: 16 additions & 0 deletions prep/summation.js
Original file line number Diff line number Diff line change
@@ -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.