Make Light Bulb Using HTML,CSS,JS [SourceCode]

Hi Readers,
here in this article i am sharing a code snippet with you by which you can create dynamic light bulb with html css and operate it using Javascrpit,
its easy enough lets get start,
Here is HTML CODE

<!DOCTYPE html>
<html>
 <head>
  <title>Light Bulb</title>
 </head>
 <body>
 <button onclick="toggleBulb()">Bulb Toggle</button>
  <div id="bulb">
   <div id="circle-on"></div>
   <div id="circle-off"></div>
   <div id="cylender"></div>
  </div>
 </body>
</html>

And This is CSS CODE

   #bulb{
   position: relative;
   height: 400px;
   margin: 10% 30%;
   }
   #circle-on{
   height: 300px;
   width: 300px;
   box-shadow: 0 0 140px #ffff00;
   border-radius: 50%;
   background: #cccc33;
   display: none;
   }
   #circle-on:after{
   content: '';
   display: block;
   position: absolute;
   bottom: 110px;
   left: 60px;
   border-radius: 0px 0px 50px 50px;
   height: 20px;
   width: 180px;
   background: lightgrey;
   }
   #circle-off{
   height: 300px;
   width: 300px;
   box-shadow: 0 0 130px grey;
   border-radius: 50%;
   display: block;
   }
   #circle-off:after{
   content: '';
   display: block;
   position: absolute;
   bottom: 110px;
   left: 60px;
   border-radius: 0px 0px 50px 50px;
   height: 20px;
   width: 180px;
   background: lightgrey;
   }
   #cylender{
   height: 110px;
   width: 150px;
   background: url(jojo.png);
   position: absolute;
   bottom: 0;
   left: 75px;
   border-radius: 0px 0px 30px 30px;
   }
   #cylender:after{
   content: '';
   display: block;
   background: grey;
   height: 15px;
   width: 30px;
   position: absolute;
   bottom: -10px;
   left: 61px;
   border-radius: 10px 10px 50px 50px;
   }

and Javascript

   function toggleBulb()
   {
    var on = document.getElementById('circle-on').style;
    var off = document.getElementById('circle-off').style;
    if(on.display == 'none' && off.display == 'block')
    {
     on.display = 'block';
     off.display = 'none';
     document.body.style.background = "#000";
    }else{
     on.display = 'none';
     off.display = 'block';
     document.body.style.background = "#fff";
    }
   }

Final Look At Complete Code
Download Bulb Strip Image ->

<!DOCTYPE html>
<html>
 <head>
  <title>Light Bulb</title>
  <style>
   #bulb{
   position: relative;
   height: 400px;
   margin: 10% 30%;
   }
   #circle-on{
   height: 300px;
   width: 300px;
   box-shadow: 0 0 140px #ffff00;
   border-radius: 50%;
   background: #cccc33;
   display: none;
   }
   #circle-on:after{
   content: '';
   display: block;
   position: absolute;
   bottom: 110px;
   left: 60px;
   border-radius: 0px 0px 50px 50px;
   height: 20px;
   width: 180px;
   background: lightgrey;
   }
   #circle-off{
   height: 300px;
   width: 300px;
   box-shadow: 0 0 130px grey;
   border-radius: 50%;
   display: block;
   }
   #circle-off:after{
   content: '';
   display: block;
   position: absolute;
   bottom: 110px;
   left: 60px;
   border-radius: 0px 0px 50px 50px;
   height: 20px;
   width: 180px;
   background: lightgrey;
   }
   #cylender{
   height: 110px;
   width: 150px;
   background: url(jojo.png);
   position: absolute;
   bottom: 0;
   left: 75px;
   border-radius: 0px 0px 30px 30px;
   }
   #cylender:after{
   content: '';
   display: block;
   background: grey;
   height: 15px;
   width: 30px;
   position: absolute;
   bottom: -10px;
   left: 61px;
   border-radius: 10px 10px 50px 50px;
   }
   
  </style>
 </head>
 <body>
 <button onclick="toggleBulb()">Bulb Toggle</button>
  <div id="bulb">
   <div id="circle-on"></div>
   <div id="circle-off"></div>
   <div id="cylender"></div>
  </div>
  <script>
   function toggleBulb()
   {
    var on = document.getElementById('circle-on').style;
    var off = document.getElementById('circle-off').style;
    if(on.display == 'none' && off.display == 'block')
    {
     on.display = 'block';
     off.display = 'none';
     document.body.style.background = "#000";
    }else{
     on.display = 'none';
     off.display = 'block';
     document.body.style.background = "#fff";
    }
   }
  </script>
 </body>
</html>

Share with your Friends and if you have any suggestion please comment below for improvements. Thanks

Feeds