Skip to content

Commit 212fe40

Browse files
Fithi-TeklomFithi-Teklom
committed
added a switch on and off button
1 parent dfc616d commit 212fe40

File tree

3 files changed

+110
-15
lines changed

3 files changed

+110
-15
lines changed

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

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,19 @@
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
66
<title>Quote generator app</title>
7-
<link rel="stylesheet" href="style.css" />
7+
<link rel="stylesheet" href="./style.css" />
88
<script defer src="quotes.js"></script>
99
</head>
1010
<body>
11-
<h1>hello there</h1>
11+
<h1>Hello there</h1>
1212
<p id="quote"></p>
1313
<p id="author"></p>
14+
<label class="switch">
15+
<input type="checkbox" id="auto-play-toggle" />
16+
<span class="slider"></span>
17+
</label>
18+
<p id="auto-status">auto-play:OFF</p>
19+
1420
<button type="button" id="new-quote">New quote</button>
1521
</body>
1622
</html>

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

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,27 @@ displayRandomQuote();
4343

4444
// Button shows a new quote
4545
button.addEventListener("click", displayRandomQuote);
46+
let autoPlayInterval = null;
47+
48+
const toggle = document.getElementById("auto-play-toggle");
49+
const statusText = document.getElementById("auto-status");
50+
51+
toggle.addEventListener("change", () => {
52+
if (toggle.checked) {
53+
statusText.textContent = "auto-play:ON";
54+
55+
// Change every 5 seconds (easy for testing)
56+
autoPlayInterval = setInterval(() => {
57+
pickQuoteAndAuthor();
58+
}, 5000);
59+
60+
pickQuoteAndAuthor(); // Change immediately
61+
} else {
62+
statusText.textContent = "auto-play:OFF";
63+
clearInterval(autoPlayInterval);
64+
}
65+
});
66+
4667

4768
// return choices[Math.floor(Math.random() * choices.length)];
4869
});

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

Lines changed: 81 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,109 @@
11
/** Write your CSS in here **/
22

3-
43
body {
54
font-family: Arial, sans-serif;
6-
background-color: #f4f4f4;
5+
background: linear-gradient(135deg, #f089cc, #d6eaff);
76
margin: 0;
8-
padding: 20px;
7+
padding: 40px;
98
text-align: center;
109
}
1110

11+
/* Page title */
1212
h1 {
13-
color: #333;
13+
color: black ;
14+
font-size: 2rem;
15+
margin-bottom: 20px;
1416
}
1517

18+
/* Quote styling */
1619
#quote {
17-
font-size: 1.4rem;
20+
font-size: 1.5rem;
1821
font-weight: bold;
19-
margin-top: 20px;
22+
color: black ;
23+
margin: 20px auto 10px;
24+
max-width: 600px;
25+
line-height: 1.5;
2026
}
2127

28+
/* Author name */
2229
#author {
23-
font-size: 1.1rem;
30+
font-size: 1.2rem;
2431
color: #555;
25-
margin-bottom: 20px;
32+
margin-bottom: 30px;
2633
}
2734

35+
/* Button styling */
2836
#new-quote {
29-
padding: 10px 20px;
37+
padding: 12px 30px;
3038
font-size: 1rem;
31-
border: none;
32-
background-color: #4a90e2;
39+
background-color: #007bff;
3340
color: white;
34-
border-radius: 6px;
41+
border: none;
42+
border-radius: 8px;
3543
cursor: pointer;
44+
transition: 0.25s ease;
3645
}
3746

47+
/* Hover effect */
3848
#new-quote:hover {
39-
background-color: #357ac9;
49+
background-color: #005ec2;
50+
transform: scale(1.05);
51+
}
52+
53+
54+
/* Toggle switch container */
55+
.switch {
56+
position: relative;
57+
display: inline-block;
58+
width: 50px;
59+
height: 26px;
60+
margin-top: 20px;
61+
}
62+
63+
/* Hide default checkbox */
64+
.switch input {
65+
opacity: 0;
66+
width: 0;
67+
height: 0;
4068
}
4169

70+
/* Slider background */
71+
.slider {
72+
position: absolute;
73+
cursor: pointer;
74+
top: 0;
75+
left: 0;
76+
right: 0;
77+
bottom: 0;
78+
background-color: #ccc;
79+
border-radius: 26px;
80+
transition: 0.4s;
81+
}
82+
83+
/* Slider circle */
84+
.slider:before {
85+
position: absolute;
86+
content: "";
87+
height: 20px;
88+
width: 20px;
89+
left: 3px;
90+
bottom: 3px;
91+
background-color: white;
92+
border-radius: 50%;
93+
transition: 0.4s;
94+
}
95+
96+
/* ON state */
97+
input:checked + .slider {
98+
background-color: #4a90e2;
99+
}
100+
101+
input:checked + .slider:before {
102+
transform: translateX(24px);
103+
}
104+
105+
#auto-status {
106+
margin-top: 10px;
107+
color: #333;
108+
font-weight: bold;
109+
}

0 commit comments

Comments
 (0)