Skip to content

West Midlands | 25 Sep ITP | Iswat Bello | Sprint 3 | Build quote generator app #868

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

Closed
Iswanna wants to merge 13 commits into from
Closed

West Midlands | 25 Sep ITP | Iswat Bello | Sprint 3 | Build quote generator app #868

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
0823bcb
Update index.html <title> to "Quote Generator App"
Iswanna Nov 20, 2025
ecf423d
Add DOM element references for quote, author, and new quote button
Iswanna Nov 20, 2025
7978167
Move quotes array to top of file so functions can access it on load
Iswanna Nov 20, 2025
d6cc826
Link the style.css file to the index.html file
Iswanna Nov 20, 2025
c47a65f
Wrap body content in a div container for styling purposes and update …
Iswanna Nov 20, 2025
a39b748
Format quote and author with template literals
Iswanna Nov 20, 2025
58ee492
Add styles for quote generator layout and elements
Iswanna Nov 20, 2025
cc6a03d
Remove template literal from the quote and author inorder to align wi…
Iswanna Nov 20, 2025
299c393
Updated displayRandomQuote function and event listener for predictabl…
Iswanna Nov 20, 2025
bf4104e
Merge branch '>feature/quote_generator' of https://github.com/Iswanna…
Iswanna Nov 20, 2025
e924c09
Downgrade @testing-library/user-event from v14.6.1 to v13.5.0 to fix …
Iswanna Nov 21, 2025
b3730bb
Fix failing tests by downgrading @testing-library/user-event to v13
Iswanna Nov 21, 2025
189bed1
Merge remote-tracking branch 'origin/feature/quote_generator' to upda…
Iswanna Nov 21, 2025
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
4 changes: 3 additions & 1 deletion Sprint-3/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,8 +25,10 @@
"devDependencies": {
"@testing-library/dom": "^10.4.0",
"@testing-library/jest-dom": "^6.6.3",
"@testing-library/user-event": "^14.6.1",
"jest": "^30.0.4",
"jest-environment-jsdom": "^30.0.4"
},
"dependencies": {
"@testing-library/user-event": "^13.5.0"
}
}
13 changes: 8 additions & 5 deletions Sprint-3/quote-generator/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,16 @@
<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>
<script defer src="quotes.js"></script>
<link rel="stylesheet" href="./style.css" />
</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="quote-container">
<h1>Quote Generator</h1>
<p id="quote"></p>
<p id="author"></p>
<button type="button" id="new-quote">New quote</button>
</div>
</body>
</html>
21 changes: 20 additions & 1 deletion Sprint-3/quote-generator/quotes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -490,4 +490,23 @@ const quotes = [
},
];

// call pickFromArray with the quotes array to check you get a random quote
// Function to display a random quote on the page
function displayRandomQuote() {
Copy link

@jaymes15 jaymes15 Nov 22, 2025

Choose a reason for hiding this comment

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

Good job keeping displayRandomQuote() focused on a single responsibility — fetching a quote and updating the DOM. This helps keep the logic readable and easy to maintain.

Copy link
Author

@Iswanna Iswanna Nov 22, 2025

Choose a reason for hiding this comment

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

Thank you so much, @jaymes15.

// Pick a random quote object from the quotes array
const randomQuote = pickFromArray(quotes);

// Update the quote text on the page
document.getElementById("quote").textContent = randomQuote.quote;

// Update the author name on the page
document.getElementById("author").textContent = randomQuote.author;
}

// Add a click event listener to the "New quote" button
document.getElementById("new-quote").addEventListener("click", () => {
Copy link

@jaymes15 jaymes15 Nov 22, 2025

Choose a reason for hiding this comment

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

This is good! but we can make it cleaner by using a named function.
for example:
document.getElementById("new-quote").addEventListener("click", displayRandomQuote);

// When the button is clicked, display a new random quote
displayRandomQuote();
});

// show a random quote when page loads
displayRandomQuote();
57 changes: 57 additions & 0 deletions Sprint-3/quote-generator/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,58 @@
/** Write your CSS in here **/
/* Reset some default styles */
body {
font-family: "Helvetica", "Arial", sans-serif;
background-color: #ec8a09;
color: #333;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
padding: 20px;
text-align: center;
}

.quote-container {
display: flex;
flex-direction: column; /* stack quote, author, button vertically */
align-items: center; /* center quote and author horizontally */
background-color: #f7f3ee;
padding: 30px 40px;
border-radius: 15px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
max-width: 600px;
width: 100%;
}

#quote {
font-size: 1.5rem;
font-style: italic;
margin-bottom: 15px;
color: #f86510;
}

#author {
font-size: 1.2rem;
font-weight: bold;
color: #f86510;
margin-bottom: 20px;
align-self: flex-end; /* moves author to the right */
}

#new-quote {
align-self: flex-end; /* pushes button to the right edge of container */
margin-top: 20px; /* optional spacing from the quote */
background-color: #4caf50;
color: white;
border: none;
padding: 12px 25px;
border-radius: 8px;
font-size: 1rem;
cursor: pointer;
transition: background-color 0.3s ease;
}

#new-quote:hover {
background-color: #45a049;
}