Weather-project/index.html at main · SofiiCode/Weather-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
59
60
61
62
63
64
65
66
67
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Weather</title>
    <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=PT+Mono&family=Roboto+Slab:wght@500;800&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
    rel="stylesheet"
    />
    <link
    href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css"
    rel="stylesheet"
    integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx"
    crossorigin="anonymous"
    />
    <link rel="stylesheet" href="src/styles.css" />
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

  </head>
  <body>
    <div class="container">
      <form class="input-city row">
        <div class="col">
            <input
            class="form-control shadow"
            id="input"
            value="Kyiv"
            placeholder="Type a city..."
          />
        </div>
        <div class="col buttons">
          <button type="submit" id = "search" class="btn btn-search shadow" >Search</button>
          <button id = "current" class="btn btn-current shadow" >Current</button>
         </div>
      </form>
      <div class="row current-city-container shadow">
        <div class="col">
          <h1 class="current-city" id="city"></h1>
          <p id="day"></p>
        </div>
        <div class="col">
          <div class="weather-container">
            <img src="#" class="currentEmoji" id="current-img" alt="" width="65px" />
            <p id="weather"></p>
          </div>
        </div>
        <div class="col weather-description-container">
          <div>
            <h1 id="current-temp"></h1>
            <span>°С</span>
          </div>
          <div class="description-container">
            <p class="weather-description">Humidity: <span id="humidity"></span> %  <br />Wind: <span id="wind"></span>  m/s</p>
          </div>
        </div>
        <div class="weather-forecast" id="forecast"></div>
      </div>
      <div class="coder">This project was coded by Sofiia Andrusyshyn and is open-soursed on <a href="https://github.com/SofiiCode/Weather-project.git">GitHub</a> </div>
    </div>

    <script src="src/index.js"></script>
  </body>
</html>