Skip to content

London | 26-ITP-Jan | Alex Okorefe | Sprint 3 | Quote generator #1186

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
Alex-Os-Dev-Lab wants to merge 6 commits into
base: main
Choose a base branch
from
+107 −7
Open

London | 26-ITP-Jan | Alex Okorefe | Sprint 3 | Quote generator #1186

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
f55cbf8
Changed the title to Alarm Clock App
Alex-Os-Dev-Lab Mar 14, 2026
333486d
Revert title to default in index.html
Alex-Os-Dev-Lab Mar 14, 2026
7c63ba6
Refactor index.html structure and update title to 'Quote Generator'
Alex-Os-Dev-Lab Apr 3, 2026
6c81be1
Add initial CSS styles for layout and design
Alex-Os-Dev-Lab Apr 4, 2026
c1c30f3
Implement displayRandomQuote function and initialize quote display on…
Alex-Os-Dev-Lab Apr 5, 2026
0aef471
Fix doctype declaration in index.html
Alex-Os-Dev-Lab Apr 7, 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
15 changes: 9 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,18 @@
<!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>
<title>Quote Generator</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>
<main class="container">
<h1>Quote Generator</h1>
<p id="quote"></p>
<p id="author"></p>
<button type="button" id="new-quote">New quote</button>
</main>
</body>
</html>
28 changes: 28 additions & 0 deletions Sprint-3/quote-generator/quotes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,31 @@
// Function to fetch a random quote and update the DOM
function displayRandomQuote() {
// 1. Get a random quote object using the provided helper function
const randomQuote = pickFromArray(quotes);

// 2. Select the HTML elements where the quote and author will go
const quoteElement = document.querySelector("#quote");
const authorElement = document.querySelector("#author");

// 3. Update the text of those elements
if (quoteElement && authorElement) {
quoteElement.innerText = randomQuote.quote;
authorElement.innerText = randomQuote.author;
}
}

// Ensure the DOM is fully loaded before attaching event listeners
window.onload = function () {
// Display an initial quote right when the page loads
displayRandomQuote();

// Find the button and attach a click event listener
const newQuoteBtn = document.querySelector("#new-quote");
if (newQuoteBtn) {
newQuoteBtn.addEventListener("click", displayRandomQuote);
}
};

// DO NOT EDIT BELOW HERE

// pickFromArray is a function which will return one item, at
Expand Down
71 changes: 70 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,70 @@
/** Write your CSS in here **/
/* Reset basic margins and set font */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

/* Center content on the screen and give it a background color */
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #f4f4f9;
color: #333;
}

/* Style the main container to look like a card */
.container {
background-color: white;
padding: 40px;
border-radius: 12px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
max-width: 500px;
text-align: center;
margin: 20px;
}

/* Style the heading */
h1 {
font-size: 1.5rem;
color: #555;
margin-bottom: 20px;
text-transform: uppercase;
letter-spacing: 2px;
}

/* Style the quote text */
#quote {
font-size: 1.25rem;
font-style: italic;
margin-bottom: 15px;
line-height: 1.5;
}

/* Style the author text */
#author {
font-size: 1rem;
color: #777;
font-weight: bold;
margin-bottom: 30px;
}

/* Make the button look clickable */
#new-quote {
background-color: #007bff;
color: white;
border: none;
padding: 12px 24px;
font-size: 1rem;
border-radius: 6px;
cursor: pointer;
transition: background-color 0.3s ease;
}

/* Hover effect to button */
#new-quote:hover {
background-color: #0056b3;
}
Loading