Skip to content

Glasgow | May-2025 | Mansoor Munawar | Sprint 3 | Quote generator #767

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
MansoorM11 wants to merge 4 commits into from
Closed

Glasgow | May-2025 | Mansoor Munawar | Sprint 3 | Quote generator #767

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
fff2726
Implement quote display functionality and update HTML structure
MansoorM11 Aug 13, 2025
a655e9a
Refactor HTML structure and enhance quote display formatting
MansoorM11 Aug 14, 2025
9d4ea1c
Update title in HTML and added hover effect for the new quote button
MansoorM11 Aug 15, 2025
9c2ce0f
Add cursor pointer style to new quote button
MansoorM11 Aug 15, 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
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>
<link rel="stylesheet" href="./style.css" />
<title>Quote Generator</title>

<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>
<div>
<p id="quote"></p>
<p id="author"></p>
<button type="button" id="new-quote">New quote</button>
Copy link

@sambabib sambabib Aug 15, 2025

Choose a reason for hiding this comment

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

minor feedback: it is good UX to always highlight when a button is hovered on. you should look up the css :hover and cursor properties. you can start here: https://stackoverflow.com/questions/8762201/how-to-get-the-cursor-to-change-to-the-hand-when-hovering-a-button-tag

good implementation overall. 👍

Copy link
Author

@MansoorM11 MansoorM11 Aug 15, 2025

Choose a reason for hiding this comment

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

Hi, thanks for the feedback and i have now made the requested changes.

Copy link

@sambabib sambabib Aug 15, 2025

Choose a reason for hiding this comment

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

excellent. well done!

</div>
</body>
</html>
11 changes: 11 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,14 @@ const quotes = [
];

// call pickFromArray with the quotes array to check you get a random quote
let quote = document.getElementById("quote");
let author = document.getElementById("author");
let quoteButton = document.getElementById("new-quote");

function displayQuote() {
let randomQuote = pickFromArray(quotes);
quote.textContent = `"${randomQuote.quote}"`;
author.textContent = `-${randomQuote.author}`;
}
displayQuote();
quoteButton.addEventListener("click", displayQuote);
34 changes: 34 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,35 @@
/** Write your CSS in here **/
body {
background-color: antiquewhite;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
font-family: Arial, Helvetica, sans-serif;
}

div {
background-color: azure;
width: 500px;
padding: 60px;
border-radius: 10px;
box-shadow: 5px 5px 10px black;
}

#quote {
font-size: 24px;
}

#author {
font-size: 18px;
}

#new-quote {
padding: 16px 10px;
border-radius: 10px;
cursor: pointer;
}

#new-quote:hover {
color: red;
}