Skip to content

Commit a6edd95

Browse files
HadiVahidi20HadiVahidi20
committed
the quote generator is done
1 parent cbcdcc9 commit a6edd95

File tree

3 files changed

+120
-7
lines changed

3 files changed

+120
-7
lines changed

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

Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,20 @@
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>
7+
<link rel="stylesheet" href="style.css" />
78
<script defer src="quotes.js"></script>
89
</head>
9-
<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+
<body class="page">
11+
<main class="quote-app">
12+
<section class="quote-card">
13+
<h1 class="quote-title">Daily quote</h1>
14+
<p id="quote" class="quote-text"></p>
15+
<p id="author" class="quote-author"></p>
16+
<button type="button" id="new-quote" class="quote-button">
17+
New quote
18+
</button>
19+
</section>
20+
</main>
1421
</body>
1522
</html>

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

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,34 @@ function pickFromArray(choices) {
2020
return choices[Math.floor(Math.random() * choices.length)];
2121
}
2222

23+
function displayQuote() {
24+
const quoteElement = document.getElementById("quote");
25+
const authorElement = document.getElementById("author");
26+
const randomItem = pickFromArray(quotes);
27+
28+
if (!quoteElement || !authorElement) {
29+
return;
30+
}
31+
32+
quoteElement.innerText = randomItem.quote;
33+
authorElement.innerText = `— ${randomItem.author}`;
34+
}
35+
36+
function setupQuoteGenerator() {
37+
const button = document.getElementById("new-quote");
38+
39+
if (button) {
40+
button.addEventListener("click", () => {
41+
displayQuote();
42+
});
43+
}
44+
45+
// Show one quote when the page opens
46+
displayQuote();
47+
}
48+
49+
window.addEventListener("DOMContentLoaded", setupQuoteGenerator);
50+
2351
// A list of quotes you can use in your app.
2452
// DO NOT modify this array, otherwise the tests may break!
2553
const quotes = [

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

Lines changed: 79 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,79 @@
1-
/** Write your CSS in here **/
1+
.page {
2+
font-family: "Georgia", "Times New Roman", serif;
3+
background-color: #efa73d;
4+
margin: 0;
5+
min-height: 100vh;
6+
}
7+
8+
/* Keep the main area simple and centered */
9+
.quote-app {
10+
min-height: 100vh;
11+
display: flex;
12+
align-items: center;
13+
justify-content: center;
14+
padding: 20px;
15+
}
16+
17+
.quote-card {
18+
max-width: 900px;
19+
width: 100%;
20+
background-color: #ffffff;
21+
border-radius: 10px;
22+
padding: 40px 60px;
23+
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
24+
display: flex;
25+
flex-direction: column;
26+
gap: 20px;
27+
}
28+
29+
.quote-title {
30+
text-align: center;
31+
margin-bottom: 18px;
32+
color: #2b2d42;
33+
font-size: 24px;
34+
}
35+
36+
.quote-text {
37+
font-size: 32px;
38+
line-height: 1.5;
39+
color: #d9812a;
40+
margin: 0;
41+
position: relative;
42+
}
43+
44+
.quote-text::before {
45+
content: "❝";
46+
font-size: 56px;
47+
color: #d9812a;
48+
margin-right: 10px;
49+
vertical-align: middle;
50+
display: inline-block;
51+
}
52+
53+
.quote-author {
54+
text-align: right;
55+
font-size: 20px;
56+
color: #d9812a;
57+
margin: 0;
58+
}
59+
60+
.quote-button {
61+
align-self: flex-end;
62+
min-width: 140px;
63+
padding: 12px;
64+
font-size: 18px;
65+
border: none;
66+
border-radius: 8px;
67+
background-color: #e7891b;
68+
color: #ffffff;
69+
cursor: pointer;
70+
}
71+
72+
.quote-button:hover {
73+
background-color: #cc6c07;
74+
}
75+
76+
.quote-button:focus {
77+
outline: 2px solid #9b4a00;
78+
outline-offset: 2px;
79+
}

0 commit comments

Comments
 (0)