Skip to content

Commit 8528746

Browse files
hritik5102hritik5102
committed
Border playground 🛝
1 parent 59fa3b3 commit 8528746

File tree

2 files changed

+188
-17
lines changed

2 files changed

+188
-17
lines changed

‎14-border-playground/index.html

Lines changed: 95 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -14,30 +14,80 @@ <h1>Border Playground</h1>
1414
<section class="selection">
1515
<!-- 1 -->
1616
<div class="borderColor">
17-
<p>Border Color</p>
18-
<div class="colors">
19-
<input type="radio" name="red" id="red" />
20-
<input type="radio" name="orange" id="orange" />
21-
<input type="radio" name="yellow" id="yellow" />
22-
<input type="radio" name="cyan" id="cyan" />
23-
<input type="radio" name="blue" id="blue" />
24-
<input type="radio" name="purple" id="purple" />
25-
<input type="radio" name="pink" id="pink" />
26-
<input type="radio" name="gray" id="gray" />
27-
</div>
17+
<p><strong>Border Color</strong></p>
18+
<fieldset>
19+
<div class="colors">
20+
<div class="radio">
21+
<label for="red">red</label>
22+
<input type="radio" name="color" id="red" />
23+
<div class="imaginary-circle"></div>
24+
<div class="outer-ring"></div>
25+
</div>
26+
<div class="radio">
27+
<label for="green">green</label>
28+
<input type="radio" name="color" id="green" />
29+
<div class="imaginary-circle"></div>
30+
<div class="outer-ring"></div>
31+
</div>
32+
<div class="radio">
33+
<label for="blue">blue</label>
34+
<input type="radio" name="color" id="blue" />
35+
<div class="imaginary-circle"></div>
36+
<div class="outer-ring"></div>
37+
</div>
38+
<div class="radio">
39+
<label for="orange">orange</label>
40+
<input type="radio" name="color" id="orange" />
41+
<div class="imaginary-circle"></div>
42+
<div class="outer-ring"></div>
43+
</div>
44+
<div class="radio">
45+
<label for="hotpink">hotpink</label>
46+
<input type="radio" name="color" id="hotpink" />
47+
<div class="imaginary-circle"></div>
48+
<div class="outer-ring"></div>
49+
</div>
50+
<div class="radio">
51+
<label for="purple">purple</label>
52+
<input type="radio" name="color" id="purple" />
53+
<div class="imaginary-circle"></div>
54+
<div class="outer-ring"></div>
55+
</div>
56+
<div class="radio">
57+
<label for="brown">brown</label>
58+
<input type="radio" name="color" id="brown" />
59+
<div class="imaginary-circle"></div>
60+
<div class="outer-ring"></div>
61+
</div>
62+
</div>
63+
</fieldset>
2864
</div>
2965
<!-- 2 -->
3066
<div class="borderWidth">
31-
<p>Border Color</p>
32-
<div>
33-
<input type="range" id="volume" name="volume" min="1" max="25" />
67+
<p><strong>Border Color</strong></p>
68+
<div class="slider">
69+
<input
70+
type="range"
71+
id="volume"
72+
name="volume"
73+
min="1"
74+
max="25"
75+
value="1"
76+
/>
3477
</div>
3578
</div>
3679
<!-- 3 -->
3780
<div class="borderRadius">
38-
<p>Border Radius</p>
39-
<div>
40-
<input type="range" id="volume" name="volume" min="0" max="50" />
81+
<p><strong>Border Radius</strong></p>
82+
<div class="slider">
83+
<input
84+
type="range"
85+
id="volume"
86+
name="volume"
87+
min="0"
88+
max="50"
89+
value="1"
90+
/>
4191
</div>
4292
</div>
4393
</section>
@@ -53,5 +103,33 @@ <h1>Border Playground</h1>
53103
<div class="box nine">Mixed (Dashed Solid)</div>
54104
</section>
55105
</main>
106+
107+
<script>
108+
const colorRadioButtons = document.querySelectorAll(
109+
".radio input[type='radio']"
110+
); // Select all color radio buttons
111+
112+
colorRadioButtons.forEach((radioButton) => {
113+
const imaginaryCircle = radioButton.nextElementSibling; // Get imaginary circle
114+
const outerRing = imaginaryCircle.nextElementSibling; // Get outer ring circle
115+
116+
radioButton.addEventListener("change", () => {
117+
if (radioButton.checked) {
118+
colorRadioButtons.forEach((radioButton) => {
119+
// Reset all outline
120+
const imaginaryCircle = radioButton.nextElementSibling; // Get imaginary circle
121+
const outerRing = imaginaryCircle.nextElementSibling; // Get outer ring
122+
imaginaryCircle.style = "";
123+
outerRing.style = "";
124+
});
125+
126+
const selectedColor = radioButton.id; // Get selected color from id
127+
imaginaryCircle.style.outline = "2px solid white"; // Imaginary circle white outline
128+
outerRing.style.outline = `2px solid ${selectedColor}`; // Outer circle colored outline
129+
outerRing.style.outlineOffset = "2px"; // Offset colored outline
130+
}
131+
});
132+
});
133+
</script>
56134
</body>
57135
</html>

‎14-border-playground/style.css

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -59,3 +59,96 @@ main:last-child {
5959
align-items: center;
6060
font-weight: 600;
6161
}
62+
63+
p {
64+
font-size: 20px;
65+
}
66+
67+
fieldset {
68+
border: 0;
69+
}
70+
71+
legend {
72+
font-size: 20px;
73+
font-weight: 600;
74+
}
75+
76+
.colors {
77+
display: flex;
78+
gap: 20px;
79+
}
80+
81+
.radio {
82+
margin-top: 20px;
83+
position: relative;
84+
}
85+
86+
label {
87+
display: block;
88+
width: 1px;
89+
height: 1px;
90+
overflow: hidden;
91+
}
92+
93+
input[type="radio"] {
94+
position: relative;
95+
z-index: 3;
96+
width: 20px;
97+
height: 20px;
98+
opacity: 0;
99+
cursor: pointer;
100+
}
101+
102+
.imaginary-circle {
103+
width: 20px;
104+
height: 20px;
105+
border-radius: 50%;
106+
position: absolute;
107+
top: 1px;
108+
z-index: 2;
109+
}
110+
111+
input[id="red"] + .imaginary-circle {
112+
background-color: red;
113+
}
114+
115+
input[id="green"] + .imaginary-circle {
116+
background-color: green;
117+
}
118+
119+
input[id="blue"] + .imaginary-circle {
120+
background-color: blue;
121+
}
122+
123+
input[id="orange"] + .imaginary-circle {
124+
background-color: orange;
125+
}
126+
127+
input[id="hotpink"] + .imaginary-circle {
128+
background-color: hotpink;
129+
}
130+
131+
input[id="purple"] + .imaginary-circle {
132+
background-color: purple;
133+
}
134+
135+
input[id="brown"] + .imaginary-circle {
136+
background-color: brown;
137+
}
138+
139+
input[type="radio"]:checked {
140+
box-shadow: 0 0 0 3px black;
141+
}
142+
143+
.outer-ring {
144+
position: absolute;
145+
top: 1px;
146+
width: 20px;
147+
height: 20px;
148+
border-radius: 50%;
149+
z-index: 0;
150+
}
151+
152+
.slider {
153+
margin-top: 20px;
154+
}

0 commit comments

Comments
 (0)