In this blog post, you will learn how to design a traffic light simulator using only Html and CSS.
Do you know who invented the traffic light? – Garrett Morgan was the inventor of the first traffic lights.
- Keep reading on JavaScript Drag and Drop File Uploader, How to validate Google reCAPTCHA in JavaScript
Traffic Light simulator using only Html and CSS
This is a web-based online traffic lights control simulation, developed using HTML, CSS, and Javascript. Find the source code below:-
HTML
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>Traffic Light Simulator</title> <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.min.css'><link rel="stylesheet" href="./style.css"> </head> <body> <!-- partial:index.partial.html --> <div class="container"> <div class="circle red" color="red"></div> <div class="circle" color="yellow"></div> <div class="circle" color="green"></div> </div> <!-- partial --> <script src="./script.js"></script> </body> </html>
Style.Css
@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');
* {
box-sizing: border-box;
}
body {
background-color: #1abc9c;
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
margin: 0;
}
.container {
background-color: #2c3e50;
border-radius: 50px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
padding: 15px 0;
height: 200px;
width: 70px;
}
.circle {
background-color: rgba(0, 0, 0, 0.3);
border-radius: 100%;
position: relative;
height: 40px;
width: 40px;
}
.circle::after {
border-right: 4px solid rgba(255, 255, 255, 0.6);
border-radius: 100%;
content: ' ';
position: absolute;
top: 5px;
left: 0px;
width: 30px;
height: 30px;
}
.circle.red {
background-color: #c0392b;
box-shadow: 0 0 20px 5px #c0392b;
}
.circle.yellow {
background-color: #f1c40f;
box-shadow: 0 0 20px 5px #f1c40f;
}
.circle.green {
background-color: #2ecc71;
box-shadow: 0 0 20px 5px #2ecc71;
}
Script.js
const circles = document.querySelectorAll('.circle')
let activeLight = 0;
setInterval(() => {
changeLight();
}, 1000);
function changeLight() {
circles[activeLight].className = 'circle';
activeLight++;
if(activeLight > 2) {
activeLight = 0;
}
const currentLight = circles[activeLight]
currentLight.classList.add(currentLight.getAttribute('color'));
}
Conclusion
I hope you liked this article on how to design traffic lights signal using only Html and CSS. I would like to have feedback from my blog readers. Your valuable feedback, question, or comments about this article are always welcome.
Leave a Reply