🚦 Traffic Lights Project!

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 {
                0%, 33% {opacity: 1}
                34%, 67% {opacity: 0.2}
                68%, 100% {opacity: 0.2}
            }

            @keyframes yellowlight {
                0%, 33% {opacity: 0.2}
                34%, 67% {opacity: 1}
                68%, 100% {opacity: 0.2}
            }

            @keyframes greenlight {
                0%, 33% {opacity: o.2}
                34%, 67% {opacity: 0.2}
                68%, 100% {opacity: 1}
            }
        </style>
    </head>
    <body>
        <div class="traffic-light">
            <div class="light">
                <div class="red-light"></div>
                <div class="yellow-light"></div>
                <div class="green-light"></div>
            </div>
        </div>
    </body>
</html>

Output