Skip to content

Commit 84358b4

Browse files
carlosyabreucarlosyabreu
committed
Changed index.html, quotes.js and style.css files
1 parent 96d077b commit 84358b4

File tree

3 files changed

+315
-6
lines changed

3 files changed

+315
-6
lines changed

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

Lines changed: 26 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,35 @@
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 app</title>
7+
<link rel="stylesheet" href="style.css" />
78
<script defer src="quotes.js"></script>
89
</head>
910
<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>
11+
<div class="container">
12+
<h1>Quote Generator</h1>
13+
14+
<div class="quote-container">
15+
<p id="quote" class="quote-text"></p>
16+
<p id="author" class="author-text"></p>
17+
</div>
18+
19+
<div class="controls">
20+
<button type="button" id="new-quote" class="btn btn-primary">New Quote</button>
21+
22+
<div class="auto-play-control">
23+
<label for="auto-play-toggle" class="auto-play-label">
24+
Auto-play:
25+
<span id="auto-play-status" class="status">OFF</span>
26+
</label>
27+
<label class="toggle-switch">
28+
<input type="checkbox" id="auto-play-toggle">
29+
<span class="toggle-slider"></span>
30+
</label>
31+
</div>
32+
</div>
33+
</div>
1434
</body>
1535
</html>

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

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

493493
// call pickFromArray with the quotes array to check you get a random quote
494+
495+
// My code starts here
496+
let autoPlayInterval = null;
497+
let isAutoPlaying = false;
498+
499+
// Function to update the displayed quote
500+
function updateQuote() {
501+
const randomQuote = pickFromArray(quotes);
502+
const quoteElement = document.getElementById('quote');
503+
const authorElement = document.getElementById('author');
504+
505+
if (quoteElement && authorElement) {
506+
quoteElement.textContent = `"${randomQuote.quote}"`;
507+
authorElement.textContent = `— ${randomQuote.author}`;
508+
}
509+
}
510+
511+
// Function to start auto-play
512+
function startAutoPlay(intervalSeconds = 60) {
513+
if (autoPlayInterval) {
514+
clearInterval(autoPlayInterval);
515+
}
516+
autoPlayInterval = setInterval(updateQuote, intervalSeconds * 1000);
517+
isAutoPlaying = true;
518+
}
519+
520+
// Function to stop auto-play
521+
function stopAutoPlay() {
522+
if (autoPlayInterval) {
523+
clearInterval(autoPlayInterval);
524+
autoPlayInterval = null;
525+
}
526+
isAutoPlaying = false;
527+
}
528+
529+
// Function to update the auto-play status display
530+
function updateAutoPlayStatus() {
531+
const statusSpan = document.getElementById('auto-play-status');
532+
if (statusSpan) {
533+
statusSpan.textContent = isAutoPlaying ? 'ON' : 'OFF';
534+
statusSpan.className = `status ${isAutoPlaying ? 'status-on' : 'status-off'}`;
535+
}
536+
}
537+
538+
// Initialize the app when the DOM is loaded
539+
document.addEventListener('DOMContentLoaded', () => {
540+
// Display initial random quote
541+
updateQuote();
542+
543+
// Get DOM elements
544+
const newQuoteBtn = document.getElementById('new-quote');
545+
const autoPlayToggle = document.getElementById('auto-play-toggle');
546+
547+
// Add event listener for new quote button
548+
if (newQuoteBtn) {
549+
newQuoteBtn.addEventListener('click', () => {
550+
updateQuote();
551+
});
552+
}
553+
554+
// Add event listener for auto-play toggle
555+
if (autoPlayToggle) {
556+
autoPlayToggle.addEventListener('change', (event) => {
557+
if (event.target.checked) {
558+
// For testing, use 5 seconds instead of 60 seconds
559+
// In production, you might want to use 60 seconds
560+
// You can uncomment the appropriate line below
561+
startAutoPlay(5); // Using 5 seconds for testing
562+
// startAutoPlay(60); // Use this for production with 60 seconds
563+
} else {
564+
stopAutoPlay();
565+
}
566+
updateAutoPlayStatus();
567+
});
568+
}
569+
570+
// Initialize status display
571+
updateAutoPlayStatus();
572+
});

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

