Switch on and switch off light in webpage using jQuery



Live preview:


its too dark here ! Switch on the light



Hi everyone and do you know how to code a bulb that you can glow and disable the glow of the bulb. Here I only used jQuery and css to glow the bulb and turn it off. I also used some JavaScript code to display a message for the the glow effect and else effect of the bulb. The switch or the button used here is connected to the jQuery to turn on the bulb and it turn off the bulb. The jQuery used here is connected to the CSS using the property toggleClass . I put a limit to the glow of the light using the division tag.

Do you want about the triple equal to (===) you that  Iused in the do you know for what purpose the triple equal to is used for. Here is the answer.

Strict equality (===) means values which we are comparing must have the same type. This means"2" will not be equal to 2 ("2"===2 it will return false) Type converting equality (==) means automatically it will covert the variable to value irrespective of data type; either it is a string or a number.


Dont forget to turn the light off because energy energy is precious 😅😅

See the following video to understand the working of the glowing bulb.

Video Preview:




As in the video given above, we can see the working of the bulb. The glowing effect and turning off of glowing effect of the bulb is shown in the above video.


The code of the given program is given below

Code:


<html>
<head>
<title>code by cs psyco </title>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<style>


.bulb2
{
background-color:#a6a6a6;
}

.bulb1
{
background-color:#ffff80;
border:2px solid black;

height:150px;
}
#bulb1
{
border:2px solid black;

height:150px;
}

img
{
width:100px;
height:150px;
margin-top:2%;

}


</style>

<script>
$(document).ready(function(){
$("button").click(function(){
$("#bulb1").toggleClass("bulb1");



});
});


function my() {
  var x = document.getElementById("myd");
  if (x.innerHTML === "switch off the light to save energy !") {
    x.innerHTML = "its too dark here ! Switch on the light";
  } else {
    x.innerHTML = "switch off the light to save energy !";
  }
}


</script>
</head>

<body>
<br />
<br />
<div class="bulb2" id="bulb1">
<center>

<div id="myd">
its too dark here ! Switch on the light
</div>
</center>
<div class="separator" style="clear: both; text-align: center;">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAecbaiH8_Z5Vq15xZDkz2iSL39szWT5eNz5wphnUKZoNGy4-KpJYDP319lM1uN_i-pujqqGLPtv9P1lLtt4YqGFVYx5RP_RQuMVUuofnHwRzaPek4LhwoHXb3sm1vxTICILCq7RsVQ85x/s320/light-bulb-png-15-light-bulb-icon-256.png" /></div>
</div>
<br />
<center>
<br />
<button onclick="my()">on/off</button>
</center>
</div>
</body>
</html>



Thank You...Stay Updated

Comments

Post a Comment

Popular posts from this blog

Node.js Cheat Sheet

Image
To start a new node project, type  C:\Users\jinoy\OneDrive\Desktop\MERN>npm init -y      The basic syntax of calling a function in node.js with express is : const   functionname  = ()  =>  { console . log ( "hello world" ); } functionname (); To call a function after every 5 seconds : setInterval (()  =>  {      console . log ( "hello" ); }, 5000  ); To call a function only once after 4 second : setTimeout (() => { console . log ( "test" ); }, 4000 ); To run a script.js file on terminal, type : C:\Users\jinoy\OneDrive\Desktop\MERN>node script.js  OR C:\Users\jinoy\OneDrive\Desktop\MERN>node script To stop a function that is executing on every interval( time to call function again) : const   interval  =  setInterval (()  =>  {      console . log ( "hello" ); }, 1000  ); setTimeout (() => {      clearInterva...
Read more

Codeigniter ! Simple But Powerful

Image
CodeIgniter is a powerful PHP framework with a very small footprint, built for developers who need a simple and elegant toolkit to create full-featured web applications. It is the second largest php framework for website development (first-Laravel). Due to its simplicity, it is the most used framework ever than laravel. Actually these frameworks are only used for developing large scale website. The important thing about this framework is that it is using MVC principle . A MVC or Model View Control framework has a controller that controls all the pages in the website. There can be any number of controller created in codeigniter. The orginal webpages or the contents are placed in the folder named view .  Note : Don't touch the forder named system because it is the soul of the codeigniter Next ⇒
Read more

Enhancing Supply Chain Security and Cloud-Native Development with Chainguard

Image
In the ever-evolving landscape of software development, ensuring supply chain security and embracing cloud-native practices are paramount. One solution that stands out in addressing these concerns is Chainguard, a platform providing secure images for development environments. Recently, I had the opportunity to explore Chainguard's capabilities firsthand through a sponsored video collaboration. The video delved into the seamless integration of Chainguard images into various development workflows, highlighting the significant advantages they offer in terms of security and efficiency. From hosting images on platforms like ECS, Apprunner, and Google Cloud Run to leveraging DockerHub for streamlined deployment, Chainguard simplifies the process while enhancing security measures. What sets Chainguard apart is its proactive approach to security. Images are rebuilt daily and frequently patched, minimizing vulnerabilities and mitigating risks associated with outdated dependencies. This ...
Read more