Skip to content

London | 25-ITP-Sep | Mariia Serhiienko | Sprint 3 | Quote generator #910

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
Konvaly wants to merge 10 commits into from
Closed

London | 25-ITP-Sep | Mariia Serhiienko | Sprint 3 | Quote generator #910

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
ccc2f23
Updated name in the title in index.html
Konvaly Dec 4, 2025
a7b9865
Feat: display random quote on initial page load
Konvaly Dec 5, 2025
76f517d
Feat: change quote on button click
Konvaly Dec 5, 2025
22be6ba
Feat: show auto-play on/off toggle
Konvaly Dec 5, 2025
b8fad7a
Feat: add auto-play interval for quotes
Konvaly Dec 5, 2025
5ac5f13
Style: improve quote generator layout and theming
Konvaly Dec 5, 2025
b5f7f05
refactor: introduce getElement helper with error handling and replace…
Konvaly Dec 9, 2025
0cbfa1d
refactor: apply DRY principle - reduce duplication in label and auto-…
Konvaly Dec 9, 2025
c1fefff
fix: prevent multiple intervals by clearing existing timer before sta…
Konvaly Dec 10, 2025
10f58ab
feat: add 2-line truncation with show more/less to stabilize quote la…
Konvaly Dec 10, 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
32 changes: 23 additions & 9 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,29 @@
<!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>

<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>
<main class="quote-app">
<h1>hello there</h1>
<p id="quote"></p>
<p id="author"></p>
<button type="button" id="new-quote">New quote</button>
</body>
</html>
<div class="auto-play-controls">
<label class="auto-play-label">
<input type="checkbox" id="auto-play-toggle" />
Auto-generate quotes
</label>
<span id="auto-play-status">auto-play: OFF</span>
</div>

</main>
</body>

</html>
30 changes: 30 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 @@ -491,3 +491,33 @@ const quotes = [
];

// call pickFromArray with the quotes array to check you get a random quote

const quoteEl = document.getElementById("quote");
const authorEl = document.getElementById("author");
const newQuoteBtn = document.getElementById("new-quote");
const autoPlayToggle = document.getElementById("auto-play-toggle");
const autoPlayStatus = document.getElementById("auto-play-status");

newQuoteBtn.addEventListener("click", showRandomQuote);
Copy link

@takanocap takanocap Dec 5, 2025

Choose a reason for hiding this comment

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

what happens if quoteEl, authorEl, newQuoteBtn, autoPlayToggle, autoPlayStatus or their corresponding ids are not available, missing, not spelled correctly?

Copy link
Author

@Konvaly Konvaly Dec 9, 2025

Choose a reason for hiding this comment

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

If newQuoteBtn is null, then JavaScript will try to run : "null.addEventListener(...)"
This causes a TypeError (Cannot read properties of null (reading 'addEventListener')), therefore it stops the script, so the whole quote generator will break.
I fixed it with adding helper function which checks if element exist and throws a mistake if not.


let autoPlayInterval = null;

autoPlayToggle.addEventListener("click", () => {
if (autoPlayToggle.checked) {
autoPlayStatus.innerText = "auto-play: ON";
autoPlayInterval = setInterval(showRandomQuote, 4000);
Copy link

@takanocap takanocap Dec 5, 2025

Choose a reason for hiding this comment

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

what happens if interval has been set and not cleared before the above line ?

Copy link
Author

@Konvaly Konvaly Dec 10, 2025

Choose a reason for hiding this comment

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

If the interval isn’t cleared, a new setInterval creates an extra timer, so multiple intervals run at once. I fixed this by clearing the existing interval before starting a new one.

} else {
autoPlayStatus.innerText = "auto-play: OFF";
clearInterval(autoPlayInterval);
}
});

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

quoteEl.innerText = randomQuote.quote;

authorEl.innerText = randomQuote.author;
}

showRandomQuote();
63 changes: 63 additions & 0 deletions Sprint-3/quote-generator/style.css
View file
Open in desktop
Copy link

@JaypeeLan JaypeeLan Dec 7, 2025

Choose a reason for hiding this comment

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

Everything works well, but there is an improvement to make. I noticed as I got new quotes, some quotes are quite long, so the height of the container keeps adjusting, and I have to move my cursor everytime that happens. So, what you can do is figure out how you can keep the height of the container, so the next button stays in its position. Maybe use ellipsis and a "show more" button if the quote is too long. Be creative.
When you have cards that displays a list of content, you have to keep the height uniform.

Copy link
Author

@Konvaly Konvaly Dec 10, 2025

Choose a reason for hiding this comment

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

Hi @JaypeeLan, thanks for pointing that out! I noticed the layout shifting with longer quotes too. I updated the card so it keeps a consistent height, which stops the button from moving around. For quotes that are really long, I added an ellipsis and a “Show more / Show less” toggle, truncated to 2 lines. This way the layout stays steady, but users can still read the full quote if they want to.

Original file line number Diff line number Diff line change
@@ -1 +1,64 @@
/** Write your CSS in here **/

body {
margin: 0;
padding: 0;
min-height: 100vh;

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

background: linear-gradient(135deg, #e0f7ff, #c8f7dc);
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
sans-serif;
}

.quote-app {
background: #ffffff;
padding: 2rem 2.5rem;
border-radius: 12px;

box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);

max-width: 600px;
width: 90%;
text-align: center;
}

label {
display: inline-flex;
align-items: center;
gap: 0.5rem;
margin-top: 1rem;
}

.auto-play-controls {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
margin-top: 1rem;
}

#auto-play-toggle {
width: 20px;
height: 20px;
cursor: pointer;
accent-color: #16a34a;
}

#auto-play-status {
margin-top: 0;
font-size: 0.9rem;
padding: 0.25rem 0.5rem;
border-radius: 999px;
display: inline-block;
}

.auto-play-label {
Copy link

@takanocap takanocap Dec 5, 2025

Choose a reason for hiding this comment

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

is there a way to use the DRY principle between the label and the .auto-play-label? since they both have label ?

Copy link
Author

@Konvaly Konvaly Dec 9, 2025

Choose a reason for hiding this comment

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

Thanks for the feedback! I updated the CSS so the shared label styles are all in the main label rule.
.auto-play-label now only overrides what’s different (the margin and slightly smaller gap), so it’s more DRY.

display: inline-flex;
align-items: center;
gap: 0.4rem;
margin: 0;
}