Repush

app.js

@@ -0,0 +1,130 @@
+const apiKey = "YOUR_API_KEY";
+const weatherForm = document.querySelector("#weather-form");
+const weatherInfo = document.querySelector("#weather-info");
+
+fetchCurrent = async () => {
+  const current = {};
+  await fetch("https://ipapi.co/json/")
+    .then((response) => response.json())
+    .then((data) => {
+      current["city"] = data.city;
+      current["state"] = data.region;
+      current["country"] = data.country_name;
+    })
+    .catch((error) => {
+      console.log(error);
+      weatherInfo.innerHTML = "<p>An error occurred</p>";
+    });
+  return current;
+};
+
+fetchCountry = async (country_code) => {
+  let country;
+  await fetch(`https://restcountries.com/v3.1/alpha/${country_code}`)
+    .then((response) => response.json())
+    .then((data) => {
+      country = data[0];
+    })
+    .catch((error) => {
+      console.log(error);
+      weatherInfo.innerHTML = "<p>An error occurred</p>";
+    });
+  return country.name.common;
+};
+
+fetchLocation = async (city, region, country_name, apiKey) => {
+  let location;
+  await fetch(
+    `http://api.openweathermap.org/geo/1.0/direct?q=${city},${region},${country_name}&appid=${apiKey}`
+  )
+    .then((response) => response.json())
+    .then((data) => {
+      location = data[0];
+    })
+    .catch((error) => {
+      console.log(error);
+      weatherInfo.innerHTML = "<p>An error occurred</p>";
+    });
+  if (!location) {
+    location = { lat: 0, lon: 0 };
+  } else {
+    location["country"] = await fetchCountry(location.country);
+  }
+  return location;
+};
+
+fetchWeather = async (city, region, country_name, apiKey) => {
+  const location = await fetchLocation(city, region, country_name, apiKey);
+  let weather;
+  await fetch(
+    `https://api.openweathermap.org/data/2.5/weather?lat=${location.lat}&lon=${location.lon}&units=metric&&appid=${apiKey}`
+  )
+    .then((response) => response.json())
+    .then((data) => {
+      weather = data;
+    })
+    .catch((error) => {
+      console.log(error);
+      weatherInfo.innerHTML = "<p>An error occurred</p>";
+    });
+  if (location.state)
+    weather[
+      "destination"
+    ] = `${location.name}, ${location.state}, ${location.country}`;
+  else weather["destination"] = `${location.name}, ${location.country}`;
+  return weather;
+};
+
+weatherForm.addEventListener("submit", async (event) => {
+  event.preventDefault();
+
+  let city = document.querySelector("#city").value;
+  let state = document.querySelector("#state").value;
+  let country = document.querySelector("#country").value;
+
+  if (city === "") {
+    const current = await fetchCurrent();
+    city = current.city;
+    state = current.state;
+    country = current.country;
+  }
+  const weather = await fetchWeather(city, state, country, apiKey);
+
+  if (weather.coord.lat === 0 && weather.coord.lon === 0) {
+    weatherInfo.innerHTML = `
+    <div class="card-header">
+        <h2>Location not found!</h2>
+    </div>
+    <div class="card-body">
+        <div class="row">
+            <div class="col-md-3 text-center">
+                <img src="https://icons.veryicon.com/png/o/commerce-shopping/jkd_wap/no-result.png" alt="Not found" width="100" height="100">
+            </div>
+        </div>
+    </div>
+    `;
+  } else {
+    weatherInfo.innerHTML = `
+    <div class="card-header">
+        <h2>Weather in ${weather.destination}</h2>
+    </div>
+    <div class="card-body">
+        <div class="row">
+            <div class="col-md-3 text-center">
+                <img src="http://openweathermap.org/img/wn/${weather.weather[0].icon}.png" alt="Weather icon" width="100" height="100">
+            </div>
+            <div class="col-md-9">
+                <p>Weather: ${weather.weather[0].main} (${weather.weather[0].description})</p>
+                <p>Temperature: ${weather.main.temp}°C</p>
+                <p>Feels like: ${weather.main.feels_like}°C</p>
+                <p>Pressure: ${weather.main.pressure}hPa</p>
+                <p>Humidity: ${weather.main.humidity}%</p>
+                <p>Visibility: ${weather.visibility}m</p>
+                <p>Wind speed: ${weather.wind.speed}m/s</p>
+                <p>Cloudiness: ${weather.clouds.all}%</p>
+            </div>
+        </div>
+    </div>
+    `;
+  }
+});