Skip to content

Commit 2cd0a4d

Browse files
solygambassolygambas
committedJan 20, 2021
add toggle switch
1 parent c3bc03b commit 2cd0a4d

File tree

4 files changed

+129
-2
lines changed

4 files changed

+129
-2
lines changed
 

‎32-good cheap fast/index.html

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<link rel="stylesheet" href="style.css" />
7+
<title>Good, Cheap, Fast</title>
8+
</head>
9+
<body>
10+
<h2>How do you want your project to be?</h2>
11+
<div class="toggle-container">
12+
<input type="checkbox" name="good" id="good" class="toggle" />
13+
<label for="good" class="label"><div class="ball"></div></label>
14+
<span>Good</span>
15+
</div>
16+
<div class="toggle-container">
17+
<input type="checkbox" name="cheap" id="cheap" class="toggle" />
18+
<label for="cheap" class="label"><div class="ball"></div></label>
19+
<span>Cheap</span>
20+
</div>
21+
<div class="toggle-container">
22+
<input type="checkbox" name="fast" id="fast" class="toggle" />
23+
<label for="fast" class="label"><div class="ball"></div></label>
24+
<span>Fast</span>
25+
</div>
26+
<script src="script.js"></script>
27+
</body>
28+
</html>

‎32-good cheap fast/script.js

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
const toggles = document.querySelectorAll(".toggle");
2+
const good = document.getElementById("good");
3+
const cheap = document.getElementById("cheap");
4+
const fast = document.getElementById("fast");
5+
6+
const doTheTrick = (theClickedOne) => {
7+
if (good.checked && cheap.checked && fast.checked) {
8+
if (good === theClickedOne) fast.checked = false;
9+
if (cheap === theClickedOne) good.checked = false;
10+
if (fast === theClickedOne) cheap.checked = false;
11+
}
12+
};
13+
14+
toggles.forEach((toggle) =>
15+
toggle.addEventListener("change", (e) => doTheTrick(e.target))
16+
);

‎32-good cheap fast/style.css

+83
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap");
2+
3+
* {
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
font-family: "Roboto", sans-serif;
9+
display: flex;
10+
flex-direction: column;
11+
align-items: center;
12+
justify-content: center;
13+
height: 100vh;
14+
overflow: hidden;
15+
margin: 0;
16+
}
17+
18+
.toggle-container {
19+
display: flex;
20+
align-items: center;
21+
margin: 10px 0;
22+
width: 200px;
23+
}
24+
25+
.toggle {
26+
visibility: hidden;
27+
}
28+
29+
.label {
30+
background-color: #d0d0d0;
31+
border-radius: 50px;
32+
cursor: pointer;
33+
display: inline-block;
34+
margin: 0 15px 0;
35+
width: 80px;
36+
height: 40px;
37+
position: relative;
38+
}
39+
40+
.toggle:checked + .label {
41+
background-color: #8e44ad;
42+
}
43+
44+
.ball {
45+
background: #fff;
46+
height: 34px;
47+
width: 34px;
48+
border-radius: 50%;
49+
position: absolute;
50+
top: 3px;
51+
left: 3px;
52+
align-items: center;
53+
justify-content: center;
54+
animation: slideOff 0.3s linear forwards;
55+
}
56+
57+
.toggle:checked + .label .ball {
58+
animation: slideOn 0.3s linear forwards;
59+
}
60+
61+
@keyframes slideOn {
62+
0% {
63+
transform: translateX(0) scale(1);
64+
}
65+
50% {
66+
transform: translateX(20px) scale(1.2);
67+
}
68+
100% {
69+
transform: translateX(40px) scale(1);
70+
}
71+
}
72+
73+
@keyframes slideOff {
74+
0% {
75+
transform: translateX(40px) scale(1);
76+
}
77+
50% {
78+
transform: translateX(20px) scale(1.2);
79+
}
80+
100% {
81+
transform: translateX(0) scale(1);
82+
}
83+
}

‎README.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -36,8 +36,8 @@
3636
| 28 | [GitHub Profiles](https://github.com/solygambas/html-css-fifty-projects/tree/master/28-github%20profiles) | [Live Demo](https://codepen.io/solygambas/full/GRjzmVR) |
3737
| 29 | [Double Click Heart](https://github.com/solygambas/html-css-fifty-projects/tree/master/29-double%20click%20heart) | [Live Demo](https://codepen.io/solygambas/full/XWjOaOK) |
3838
| 30 | [Auto Text Effect](https://github.com/solygambas/html-css-fifty-projects/tree/master/30-auto%20text%20effect) | [Live Demo](https://codepen.io/solygambas/full/JjRxrbM) |
39-
| 31 | [Password Generator](https://github.com/solygambas/html-css-fifty-projects/tree/master/31-password%20generator) | [Live Demo](/password-generator/) |
40-
| 32 | [Good Cheap Fast](https://github.com/solygambas/html-css-fifty-projects/tree/master/good-cheap-fast) | [Live Demo](/good-cheap-fast/) |
39+
| 31 | [Password Generator](https://github.com/solygambas/html-css-fifty-projects/tree/master/31-password%20generator) | [Live Demo](https://codepen.io/solygambas/full/rNMRvWb) |
40+
| 32 | [Good Cheap Fast](https://github.com/solygambas/html-css-fifty-projects/tree/master/32-good%20cheap%20fast) | [Live Demo](https://codepen.io/solygambas/full/QWKoxwP) |
4141
| 33 | [Notes App](https://github.com/solygambas/html-css-fifty-projects/tree/master/notes-app) | [Live Demo](/notes-app/) |
4242
| 34 | [Animated Countdown](https://github.com/solygambas/html-css-fifty-projects/tree/master/animated-countdown) | [Live Demo](/animated-countdown/) |
4343
| 35 | [Image Carousel](https://github.com/solygambas/html-css-fifty-projects/tree/master/image-carousel) | [Live Demo](/image-carousel/) |

0 commit comments

Comments
 (0)