Skip to content

West Midlands | ITP-Sept-25 | Georgina Rogers | Sprint 3 | Quote Generator #906

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

West Midlands | ITP-Sept-25 | Georgina Rogers | Sprint 3 | Quote Generator #906

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
6e2c774
update HTML structure and title for Quote Generator App
zilinskyte Dec 1, 2025
144ba1d
quote generator function implemented
zilinskyte Dec 1, 2025
a3dac0c
html updated
zilinskyte Dec 1, 2025
0c94a69
css updated
zilinskyte Dec 1, 2025
840d0d2
prettier
zilinskyte Dec 1, 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
14 changes: 9 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,17 @@
<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>
<h1>Quote Generator</h1>
<div class="quote-box">
<blockquote id="quote" class="quote-text"></blockquote>
<cite id="author" class="quote-author"></cite>
Comment on lines +13 to +14
Copy link

@bp7968h bp7968h Dec 3, 2025

Choose a reason for hiding this comment

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

Nice one, using the respective html semantic.

Copy link
Author

@zilinskyte zilinskyte Dec 3, 2025

Choose a reason for hiding this comment

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

hi, are there any changes you like me to make? I am not doing the stretch as I am catching up at the moment. If everything is okay please can you add the complete label to this?

Copy link

@bp7968h bp7968h Dec 3, 2025

Choose a reason for hiding this comment

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

Yeah sure if you are not up for it.

</div>
<button type="button" id="new-quote" class="quote-button">New quote</button>
</div>
</body>
</html>
12 changes: 12 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,15 @@
function getRandomQuote() {
const randomQuote = Math.floor(Math.random() * quotes.length);
return quotes[randomQuote];
}
function showQuote() {
const quote = pickFromArray(quotes);
document.getElementById("quote").innerText = `"${quote.quote}"`;
document.getElementById("author").innerText = `- ${quote.author}`;
}
window.onload = showQuote;
document.getElementById("new-quote").addEventListener("click", showQuote);

// DO NOT EDIT BELOW HERE

// pickFromArray is a function which will return one item, at
Expand Down
53 changes: 52 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,52 @@
/** Write your CSS in here **/
h1 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 58px;
color: #0b013d;
text-align: center;
}

body {
background-color: #6396d9;
font-family: Georgia, "Times New Roman", Times, serif;
text-align: center;
padding: 40px;
}

.container {
width: 60%;
margin: auto;
}

.quote-box {
background: rgb(242, 242, 243);
padding: 20px;
border-radius: 12px;
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
margin: 20px 0;
}

.quote-text {
font-size: 28px;
font-weight: bold;
color: #2e1717;
}

.quote-author {
font-size: 24px;
color: #191919;
margin-top: 10px;
}

.quote-button {
background: #f4efef;
color: rgb(19, 8, 80);
margin-top: 20px;
padding: 10px 18px;
border-radius: 8px;
font-size: 24px;
cursor: pointer;
}

.quote-button:hover {
background: #bbbfc2;
}