weatherapp/app.js at main · codeitR/weatherapp · 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
// // parts of an api
// // Base URL
// // endpoints
// // query
// // authentication -> public, bearer token[most secure], API key[least secure]

// const city = document.getElementById("city");

// city.innerHTML = "RAMESHHHHHHHHHHHHH !!!!!!";

// var requestOptions = {
//   method: "GET",
//   redirect: "follow",
// };

// fetch(
//   "https://api.openweathermap.org/data/2.5/weather?q=london&appid=b3528849799fc69ab2e46bdd46794f25&units=metric",
//   requestOptions
// )
//   .then((response) => response.json())
//   .then((result) => console.log(result))
//   .catch((error) => console.log("error", error));
let form = document.getElementById("form");
let search_bar = document.getElementById("search-bar");
let results = document.getElementById("results");
dayjs.extend(window.dayjs_plugin_utc);

form.addEventListener("submit", (e) => {
  e.preventDefault();
  results.innerHTML = "<h5 class='text-center'>Loading, please wait</h5>";
  fetch_data();
  search_bar.value = "";
});

let base = `https://api.openweathermap.org/data/2.5/weather`;
let password = `b3528849799fc69ab2e46bdd46794f25`;
let units = `metric`;
let city;
let api;

let fetch_data = async () => {
  city = search_bar.value;
  api = `${base}?q=${city}&units=${units}&appid=${password}`;

  return await fetch(api)
    .then((res) => {
      if (res.ok) {
        results.innerHTML = "";
        return res.json();
      } else {
        throw new Error("Something went wrong");
      }
    })
    .then((res) => {
      console.log(res);
      results.innerHTML = print_results(res);
    })
    .catch(
      (err) =>
        (results.innerHTML = "<h5 class='text-center'>City not found</h5>")
    );
};

let print_results = (res) => {
  let { main, name, sys, weather, wind, timezone } = res;
  return `
  <h5 class="text-center text-capitalize mb-3">${name}, ${sys?.country}</h5>
      <div class="cards">
        <div class="card-1">
          <img src="http://openweathermap.org/img/wn/${weather
            .filter((x, y) => y === 0)
            .map((x) => x.icon)}@2x.png" alt="">
          <span class="fs-6 fw-semibold">${main.temp}° C</span>
          <span class="fw-lighter text-secondary">Temperature</span>
        </div>
        <div class="card-2">
          <i class="fs-2 bi bi-wind"></i>
          <span class="fs-6 fw-semibold">${wind.speed}km/h</span>
          <span class="fw-lighter text-secondary">Wind</span>
        </div>
        <div class="card-3">
          <i class="fs-2 bi bi-droplet"></i>
          <span class="fs-6 fw-semibold">${main.humidity}%</span>
          <span class="fw-lighter text-secondary">Humidity</span>
        </div>
        <div class="card-4">
          <i class="fs-2 bi bi-water"></i>
          <span class="fs-6 fw-semibold">${main.pressure} hPa</span>
          <span class="fw-lighter text-secondary">Pressure</span>
        </div>
        <div class="card-5">
        <i class="fs-2 bi bi-sunrise"></i>
        <span class="fs-6 fw-semibold">${hour_converter(
          sys.sunrise,
          timezone
        )}</span>
        <span class="fw-lighter text-secondary">Sun Rise</span>
        </div>
        <div class="card-6">
        <i class="fs-2 bi bi-sunset"></i>
        <span class="fs-6 fw-semibold">${hour_converter(
          sys.sunset,
          timezone
        )}</span>
        <span class="fw-lighter text-secondary">Sun Set</span>
        </div>

      </div>
  `;
};

/**
 * ! Note : the timezone provided is in seconds format
 */

let hour_converter = (input, timezone) => {
  return dayjs
    .unix(input)
    .utc()
    .utcOffset(timezone / 3600)
    .format("h : mm A");
};