Skip to content

Commit 67527e0

Browse files
mervereismervereis
committed
quote generator application created
1 parent 96d077b commit 67527e0

3 files changed

Lines changed: 159 additions & 12 deletions

File tree

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

Lines changed: 23 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,27 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8" />
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<title>Title here</title>
7-
<script defer src="quotes.js"></script>
8-
</head>
9-
<body>
10-
<h1>hello there</h1>
3+
4+
<head>
5+
<meta charset="UTF-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Quote generator app</title>
8+
<link rel="stylesheet" href="style.css" />
9+
<script defer src="quotes.js"></script>
10+
</head>
11+
12+
<body>
13+
<div class="card">
1114
<p id="quote"></p>
1215
<p id="author"></p>
13-
<button type="button" id="new-quote">New quote</button>
14-
</body>
15-
</html>
16+
17+
<div class="controls">
18+
<label class="toggle-label">
19+
<input type="checkbox" id="autoplay-toggle" />
20+
<span id="autoplay-status">Auto Play: OFF</span>
21+
</label>
22+
<button type="button" id="new-quote">New quote</button>
23+
</div>
24+
</div>
25+
</body>
26+
27+
</html>

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

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -491,3 +491,32 @@ const quotes = [
491491
];
492492

493493
// call pickFromArray with the quotes array to check you get a random quote
494+
const quoteEl = document.getElementById("quote");
495+
const authorEl = document.getElementById("author");
496+
const btn = document.getElementById("new-quote");
497+
const toggle = document.getElementById("autoplay-toggle");
498+
const statusEl = document.getElementById("autoplay-status");
499+
500+
let interval = null;
501+
502+
function showQuote() {
503+
const picked = pickFromArray(quotes);
504+
console.log(picked);
505+
quoteEl.textContent = picked.quote;
506+
authorEl.textContent = "- " + picked.author;
507+
}
508+
509+
btn.addEventListener("click", showQuote);
510+
511+
toggle.addEventListener("change", () => {
512+
if (toggle.checked) {
513+
statusEl.textContent = "Auto Play: ON";
514+
interval = setInterval(showQuote, 3000);
515+
} else {
516+
statusEl.textContent = "Auto Play: OFF";
517+
clearInterval(interval);
518+
interval = null;
519+
}
520+
});
521+
522+
showQuote();

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

Lines changed: 107 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,107 @@
1-
/** Write your CSS in here **/
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
min-height: 100vh;
9+
background-color: #f5a800;
10+
display: flex;
11+
align-items: center;
12+
justify-content: center;
13+
font-family: Georgia, serif;
14+
}
15+
16+
.card {
17+
background: #fff;
18+
padding: 60px 50px 40px;
19+
max-width: 780px;
20+
width: 90%;
21+
border-radius: 4px;
22+
position: relative;
23+
}
24+
25+
.card::before {
26+
content: "\201C";
27+
font-size: 120px;
28+
color: #f5a800;
29+
line-height: 0.6;
30+
position: absolute;
31+
top: 40px;
32+
left: 40px;
33+
}
34+
35+
#quote {
36+
font-size: 1.4rem;
37+
color: #f5a800;
38+
margin-bottom: 20px;
39+
padding-left: 60px;
40+
line-height: 1.6;
41+
}
42+
43+
#author {
44+
font-size: 1.1rem;
45+
color: #f5a800;
46+
text-align: right;
47+
margin-bottom: 30px;
48+
}
49+
50+
.controls {
51+
display: flex;
52+
align-items: center;
53+
justify-content: flex-end;
54+
gap: 20px;
55+
}
56+
57+
button#new-quote {
58+
background-color: #f5a800;
59+
color: #fff;
60+
border: none;
61+
padding: 14px 28px;
62+
font-size: 1rem;
63+
cursor: pointer;
64+
}
65+
66+
button#new-quote:hover {
67+
background-color: #d99200;
68+
}
69+
70+
/* Toggle switch */
71+
.toggle-label {
72+
display: flex;
73+
align-items: center;
74+
gap: 10px;
75+
cursor: pointer;
76+
font-size: 0.9rem;
77+
color: #f5a800;
78+
}
79+
80+
.slider {
81+
width: 44px;
82+
height: 24px;
83+
background: #ccc;
84+
border-radius: 999px;
85+
position: relative;
86+
transition: background 0.3s;
87+
}
88+
89+
.slider::after {
90+
content: "";
91+
position: absolute;
92+
width: 18px;
93+
height: 18px;
94+
background: #fff;
95+
border-radius: 50%;
96+
top: 3px;
97+
left: 3px;
98+
transition: transform 0.3s;
99+
}
100+
101+
.toggle-label input:checked + .slider {
102+
background: #f5a800;
103+
}
104+
105+
.toggle-label input:checked + .slider::after {
106+
transform: translateX(20px);
107+
}

0 commit comments

Comments
 (0)