Skip to content

WESTMIDLANDS | ITP-MAY2025 | Peter Lui | Sprint3 Quotes Generator #739

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

WESTMIDLANDS | ITP-MAY2025 | Peter Lui | Sprint3 Quotes Generator #739

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
2 changes: 1 addition & 1 deletion Sprint-3/quote-generator/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<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>
</head>
<body>
Expand Down
70 changes: 70 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,73 @@
function displayRandomQuote() {
if (!quotes.length) return; // Guard against empty quotes array
Copy link

Choose a reason for hiding this comment

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

Error handling is a good practice! 👍

const randomQuote = pickFromArray(quotes);
const quoteElement = document.getElementById("quote");
const authorElement = document.getElementById("author");

if (quoteElement && authorElement) {
quoteElement.textContent = randomQuote.quote;
authorElement.textContent = randomQuote.author;

// Style the quote
quoteElement.style.backgroundColor = "#f0f4f8"; // Light blue-gray background
quoteElement.style.padding = "20px"; // Padding for spacing
quoteElement.style.borderRadius = "8px"; // Rounded corners
quoteElement.style.fontSize = "1.2em"; // Larger font for readability
quoteElement.style.color = "#333"; // Dark text for contrast
quoteElement.style.margin = "20px"; // Margin for separation
quoteElement.style.textAlign = "center"; // Center the text
quoteElement.style.fontStyle = "italic"; // Italicize quote
quoteElement.style.borderLeft = "4px solid #007bff"; // Blue accent border

// Style the author
authorElement.style.color = "#007bff"; // Blue color for author
authorElement.style.padding = "10px 20px"; // Padding for spacing
authorElement.style.fontSize = "1em"; // Slightly smaller than quote
authorElement.style.textAlign = "right"; // Right-align author
authorElement.style.fontWeight = "bold"; // Bold for emphasis
authorElement.style.margin = "0 20px 20px 20px"; // Margin for separation
Comment on lines +12 to +28
Copy link

Choose a reason for hiding this comment

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

You can control styles using the DOM; however, it's recommended to use CSS files rather than controlling them with JavaScript because of performance, separation of interest, and maintenance reasons.

Copy link
Author

Choose a reason for hiding this comment

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

You can control styles using the DOM; however, it's recommended to use CSS files rather than controlling them with JavaScript because of performance, separation of interest, and maintenance reasons.

Hi Day! I totally agree with you - but I think we are not allowed to change the CSS file? Also it wasn't a requirement to style the page, so it was more of an experiment for me. Would you like me to delete the section? Thanks for your help!

Copy link

Choose a reason for hiding this comment

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

Hi @petergmlui, It's just a recommendation. You don't have to create a new css file only for this. Just wanted to share the best practice. Well done!

Copy link
Author

Choose a reason for hiding this comment

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

Thank you Day! Highly appreciated!

}

// Style the button
const buttonElement = document.getElementById("new-quote");
if (buttonElement) {
buttonElement.style.backgroundColor = "#007bff"; // Blue background
buttonElement.style.color = "#fff"; // White text
buttonElement.style.padding = "10px 20px"; // Padding for size
buttonElement.style.border = "none"; // Remove default border
buttonElement.style.borderRadius = "5px"; // Rounded corners
buttonElement.style.cursor = "pointer"; // Pointer on hover
buttonElement.style.fontSize = "1em"; // Readable font size
buttonElement.style.margin = "0 20px"; // Center with margin
buttonElement.style.transition = "background-color 0.3s"; // Smooth hover effect

// Add hover effect
buttonElement.addEventListener("mouseover", () => {
buttonElement.style.backgroundColor = "#0056b3"; // Darker blue on hover
});
buttonElement.addEventListener("mouseout", () => {
buttonElement.style.backgroundColor = "#007bff"; // Original blue
});
}

// Style the body for overall centering
document.body.style.display = "flex";
document.body.style.flexDirection = "column";
document.body.style.alignItems = "center";
document.body.style.backgroundColor = "#e9ecef"; // Light gray background
document.body.style.minHeight = "100vh"; // Full viewport height
document.body.style.margin = "0"; // Remove default margin
}

document.addEventListener("DOMContentLoaded", () => {
if (document.getElementById("new-quote")) {
displayRandomQuote();
document
.getElementById("new-quote")
.addEventListener("click", displayRandomQuote);
}
});

// DO NOT EDIT BELOW HERE

// pickFromArray is a function which will return one item, at
Expand Down