Skip to content

Commit d49e3f1

Browse files
Pretty Taruvingabytesandroses
Pretty Taruvinga
and
bytesandroses
committed
Implement quote generator logic and update HTML with required elements
- Added index.js for quote functionality - Display random quote on page load - Added button click to generate new quote - Updated index.html with quote, author, and button elements - Linked quotes.js and index.js scripts Co-authored-by: Isaac Abodunrin <bytesandroses@users.noreply.github.com>
1 parent 97289e8 commit d49e3f1

File tree

3 files changed

+83
-7
lines changed

3 files changed

+83
-7
lines changed

‎Sprint-3/quote-generator/index.html‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,17 @@
1-
<!DOCTYPE html>
1+
<!doctype html>
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<title>Title here</title>
6+
<title>Quote Generator</title>
77
<script defer src="quotes.js"></script>
88
</head>
99
<body>
10-
<h1>hello there</h1>
11-
<p id="quote"></p>
12-
<p id="author"></p>
13-
<button type="button" id="new-quote">New quote</button>
10+
<div class="container">
11+
<h1>Quote Generator</h1>
12+
<p id="quote"></p>
13+
<p id="author"></p>
14+
<button type="button" id="new-quote">New quote</button>
15+
</div>
1416
</body>
1517
</html>

‎Sprint-3/quote-generator/quotes.js‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,19 @@
1+
const quoteElement = document.querySelector("#quote");
2+
const authorElement = document.querySelector("#author");
3+
const button = document.querySelector("#new-quote");
4+
5+
function showQuote() {
6+
const index = Math.floor(Math.random() * quotes.length);
7+
const randomQuote = quotes[index];
8+
9+
quoteElement.innerText = randomQuote.quote;
10+
authorElement.innerText = randomQuote.author;
11+
}
12+
13+
button.addEventListener("click", showQuote);
14+
15+
window.onload = showQuote;
16+
117
// DO NOT EDIT BELOW HERE
218

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

‎Sprint-3/quote-generator/style.css‎

Lines changed: 59 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,59 @@
1-
/** Write your CSS in here **/
1+
body {
2+
margin: 0;
3+
height: 100vh;
4+
background-color: #f59e0b;
5+
display: flex;
6+
justify-content: center;
7+
align-items: center;
8+
font-family: Georgia, serif;
9+
}
10+
11+
.container {
12+
background-color: #e5e5e5;
13+
padding: 50px;
14+
width: 70%;
15+
max-width: 800px;
16+
border-radius: 6px;
17+
}
18+
19+
h1 {
20+
font-size: 1.5rem;
21+
margin-bottom: 30px;
22+
}
23+
24+
#quote {
25+
font-size: 1.6rem;
26+
color: #f59e0b;
27+
line-height: 1.6;
28+
}
29+
30+
#quote::before {
31+
content: "❝";
32+
font-size: 3rem;
33+
margin-right: 10px;
34+
vertical-align: middle;
35+
}
36+
37+
#author {
38+
text-align: right;
39+
margin-top: 20px;
40+
color: #f59e0b;
41+
font-size: 1.2rem;
42+
}
43+
44+
button {
45+
display: block;
46+
margin-left: auto;
47+
margin-top: 25px;
48+
background-color: #f59e0b;
49+
color: white;
50+
border: none;
51+
padding: 12px 24px;
52+
font-size: 1rem;
53+
cursor: pointer;
54+
border-radius: 4px;
55+
}
56+
57+
button:hover {
58+
background-color: #d97706;
59+
}

0 commit comments

Comments
 (0)