DEV: prueba de switch button

static/css/app.css

@@ -1,3 +1,5 @@
+@import "switch.css";
+
 html,
 body {
     margin: 0;
@@ -212,4 +214,4 @@ button{
 
 #message-template{
     display: none;
-}
+}

static/css/switch.css

@@ -0,0 +1,58 @@
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 60px;
+  height: 34px;
+}
+
+.switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.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: 26px;
+  width: 26px;
+  left: 4px;
+  bottom: 4px;
+  background-color: white;
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+input:checked+.slider {
+  background-color: #2196F3;
+}
+
+input:focus+.slider {
+  box-shadow: 0 0 1px #2196F3;
+}
+
+input:checked+.slider:before {
+  -webkit-transform: translateX(26px);
+  -ms-transform: translateX(26px);
+  transform: translateX(26px);
+}
+
+.slider.round {
+  border-radius: 34px;
+}
+
+.slider.round:before {
+  border-radius: 50%;
+}

static/js/windowHandler.js

@@ -36,10 +36,19 @@ class WindowHandler{
     }
 
     limpiarChat(){
+      // Hola
         $("#input-text").val("");
         this.recalcularTextarea();
         $("#chat").html("");
     }
+    toggleSwitch() {
+      let checkBox = document.querySelector(".switch input[type='checkbox']");
+      if (checkBox.checked) {
+        console.log("Switch is turned on.");
+      } else {
+        console.log("Switch is turned off.");
+      }
+    }
 
     manejadorEnviar(){
         let mensaje = $("#input-text").val();
@@ -154,4 +163,4 @@ class WindowHandler{
 
 
 
-}
+}

static/main.html

@@ -18,6 +18,10 @@
     <div class='input-box'>
       <textarea class='input-text' id='input-text' placeholder="Type something" type="text" autofocus=""></textarea>
       <button class='input-send' id='input-send' ></button>
+      <label class="switch">
+        <input type="checkbox" onchange="toggleSwitch()">
+        <span class="slider round"></span>
+      </label>
       <button class='input-delete' id='input-delete' ></button>
     </div>
   </div>