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

JavaScript, Bootstrap, CSS, HTML, JQuery, Web Design

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

August 23, 2019

By Ghanendra Yadav

Bulb On Off JavaScript is a mini project. Create an HTML page with the help of CSS and javascript, when we click on the button then the bulb will be on and when we click on the 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

According to the e-commerce report, there are approximately 70% of online users have left the website because the site lacks ‘trust’ and ‘HTTPS‘. That’s why HTTPS certificates are necessary because a website protected by an SSL certificate displays ‘HTTPS‘ before that website URL in the browser.

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 the bulb status off.

After that using the DOM(document object model) element, we will change the HTML element attributes values, in simple language when the user clicks on the button 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. Know more about web tools.

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. Anyone can find software engineers.