You were given access to control traffic lights in the city.
The task you need to solve is to manually control them.

To turn on the red light, the .traffic-light element must have a second class stop.
To turn green light on, the .traffic-light element must have a second go class.

The first toggler button (with id toggle-first) should switch the mode of the first traffic light (.traffic-light).
The second toggler button (with id toggle-second) should switch the mode of the second traffic light (.traffic-light).

The third button (toggle-both-go) must turn green at both traffic lights.
The fourth button (toggle-both-stop) must turn on the red light at both traffic lights.

Use the internal script, don’t change the initial state of the classes.

This task is part of the Full-Stack JavaScript Course
If you have any issues with it, you can ask for community help below the post
Feel free to help others if you’ve already solved the task

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Traffic light</title>
    <style>
      .container {
        display: grid;
        grid-template-columns: repeat(3, 250px);
        place-items: center;
      }
      .traffic-light {
        width: 200px;
        height: 400px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
        background-color: #464655;
      }
      .light {
        border-radius: 50%;
        width: 180px;
        height: 180px;
      }
      .togglers {
        height: 400px;
        width: 200px;
        display: flex;
        flex-direction: column;
      }
      .toggler {
        margin-bottom: 8px;
      }
      .red-light {
        background-color: #794442;
      }
      .green-light {
        background-color: #82926b;
      }
      .traffic-light.stop .red-light{
        background-color: #DB3A34;
      }
      .traffic-light.go .green-light{
        background-color: #ADE25D;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="traffic-light stop">
        <div class="light red-light"></div>
        <div class="light green-light"></div>
      </div>
      <div class="traffic-light go">
        <div class="light red-light"></div>
        <div class="light green-light"></div>
      </div>
      <div class="togglers">
        <button class="toggler" id="toggle-first">Toggle first</button>
        <button class="toggler" id="toggle-second">Toggle second</button>
        <button class="toggler" id="toggle-both-go">Toggle both on go</button>
        <button class="toggler" id="toggle-both-stop">Toggle both on go</button>
      </div>
    </div>
  </body>
</html>