Skip to content

Brussels | ITP-2026-1 | Benjamin | Sprint 3 | Quotegenerator | Week 9 #124

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

Brussels | ITP-2026-1 | Benjamin | Sprint 3 | Quotegenerator | Week 9 #124

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4a7a5d1
Implement quote generator UI and interaction logic
nuttyproducer Apr 21, 2026
ba74bd2
Fix quote test by awaiting userEvent clicks
nuttyproducer Apr 21, 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
19 changes: 13 additions & 6 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,22 @@
<!DOCTYPE html>
<!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>
<link rel="stylesheet" href="style.css" />
<script defer src="quotes.js"></script>
<title></title>
</head>
<body>
<h1>hello there</h1>
<p id="quote"></p>
<p id="author"></p>
<button type="button" id="new-quote">New quote</button>
<div class="quotepanel">
<div class="quotebox">
<span class="quote-symbol">“</span>
<p id="quote" class="quotes"></p>
</div>
<p id="author" class="authors"></p>
<div class="button-styling">
<button type="button" id="new-quote">New quote</button>
</div>
</div>
</body>
</html>
25 changes: 24 additions & 1 deletion Sprint-3/quote-generator/quotes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,25 @@
document.title = "Quote generator app";

const domQuote = document.getElementById("quote");
const domAuthor = document.getElementById("author");
const newQuote = document.getElementById("new-quote");

function showRandomQuote() {
const randomQuote = pickFromArray(quotes);

domQuote.textContent = randomQuote.quote;
domAuthor.textContent = randomQuote.author;
}

// Select the quote and author elements from the DOM.
// Select the "New quote" button from the DOM.
// Write a function to:
// Pick a random quote object from the quotes array.
// Set the quote element’s text to the quote.
// Set the author element’s text to the author.
// When the page loads, call this function to show a random quote.
// When the button is clicked, call this function again to show a new random quote.

// DO NOT EDIT BELOW HERE

// pickFromArray is a function which will return one item, at
Expand Down Expand Up @@ -490,4 +512,5 @@ const quotes = [
},
];

// call pickFromArray with the quotes array to check you get a random quote
showRandomQuote();
newQuote.addEventListener("click", showRandomQuote);
6 changes: 3 additions & 3 deletions Sprint-3/quote-generator/quotes.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ describe("Quote generator", () => {
);
expect(authorP).toHaveTextContent("Albert Einstein");
});
test("can change quote to another random quote", () => {
test("can change quote to another random quote", async () => {
const quoteP = page.window.document.querySelector("#quote");
const authorP = page.window.document.querySelector("#author");
const newQuoteBtn = page.window.document.querySelector("#new-quote");
Expand All @@ -61,14 +61,14 @@ describe("Quote generator", () => {
expect(authorP).toHaveTextContent("Albert Einstein");
expect(newQuoteBtn).toHaveTextContent("New quote");

userEvent.click(newQuoteBtn);
await userEvent.click(newQuoteBtn);

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);
await userEvent.click(newQuoteBtn);

expect(quoteP).toHaveTextContent(
"I have learned over the years that when one's mind is made up, this diminishes fear."
Expand Down
97 changes: 96 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,96 @@
/** Write your CSS in here **/
* {
box-sizing: border-box;
}

body {
background-color: #f4a63e;

min-height: 100vh;

padding: 24px;

display: flex;
justify-content: center;
align-items: center;
}

.quotepanel {
background-color: white;

width: 100%;
max-width: 1000px;
min-height: 330px;

padding: 40px 50px;

display: flex;
flex-direction: column;
}

.quotebox {
gap: 16px;

display: flex;
align-items: flex-start;
}

.quote-symbol {
color: #f4a63e;

font-family: "Gill Sans", "Trebuchet MS", "Helvetica Neue", sans-serif;
font-size: 6.25rem;
font-weight: bold;
line-height: 0.8;

margin-top: -0.45rem;
}

.quotes {
color: #f4a63e;

font-family: Georgia, "Times New Roman", Times, serif;
font-size: 2.4rem;
line-height: 1.25;

min-height: 6.25em;

margin: 0;

flex: 1;
}

.authors {
color: #f4a63e;

font-family: Georgia, "Times New Roman", Times, serif;
font-size: 1.4rem;

margin: 0;

text-align: right;
}

.authors::before {
content: "- ";
}

.button-styling {
margin-top: auto;
padding-top: 20px;

display: flex;
justify-content: flex-end;
}

#new-quote {
background-color: #f4a63e;
color: white;

font-size: 1rem;

padding: 14px 22px;

border: none;

cursor: pointer;
}