Light ON and OF using a simple web page


            This is simple project describes the use of the CSS and jQuery by an simple project here we use the CSS filter : grayscale to turn off the light following video is useful to undestand hoe to works

Following work is divided and implemented in few steps

-> Basic html page with buttons to ON and OFF and light image
                
<html>
  <head>
    <title></title>
  </head>
  <body>
    <button >turn off the light</button>
    <button >turn on the light</button>
    <div >
      <img src="new.png">
    </div>
  </body>
</html>

-> Add some CSS to buttons turn OFF the light ( Here we are using class names to apply Style )
                
<html>
  <head>
    <title></title>
  </head>
  <style type="text/css">
    body{
      background: url(background.jpg);
    }
    .grayscale{
      -webkit-filter: grayscale( 100% );
    }
    .right{
      float: right;
      
    }
    button{
      font-size: 20px;
      background-color: black;
      color: white;
    }
  </style>
  <body>
    <button class="off">turn off the light</button>
    <button class="right">turn on the light</button>
    <div class="light grayscale">
      <img src="new.png">
    </div>
  </body>
</html>

-> Now we add jQuery to ON and OFF the light ( add or remove the grayscale class )
https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js is the jQuery cdn link you can download the jQuery from the original site or use this link but you need to connect to internet to use this link ( otherwise jQuery wont work ) 
                
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script type="text/javascript">
    //using jquery makes the work easy compared to javascript
    //code to remove and add the grayscale class
    $('.right').click(function(){
      $('div').removeClass('grayscale');
    });
    $('.off').click(function(){
      $('div').addClass('grayscale');
    });
  </script>

The whole code assembled 
                
  <html>
  <head>
    <title></title>
  </head>
  <style type="text/css">
    body{
      background: url(background.jpg);
    }
    .grayscale{
      -webkit-filter: grayscale( 100% );
    }
    .right{
      float: right;
      
    }
    button{
      font-size: 20px;
      background-color: black;
      color: white;
    }
  </style>
  <body>
    <button class="off">turn off the light</button>
    <button class="right">turn on the light</button>
    <div class="light grayscale">
      <img src="new.png">
    </div>
  </body>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script type="text/javascript">
    //to write the code to remove and add the grayscale class
    $('.right').click(function(){
      $('div').removeClass('grayscale');//using jquery makes the work easy compared to javascript
    });
    $('.off').click(function(){
      $('div').addClass('grayscale');//using jquery makes the work easy compared to javascript
    });
  </script>
</html>
You can access files here : Get them now