HackNC-Project/weather.html at main · akhilkumar2004/HackNC-Project · 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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<!DOCTYPE html>
<html lang="en-US">
    <head>
        <meta charset="UTF-8">
        <meta name="author" content="Weatherizer 9000">
        <meta name="description" content="This page contains all halloween images.">
        <title>Weatherizer 9000</title>
        <link rel="stylesheet" href="main.css" type="text/css">
   </head>

   <body>


      <h1>Weatherizer 9000</h1>

    <img src="img/weatherimage.png" alt="Weather" width="200" height="200" loading="eager"></img>

      <p>
          <label for="search">Search for a city:</label>
          <input type="text" name="search" id="search" placeholder="Detroit" autocomplete="off" required
              autofocus><button id = "b1" onclick = "callAPI(false)">Search</button>
      </p>

      <br>


      <p>Here are some top suggestions! <br>
      <select name="halloweencostumes" id="halloweencostumes" multiple size="4">
              <option value="New York" >New York</option>
              <option value="Chicago">Chicago</option>
              <option value="Charlotte">Charlotte</option>
              <option value="LA">Los Angeles</option>
      </select>
      <button id = "b2" onclick = "callAPI(true)">Submit</button>
    </p>

    <p>
      <!--------PUT TEXT HERE---------->
    </p>


    <img src="img/weathermeme.jpeg" alt="Meme" width="300" height="300" loading="eager"></img>

    <br><br>


    <p style="color:black" id = "tempOut"></p>
    <p style="color: black" id = "cloudOut"></p>

    <img id="icons" width = "200" height="200"/>


    </body>

    <script src="weather getter.js"></script>
</html>