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