Skip to content

London | 26-ITP-May | Edina Kurdi | Sprint 3 | Quote Generator #1426

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.

Sign up for GitHub

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
edinakurdi wants to merge 10 commits into
base: main
Choose a base branch
from
Open

London | 26-ITP-May | Edina Kurdi | Sprint 3 | Quote Generator #1426

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
75a1115
change title to Quote generator app
edinakurdi Aug 12, 2026
5da7c38
grab html elements
edinakurdi Aug 12, 2026
f0333ea
update naming
edinakurdi Aug 12, 2026
0fa399f
implement displayQuote()
edinakurdi Aug 12, 2026
c3c2887
move function call below quotes
edinakurdi Aug 12, 2026
6b7b0b6
add eventlistener
edinakurdi Aug 12, 2026
f597cff
add basic css
edinakurdi Aug 12, 2026
a8b38f0
link css to html
edinakurdi Aug 12, 2026
948a58a
add blockquote box for styling
edinakurdi Aug 12, 2026
0bbf207
style teal
edinakurdi Aug 12, 2026
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
25 changes: 15 additions & 10 deletions Sprint-3/quote-generator/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,20 @@
<!DOCTYPE html>
<html lang="en">
<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>
</head>
<body>
<h1>hello there</h1>

<head>
<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>
<div id="quote-box">
<p id="quote"></p>
<p id="author"></p>
<button type="button" id="new-quote">New quote</button>
</body>
</html>
</div>
</body>

</html>
14 changes: 14 additions & 0 deletions Sprint-3/quote-generator/quotes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,18 @@
function pickFromArray(choices) {
return choices[Math.floor(Math.random() * choices.length)];
}
const quotePar = document.getElementById("quote");
const authorPar = document.getElementById("author");
const newQuoteBtn = document.getElementById("new-quote");

function displayQuote(quoteObj) {
quotePar.textContent = quoteObj.quote;
authorPar.textContent = quoteObj.author;
}

newQuoteBtn.addEventListener("click", function () {
displayQuote(pickFromArray(quotes));
});

// A list of quotes you can use in your app.
// DO NOT modify this array, otherwise the tests may break!
Expand Down Expand Up @@ -491,3 +503,5 @@ const quotes = [
];

// call pickFromArray with the quotes array to check you get a random quote
console.log(pickFromArray(quotes)); //object gets logged into the console initially

@cjyuan cjyuan Aug 14, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Note: After checking, it is better to remove all code not needed by the app (to keep the code clean).

displayQuote(pickFromArray(quotes));

@cjyuan cjyuan Aug 14, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could consider placing all code that runs once on page load in a single function. For example, you could put it inside the page load callback or create a function named init() or setup() and call it once when the page loads.

This makes it easier to locate and manage all the code that runs once when the app starts.

28 changes: 27 additions & 1 deletion Sprint-3/quote-generator/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,27 @@
/** Write your CSS in here **/
body {
background-color: rgb(11, 170, 170);
color: white;
font-size: 2rem;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

#quote-box {
background-color: teal;
border: 3px solid white;
padding: 40px;
border-radius: 10px;

}

#new-quote {
display: block;
background-color: rgb(11, 170, 170);
color: white;
font-size: 1.25rem;
padding: 10px 24px;
border-radius: 10px;
}
Loading