I recently built a simple Traffic Lights project using HTML, CSS, and JavaScript.

This mini project helped me practise JavaScript basics, DOM manipulation, and working with interactive elements while bringing a familiar real-world concept to life.

Small projects, consistent practice, and learning something new every day!

Code

<!DOCTYPE HTML> <html> <head> <title> Traffic Light </title> <style> body { background-color : #111 ; display : flex ; align-items : center ; justify-content : center ; height : 100vh ; margin : 0 ; }

.traffic-light { background-color : #222 ; padding : 20px ; border-radius : 15px ; }

.red-light , .yellow-light , .green-light { width : 80px ; height : 80px ; border-radius : 50% ; margin : 15px ; opacity : 0.2 ; }

.red-light { background-color : red ; animation : redlight 2s infinite ; }

.yellow-light { background-color : yellow ; animation : yellowlight 2s infinite ; }

.green-light { background-color : greenyellow ; animation : greenlight 2s infinite ; }

@keyframes redlight {…