add final styling touches

lynndz3 · Nov 8, 2022 · 8e3f8e9 · 8e3f8e9
1 parent 7d139bd
commit 8e3f8e9
Show file tree

Hide file tree

Showing 3 changed files with 138 additions and 30 deletions.
diff --git a/images/rainbow.png b/images/rainbow.png
diff --git a/index.html b/index.html
@@ -13,19 +13,24 @@ <h1>Etch-A-Sketch</h1>
     <div class="container"></div>
     <div class="slidecontainer">
         <p><span id="grid-size"></span></p>
-        <input type="range" min="2" max="100" value="16" class="slider" id="myRange">
+        <input type="range" min="2" max="100" value="16" id="myRange">
       </div>
-    <button onclick="clearContents()">Clear</button>
 
-      <button>
-    <label for="colorpicker">Color Picker:</label>
-    <input type='color' id="colorpicker" value="#000000"></button>
-    <span>OR</span>
-    <button id="rainbow-mode">Rainbow!</button>
+      <span class="options">
+    <div class='color-picker-container'>
+    <label for="colorpicker" style="text-align: -webkit-right;">Pick any Color:</label>
+    <input type='color' id="colorpicker" value="#000000"></div>
+    <!-- <span class="or">OR</span> -->
+    <div class="rainbow-toggle">
+    <label class="switch">
+        <input type="checkbox" id="rainbow-mode">
+        <span class="slider round"></span>
+      </label><span>Rainbow Mode!</span></div>
+    </span>
+    <button onclick="clearContents()">Clear</button>
 
     <script>
         const container = document.querySelector('.container');
-
         const cells = document.getElementsByClassName('cells');
 
         makeRows(16, 16);
@@ -48,14 +53,20 @@ <h1>Etch-A-Sketch</h1>
         });
 
         let rainbowOption = document.querySelector('#rainbow-mode');
+
 
         rainbowOption.addEventListener("click", function() {
-            console.log(this);
+            console.log(rainbowOption.checked) });
+
+            /*console.log(this);
             if (this.classList.contains("active") == true) {
                 this.classList.remove("active");
+                document.querySelector('#colorpicker').disabled = false;
+
             }
             else this.className = "active";
-        });
+            document.querySelector('#colorpicker').disabled = true;
+        });*/
 
         let mouseDown = false;
 
@@ -68,7 +79,7 @@ <h1>Etch-A-Sketch</h1>
                 if (mouseDown) {
                     if (event.target.className === "cells") {
                         console.log(rainbowOption.classList.contains("active"));
-                        if (rainbowOption.classList.contains("active")) {
+                        if (rainbowOption.checked == true) {
                             event.target.style.backgroundColor =  "#" + Math.floor(Math.random()*16777215).toString(16);
                         }
                         else {

diff --git a/styles.css b/styles.css
@@ -7,6 +7,8 @@ body {
     display: flex;
     flex-direction: column;
     align-items: center;
+    font-family: 'Courier New', Courier, monospace;
+    background-color: #ebf2f7;
 }
 
 .container {
@@ -15,34 +17,129 @@ body {
     grid-template-columns: repeat(var(--grid-rows), 1fr);
     height: 500px;
     width: 500px; 
-    border: 0.5px solid black;
+    border: 2px solid black;
+    background-color: white;
 }
 
 .slidecontainer {
-    width: 500px; /* Width of the outside container */
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  align-items: center;
+  }
+
+  .color-picker-container {
+    display: flex;
+    align-items: center;
+    gap: 10%;
+  }
+
+  .or {
+    margin: 8%;
+  }
+
+  #grid-size {
+    font-size: large;
+    font-family: ui-rounded;
+  }
+
+  #myRange {
+    margin-bottom: 5%;
   }
 
   button {
-    background-color: white;
-    color: black;
+    display: inline-block;
+    padding: 1%;
+    border-radius: 10rem;
+    color: #fff;
+    text-transform: uppercase;
+    font-size: 0.7rem;
+    letter-spacing: .15rem;
+    background-color: rgb(234, 123, 123);
   }
 
-  .active {
-    background-color: #666;
-    color: white;
+.options {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+  margin: 2%;
+  gap: 20%;
+}
+
+  /* The switch - the box around the slider */
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 45px;
+  height: 19px;
+}
+
+.disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
   }
 
+/* Hide default HTML checkbox */
+.switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+/* The slider */
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+.slider:before {
+  position: absolute;
+  content: "";
+  height: 15px;
+  width: 15px;
+  left: 2px;
+  bottom: 2px;
+  background-color: rgb(1, 0, 0);
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+.rainbow-toggle {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 5px;
+}
+
+input:checked + .slider {
+  background-image: url("images/rainbow.png");
+}
+
+input:focus + .slider {
+  box-shadow: 0 0 1px #2196F3;
+}
+
+input:checked + .slider:before {
+  -webkit-transform: translateX(26px);
+  -ms-transform: translateX(26px);
+  transform: translateX(26px);
+}
+
+/* Rounded sliders */
+.slider.round {
+  border-radius: 34px;
+}
+
+.slider.round:before {
+  border-radius: 50%;
+}
 
 
-  /*
-  input[type="radio"] {
-    display: none;
-    &:checked + label {
-      span { transform: scale(1.25); }
-      @each $name, $value in $colors {
-        .#{$name} {
-          border: 2px solid darken($value, 25%);
-        }
-      } // !@each
-    } // !&:checked + label
-  }