Bulb On Off Both with Text in png

Bulb On Off JavaScript- Mini Project [ Free Source Code ]

Bulb On Off JavaScript is a mini project. 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 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 Off bulb 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 the same thing we will do with the button off.

Javascript Bulb on Off Source Code

<!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>

It’s recommended to use fast hosting to host your website and Always use SSL to secure your website. Nowadays SSL Certificates is very important for the website it also helps to Search engine optimization for Rank our website.

Bulb Off in JavaScript

Bulb Off Initially Stage

Bulbon in JavaScript

Bulb On after Click on Button
Bulb on Off Javascript

Download the mini project in HTML, CSS, and JavaScript Free. The bulb on Off Javascript Images, Bulb On-Off Images, with source code.