Weather_App/index.html at main · Tharush2002/Weather_App · 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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Home</title>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />

    <link rel="stylesheet" href="css/main.css" />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"
    />
  </head>

  <body style="background: linear-gradient(to left, #fff, #a2d9ea); visibility: hidden;" id="body">
    <header>
      <!-- place navbar here -->
      <nav class="navbar navbar-expand-lg bg-body-tertiary navBar">
        <div class="container-fluid">
          <img src="./src/Logo.png" class="opacity-50" height="28px" alt="" />
          <button
            class="navbar-toggler"
            type="button"
            data-bs-toggle="collapse"
            data-bs-target="#navbarNav"
            aria-controls="navbarNav"
            aria-expanded="false"
            aria-label="Toggle navigation"
          >
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse navLinks" id="navbarNav">
            <ul class="navbar-nav nav-pills">
              <li class="nav-item">
                <a
                  class="nav-link active text-white px-3 rounded-4 fw-bolder"
                  aria-current="page"
                  style="cursor: default"
                  >HOME</a
                >
              </li>
              <li class="nav-item">
                <a class="nav-link text-body-tertiary" href="contact.html"
                  >CONTACT US</a
                >
              </li>
            </ul>
          </div>
        </div>
      </nav>
    </header>

    <main>
      <div class="container col-xxl-8 px-4 pb-3 pt-3">
        <div class="row flex-lg-row-reverse align-items-center g-5 py-4">
          <div class="col-12 col-sm-12 col-lg-6 d-flex justify-content-center">
            <img
              src="./src/Hero.png"
              class="d-flex justify-content-center img-fluid"
              alt=""
              width="450"
            />
          </div>
          <div class="col-lg-6 d-flex flex-column rounded-4" id="indexHero">
            <div class="display-4 fw-bolder text-body-emphasis lh-1 mb-4">
              <strong>Real-time Weather Monitor.</strong>
            </div>
            <p class="lead">
              Stay ahead of the weather with <strong class="fw-bolder">WeatherMe</strong>, the
              all-in-one app designed to keep you informed. Our real-time
              weather monitoring delivers up-to-the-minute updates on weather
              conditions, and our advanced weather forecasting provides
              predictions for the days ahead. Dive into historical weather and
              receive alerts for severe weather events too.
            </p>
            <input
              class="form-control rounded-3 bg-body-tertiary my-2 fw-bolder shadow-lg"
              list="datalistOptions"
              id="input"
              placeholder="Enter a city name"
              style="width: 80%"
            />
            <datalist id="datalistOptions"> </datalist>
            <div class="d-grid gap-2 d-md-flex justify-content-md-start">
              <button
                type="button"
                class="btn btn-primary btn-lg px-5 me-md-2 mt-2 shadow-lg rounded-pill"
                id="btnWeatherMe"
                onclick="btnSearch()"
              >
                <span class="fw-bold" style="font-size: x-large"
                  >WEATHERME</span
                >
              </button>
            </div>
          </div>
        </div>
      </div>
    </main>

    <!-- TOAST -->
    <div
      class="toast-container position-fixed bottom-0 end-0 p-3"
      data-bs-delay="7500"
    >
      <div
        id="liveToast"
        class="toast bg-danger"
        role="alert"
        aria-live="assertive"
        aria-atomic="true"
      >
        <div class="toast-header bg-danger-subtle">
          <strong class="me-auto text-body-emphasis">ERROR</strong>
          <button
            type="button"
            class="btn-close"
            data-bs-dismiss="toast"
            aria-label="Close"
          ></button>
        </div>
        <div class="toast-body text-white" id="toastError"></div>
      </div>
    </div>

    <!-- Bootstrap JavaScript Libraries -->
    <script src="js/bootstrap.bundle.min.js"></script>
    <script src="js/app.js"></script>
    <script>
      document.addEventListener("DOMContentLoaded", () => {
        document.getElementById("body").style.visibility="visible";
        resetForm();
      });

      document.getElementById("input").addEventListener('input', async (event) => {
        loadLocations();
      })
    </script>
  </body>
</html>