Traffic Light simulator using only Html and CSS

In this blog post, you will learn how to design a traffic light simulator using only Html and CSS. Traffic lights or traffic signals are lights used to control the movement of the traffic. They are placed on the roads at intersections and crossings.

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'));
}

Download Source Code

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.