Bulb On Off in JavaScript – Mini Projects | Web Designing

0
58
Bulb On Off Both with Text in png

Create an HTML page with the help of CSS and javascript, when we click to on button then the bulb will be on and when we click on button off then the bulb will be off.

We can design and implement the mini-project with the help of the javascript code.

Required skills: for this mini-project, You need basic knowledge of HTML, CSS(or Bootstrap), and Javascript. If you are a blogger then it’s very easy for you.

Solution Bulb On Off in javaScript

First, create a folder and create a new file in HTML, for this small mini level project we just need only one HTML file with .HTML extension. and download the bulb On and bulb Off images

To turn the bulb on or off, first, we need to create an HTML page with CSS(CSS is only for the buttons and images) and apply the javascript code to change the bulb images. We have two images bulb on and bulb off, initially, we are keeping bulb status off.

After that using the DOM(document object model) element, we will change the HTML elements attributes values, in simple language when user click to the button on then with the help of the javascript we will change the IMG(image) tag SRC(Source) with another image, and same thing we will do with the button off.

Source Code for the Bulb On Off

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Bulb On Off</title>
      <style>
		 h1{
		 text-align: center;
		 }
         #bulb{
         width:100%;
         height:auto;
         max-width:400px;
         max-height: 500px;
         padding-top:20px;
         display: block;
         margin-left: auto;
         margin-right: auto;
         width: 50%;
         }
         .myButton {
         border-radius:15px;
         border:1px solid #030721;
         display:inline-block;
         cursor:pointer;
         background: #006400;
         color:#ffffff;
         font-family:Georgia;
         font-size:32px;
         font-weight:bold;
         padding:10px 40px;
         text-decoration:none;
         text-shadow:2px 2px 7px #283466;
         margin-left: 440px;
         margin-top: 50px;  
         }
         .myButton:hover {
         background-color:#00ff00;
         }
         .myButton:active {
         position:relative;
         top:1px;
         }
         .myButton1 {
         border-radius:15px;
         border:1px solid #030721;
         display:inline-block;
         cursor:pointer;
         background: #8b0000;
         color:#ffffff;
         font-family:Georgia;
         font-size:32px;
         font-weight:bold;
         padding:10px 40px;
         text-decoration:none;
         text-shadow:2px 2px 7px #283466;
         margin-left: 50px;
         margin-top: 50px;
         }
         .myButton1:hover {
         background-color:red;
         }
         .myButton1:active {
         position:relative;
         top:1px;
         }
      </style>
      <script>
         function bulbon()
         {
         document.getElementById("bulb").src="bulb-on.png";
         document.getElementById("bulbstatus").element.innerHTML = "Bulb in On Now!";
         }

         function bulboff()
         {
         document.getElementById("bulb").src="bulb-off.png";
         }
      </script>
   </head>
   <body>
      <div>
		 <h1 id="bulbstatus">Bulb On Off in JavaScript</h1>
         <img id="bulb" src="bulb-off.png">
         <input type="button" class="myButton" value="Bulb On" onclick="bulbon()">
         <input type="button" class="myButton1" value="Bulb Off" onclick="bulboff()">
      </div>
   </body>
</html>

Bulb Off in JavaScript

Bulb Off Initially Stage

Bulb On in JavaScript

Bulb On after Click on Button

Download the mini project in HTML, CSS, and JavaScript Free.

LEAVE A REPLY

Please enter your comment!
Please enter your name here