Border playground 🛝

Author: hritik5102

14-border-playground/index.html

@@ -63,16 +63,16 @@ <h1>Border Playground</h1>
           </fieldset>
         </div>
         <!-- 2 -->
-        <div class="borderWidth">
-          <p><strong>Border Color</strong></p>
+        <div class="borderSize">
+          <p><strong>Border Width</strong></p>
           <div class="slider">
             <input
               type="range"
               id="volume"
               name="volume"
               min="1"
               max="25"
-              value="1"
+              value="2"
             />
           </div>
         </div>
@@ -109,6 +109,20 @@ <h1>Border Playground</h1>
         ".radio input[type='radio']"
       ); // Select all color radio buttons
 
+      const boxes = document.querySelectorAll(".box"); // Select all boxes
+      const borderSize = document.querySelector(
+        ".borderSize input[type='range']"
+      ); // Select border size slider
+
+      const borderRadius = document.querySelector(
+        ".borderRadius input[type='range']"
+      ); // Select border radius slider
+
+      boxes.forEach((box) => {
+        box.style.borderWidth = `${borderSize.value}px`;
+        box.style.borderRadius = `${borderRadius.value}%`;
+      });
+
       colorRadioButtons.forEach((radioButton) => {
         const imaginaryCircle = radioButton.nextElementSibling; // Get imaginary circle
         const outerRing = imaginaryCircle.nextElementSibling; // Get outer ring circle
@@ -127,9 +141,23 @@ <h1>Border Playground</h1>
             imaginaryCircle.style.outline = "2px solid white"; // Imaginary circle white outline
             outerRing.style.outline = `2px solid ${selectedColor}`; // Outer circle colored outline
             outerRing.style.outlineOffset = "2px"; // Offset colored outline
+
+            boxes.forEach((box) => (box.style.borderColor = selectedColor));
           }
         });
       });
+
+      borderSize.addEventListener("change", (e) => {
+        boxes.forEach((box) => {
+          box.style.borderWidth = `${e.target.value}px`;
+        });
+      });
+
+      borderRadius.addEventListener("change", (e) => {
+        boxes.forEach((box) => {
+          box.style.borderRadius = `${e.target.value}%`;
+        });
+      });
     </script>
   </body>
 </html>

14-border-playground/style.css

@@ -42,24 +42,6 @@ main:last-child {
   justify-content: space-between;
 }
 
-.boxes {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr); /* Creates 3 equal columns */
-  grid-template-rows: repeat(3, 1fr); /* Creates 3 equal rows */
-  gap: 40px; /* Adds space between boxes (optional) */
-  margin-top: 40px;
-}
-
-.box {
-  width: 200px;
-  height: 200px;
-  border: 1px solid red;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  font-weight: 600;
-}
-
 p {
   font-size: 20px;
 }
@@ -152,3 +134,56 @@ input[type="radio"]:checked {
 .slider {
   margin-top: 20px;
 }
+
+.boxes {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr); /* Creates 3 equal columns */
+  grid-template-rows: repeat(3, 1fr); /* Creates 3 equal rows */
+  gap: 40px; /* Adds space between boxes (optional) */
+  margin: 40px 0 0;
+}
+
+.box {
+  width: 200px;
+  height: 200px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-weight: 600;
+}
+
+.one {
+  border-style: solid;
+}
+
+.two {
+  border-style: dotted;
+}
+
+.three {
+  border-style: dashed;
+}
+
+.four {
+  border-style: double;
+}
+
+.five {
+  border-style: groove;
+}
+
+.six {
+  border-style: ridge;
+}
+
+.seven {
+  border-style: inset;
+}
+
+.eight {
+  border-style: outset;
+}
+
+.nine {
+  border-style: dashed solid;
+}