Weather-Challenge/index.html at main · jturnbow21/Weather-Challenge · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<html lang="en">
  <head>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Anton&display=swap" rel="stylesheet">
    <link href="style.css" rel="stylesheet">
    <script src="./index.js"></script>
  </head>
  <body class="bg-image" >
    <div >
        <!-- <input type="text" id="Zip" class="form-control" placeholder="Zip Code" aria-label="Zip Code" aria-describedby="button-addon2">
        <button onclick="addZipCodeListener()" type="button" id="addZip">Add Zip Code</button> -->
          <!-- The button listed above would allow a user to input a zipcode to pull weather data. However i couldn't get it to work. The console would log the new zip code variable but wouldn't inject it. -->

        <button class="btn btn-primary btn-lg btn-block m-4" type="button" id="get-weather-data">Get Weather Data</button>
      </div>
      <div class="container-fluid ">
        <div class="row header-bg align-items-center">
            <div class="col text-center">
              <img  id ="condition" src="" class="icon">
            </div>
            </div>
          </div>


    <div>
    <pre class="text-weather m-2 " id="data-results"></pre>
    <pre class="m-2 text-weather" id="currentCondition"></pre>
    <pre class="m-2 text-weather" id="temp"></pre>
    <pre class="m-2 text-weather" id="wind-direction"></pre>
    <pre class="m-2 text-weather" id="wind-mph"></pre>
    <pre class="m-2 text-weather" id="precipitation"></pre>
    <pre class="m-2 text-weather" id="currentCondition"></pre>
  </div>

  </body>
</html>