<!DOCTYPE html>
<html>
  <head>
    <title>Stop Light</title>
    <style>
      .stop-light {
        width: 150px;
        height: 400px;
        background-color: black;
        border-radius: 20px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
      }

      .light {
        width: 120px;
        height: 120px;
        border-radius: 50%;
        border: 5px solid black;
      }

      .red {
        background-color: red;
      }

      .yellow {
        background-color: yellow;
      }

      .green {
        background-color: green;
      }
    </style>
  </head>
  <body>
    <div class="stop-light">
      <div class="light red"></div>
      <div class="light yellow"></div>
      <div class="light green"></div>
    </div>

    <script>
      const apiKey = "your-api-key";
      const city = "Calgary";
      const apiUrl = `https://api.open-meteo.com/v1/forecast?latitude=51.05&longitude=-114.09&hourly=temperature_2m;
      fetch(apiUrl)
        .then((response) => response.json())
        .then((data) => {
          const temperature = data.main.temp;
          if (temperature <= -10) {
            document.querySelector(".red").style.backgroundColor = "red";
          } else if (temperature < 0) {
            document.querySelector(".yellow").style.backgroundColor = "yellow";
          } else {
            document.querySelector(".green").style.backgroundColor = "green";
          }
        })
        .catch((error) => console.log(error
CULTURED CANINES
