Merge pull request #1 from tejas0207/tejas0207-patch-1

Create Light on and off
Tejas1510 · Oct 1, 2020 · 0faeea2 · 0faeea2
2 parents b8d3e33 + f554040
commit 0faeea2
Showing 1 changed file with 151 additions and 0 deletions.
diff --git a/Light on and off b/Light on and off
@@ -0,0 +1,151 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title></title>
+ <link href="https://fonts.googleapis.com/css?family=Josefin+Sans&display=swap" rel="stylesheet">
+ <style>
+  *{ margin: 0; padding:0; font-family: 'Josefin Sans', sans-serif;}
+
+  h1{
+   text-align: center;
+   margin-top: 40px;
+   text-transform: uppercase;
+  }
+
+  .lightapp{
+   width: 100%;
+   height: 80vh;
+   display: flex;
+   justify-content: center;
+   align-items: center;
+  }
+
+  figcaption{
+   text-align: center;
+  }
+
+  .onoffbtn{
+   width: 100%;
+   margin-top: -50px;
+   display: flex;
+   justify-content: center;
+   align-items: center;
+  }
+
+  .switch {
+    position: relative;
+    display: inline-block;
+    width: 100px;
+    height: 50px;
+  }
+
+  .switch input { 
+    opacity: 0;
+    width: 0;
+    height: 0;
+  }
+
+  .slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: brown;
+    -webkit-transition: .4s;
+    transition: .4s;
+  }
+
+  .slider:before {
+    position: absolute;
+    content: "";
+    height: 41px;
+    width: 40px;
+    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(40px);
+    -ms-transform: translateX(40px);
+    transform: translateX(40px);
+  }
+ </style>
+</head>
+<body>
+
+<h1 id="bulbdata"> Lights ON OFF </h1>
+<br>
+<main class="lightapp">
+ <figure class="lightstyle">
+  <img src="lightoff.jpg" id="lightid1" >
+  <figcaption>
+   <p> Light ON OFF </p>
+  </figcaption>
+ </figure>
+ <figure class="lightstyle">
+  <img src="lightoff.jpg" id="lightid2">
+  <figcaption>
+   <p> Light ON OFF </p>
+  </figcaption>
+ </figure>
+ <figure class="lightstyle">
+  <img src="lightoff.jpg" id="lightid3">
+  <figcaption>
+   <p> Light ON OFF </p>
+  </figcaption>
+ </figure>
+ <figure class="lightstyle">
+  <img src="lightoff.jpg" id="lightid4">
+  <figcaption>
+   <p> Light ON OFF </p>
+  </figcaption>
+ </figure>
+ <figure class="lightstyle">
+  <img src="lightoff.jpg" id="lightid5">
+  <figcaption>
+   <p> Light ON OFF </p>
+  </figcaption>
+ </figure>
+</main>
+<div class="onoffbtn">
+ <label class="switch">
+  <input type="checkbox"> <span class="slider" 
+  onclick="tubelight()" > </span>
+ </label>
+</div>
+
+<script>
+ const tubelight = () =>{
+
+  let btext = document.getElementById('bulbdata');
+  for(x=1; x<6; x++){
+   let bid =document.getElementById('lightid'.concat(x));
+   console.log(bid.src);
+
+   if(bid.src.match('lighton')){
+    bid.src="lightoff.jpg";
+    btext.innerHTML = "Light OFF";
+    btext.style.color = "black";
+   }else{
+    bid.src="lighton.jpg";
+    btext.innerHTML = "Light ON";
+    btext.style.color = "red";
+   }
+  }
+ }
+</script>
+</body>
+</html>