Lines changed: 210 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,211 @@
11
/** Write your CSS in here **/
2+
/** Write your CSS in here **/
3+
4+
* {
5+
margin: 0;
6+
padding: 0;
7+
box-sizing: border-box;
8+
}
9+
10+
body {
11+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
12+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
13+
min-height: 100vh;
14+
display: flex;
15+
justify-content: center;
16+
align-items: center;
17+
padding: 20px;
18+
}
19+
20+
.container {
21+
max-width: 800px;
22+
width: 100%;
23+
background: white;
24+
border-radius: 20px;
25+
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
26+
padding: 40px;
27+
animation: fadeIn 0.5s ease-in;
28+
}
29+
30+
@keyframes fadeIn {
31+
from {
32+
opacity: 0;
33+
transform: translateY(-20px);
34+
}
35+
to {
36+
opacity: 1;
37+
transform: translateY(0);
38+
}
39+
}
40+
41+
h1 {
42+
text-align: center;
43+
color: #333;
44+
margin-bottom: 30px;
45+
font-size: 2.5rem;
46+
font-weight: 600;
47+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
48+
-webkit-background-clip: text;
49+
-webkit-text-fill-color: transparent;
50+
background-clip: text;
51+
}
52+
53+
.quote-container {
54+
background: #f8f9fa;
55+
border-radius: 15px;
56+
padding: 30px;
57+
margin-bottom: 30px;
58+
border-left: 5px solid #667eea;
59+
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
60+
}
61+
62+
.quote-text {
63+
font-size: 1.5rem;
64+
line-height: 1.6;
65+
color: #333;
66+
margin-bottom: 20px;
67+
font-style: italic;
68+
text-align: center;
69+
}
70+
71+
.author-text {
72+
font-size: 1.1rem;
73+
color: #667eea;
74+
text-align: center;
75+
font-weight: 500;
76+
}
77+
78+
.controls {
79+
display: flex;
80+
justify-content: space-between;
81+
align-items: center;
82+
gap: 20px;
83+
flex-wrap: wrap;
84+
}
85+
86+
.btn {
87+
padding: 12px 24px;
88+
font-size: 1rem;
89+
font-weight: 600;
90+
border: none;
91+
border-radius: 10px;
92+
cursor: pointer;
93+
transition: all 0.3s ease;
94+
}
95+
96+
.btn-primary {
97+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
98+
color: white;
99+
}
100+
101+
.btn-primary:hover {
102+
transform: translateY(-2px);
103+
box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
104+
}
105+
106+
.btn-primary:active {
107+
transform: translateY(0);
108+
}
109+
110+
.auto-play-control {
111+
display: flex;
112+
align-items: center;
113+
gap: 15px;
114+
}
115+
116+
.auto-play-label {
117+
font-size: 1rem;
118+
color: #555;
119+
font-weight: 500;
120+
}
121+
122+
.status {
123+
font-weight: bold;
124+
padding: 2px 8px;
125+
border-radius: 5px;
126+
margin-left: 5px;
127+
}
128+
129+
.status-on {
130+
background-color: #28a745;
131+
color: white;
132+
}
133+
134+
.status-off {
135+
background-color: #dc3545;
136+
color: white;
137+
}
138+
139+
/* Toggle Switch */
140+
.toggle-switch {
141+
position: relative;
142+
display: inline-block;
143+
width: 60px;
144+
height: 34px;
145+
}
146+
147+
.toggle-switch input {
148+
opacity: 0;
149+
width: 0;
150+
height: 0;
151+
}
152+
153+
.toggle-slider {
154+
position: absolute;
155+
cursor: pointer;
156+
top: 0;
157+
left: 0;
158+
right: 0;
159+
bottom: 0;
160+
background-color: #ccc;
161+
transition: 0.4s;
162+
border-radius: 34px;
163+
}
164+
165+
.toggle-slider:before {
166+
position: absolute;
167+
content: "";
168+
height: 26px;
169+
width: 26px;
170+
left: 4px;
171+
bottom: 4px;
172+
background-color: white;
173+
transition: 0.4s;
174+
border-radius: 50%;
175+
}
176+
177+
input:checked + .toggle-slider {
178+
background-color: #667eea;
179+
}
180+
181+
input:checked + .toggle-slider:before {
182+
transform: translateX(26px);
183+
}
184+
185+
/* Responsive design */
186+
@media (max-width: 768px) {
187+
.container {
188+
padding: 20px;
189+
}
190+
191+
h1 {
192+
font-size: 1.8rem;
193+
}
194+
195+
.quote-text {
196+
font-size: 1.2rem;
197+
}
198+
199+
.controls {
200+
flex-direction: column;
201+
}
202+
203+
.btn {
204+
width: 100%;
205+
}
206+
207+
.auto-play-control {
208+
width: 100%;
209+
justify-content: space-between;
210+
}
211+
}

0 commit comments

Comments
 (0)