Dear friend. In this article we will tell you how to make traffic lights using html css and javascript. If you like this article of ours, then click on the video given below to watch the video related to this article and also subscribe to our channel.
So let’s know how to make traffic lights using html css and javascript.
First of all, you have to download a code editor in which we can write our code, we are telling you the names of some code editors, Visual Studio Code, this is the most used and most people use it because some of its features are very Works easily in writing our code quickly and it has built-in tags and properties, with the help of which we make our code very easy.
Traffic Light
The web made almost everything possible. The rise of JavaScript as the programming language of the web enables us to view our code live and interact with web content. This article intends to use this important tool to create a traffic lights that runs on the web along with other web-based technologies such as HTML, CSS.
Prerequisites
The reader should have basic knowledge of:
- JavaScript
- HTML
- CSS
Have a text editor of his or her choice, though I recommended vscode
Internet connectivity
Objectives
At the end of this tutorial, readers should be able to:
Understand Javascript’s built-in setInterval function
Know how to use the JavaScript Date class
Know how to create a function
Know how to invoke or call a function
Know what variable scope is
Understand how ternary operators work
Definition of terms
HTML is a markup language that gives the web content its structure. It is also referred to as the skeleton of the web. HTML is an abbreviation meaning Hypertext Markup Language. CSS is an abbreviation meaning Cascading Style Sheet. It is the tool used to add designs like colors to our web content. It is the design, style, and formatting tool of web pages.
JavaScript is the scripting language of the web and it is also a lightweight interpreted language that compiles at runtime. It is the language that adds interactivity to the web content hence it is widely in use.
HTML for Traffic Lights
Now open your vs code editor and go to the right top section and click on file and select new file then save filename.html after this press ctrl+1 then html syntax generate automatically on your editor. This feature inbuild only visual code editor so i suggested you download this editor and make projects easily because it is a best code editor software. And this design for traffic lights project make a fast with visual studio code editor.
Now we will learn how to write html for traffic lights. So let’s know that first you have to go to the body tag, after that you will take the div tag and together with the class whose name is to be named motor. Then after that we will take div tag again and we will name its class as stand. Again we will take div tag and name its class as bottom stand after that we will take div tag again and we will name its class as petal1. Again we will take div tag and name its class as Pankhdi 2, then again take div tag and name its class as Pankdi 3. Now in the last we will take the div tag and name its class as center.
CSS for Traffic Lights design
Now we will design the stand fan using css. So let’s design, first of all you have to know how we write css. We write css in 3 ways first we can write inline and second we can write it internal and third we can write it external so that we have to create new css file but in this article we have used internal css so that We will not have to create css file separately and we can work inside the same file.
First of all we have to go inside the head section and going inside we have to take style tag then we will take * tag and by applying curly braces open and close in it we will keep margin as 0 and padding as 0. And will keep its box sizing border box. Then we will take the body tag and flex the display in it, then we will center the justify content, after that we will center the align items and also make the background color rgb.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: rgb(22, 22, 22);
}
In this tutorial, we will use these tools to build a digital clock that displays the current time, day, month, and year.
Source Code..
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Traffic Signal Created by Technical Nizami Network</title>
<style>
body{
background-color: rgb(49, 6, 119);
}
.board{
width: 200px;
height: 385px;
background-color: rgb(34, 33, 33);
box-shadow: 3px 3px 8px black;
}
.box-one{
width: 100px;
height: 100px;
border: 1px solid rgb(214, 12, 12);
border-radius: 50%;
box-shadow: inset 2px 3px 6px black;
background-color: rgb(141, 138, 134);
}
.one-light{
width: 99px;
height: 99px;
background-color: rgb(27, 253, 27);
border-radius: 50%;
box-shadow: inset 2px 3px 6px black;
display: none;
}
.box-two{
width: 100px;
height: 100px;
border: 1px solid rgb(250, 15, 15);
border-radius: 50%;
box-shadow: inset 2px 3px 6px black;
background-color: rgb(141, 138, 134);
}
.two-light{
width: 99px;
height: 99px;
background-color: rgb(255, 235, 58);
border-radius: 50%;
box-shadow: inset 2px 3px 6px black;
display: none;
}
.box-three{
width: 100px;
height: 100px;
border: 1px solid rgb(248, 6, 6);
border-radius: 50%;
box-shadow: inset 2px 3px 6px black;
background-color: rgb(141, 138, 134);
}
.three-light{
width: 99px;
height: 99px;
background-color: rgb(247, 29, 29);
border-radius: 50%;
box-shadow: inset 2px 3px 6px black;
display: none;
}
.stand{
width: 60px;
height: 130px;
background-color: rgb(34, 33, 33);
}
.stand-two{
width: 150px;
height: 25px;
background-color: rgb(34, 33, 33);
border-radius: 20px 20px 0px 0px;
}
button{
width: 70px;
height: 30px;
background-color: teal;
color: wheat;
margin-top: 30px;
border-radius: 5px;
border: 1px solid rgb(51, 50, 49);
}
button:hover{
background-color: green;
transition-duration: 1s;
}
.btn{
position: absolute;
top: 50px;
left: 100px;
}
</style>
</head>
<body>
<center><br>
<div><br>
<div><div id="two"></div></div><br>
<div><div id="three"></div></div><br>
<div><div id="four"></div></div>
</div>
<div></div>
<div></div>
</center>
<div>
<h4 style="color: blanchedalmond; font-family: Verdana;">Traffic Signal Created by Technical Nizami Network</h4>
<button onclick="turnOn()">Turn On</button>
<button onclick="turnOff()">Turn Off</button>
</div>
<script>
function turnOn(){
var myIndex = 0;
function carousel(){
var slide = document.querySelectorAll('.slide-all');
for (var i = 0; i < slide.length; i++){
slide[i].style.display ="none";
}
myIndex++;
if(myIndex > slide.length){
myIndex = 1;
}
slide[myIndex-1].style.display ="block";
setTimeout(carousel, 1000);
}
carousel();
}
function turnOff(){
this.turnOn() = false;
}
</script>
</body>
</html>Watch video related this article…
