projectshft · Yarles-13 · Aug 10, 2024 · Aug 11, 2024
diff --git a/README.md b/README.md
diff --git a/weather.html b/weather.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Bootstrap demo</title>
+    <link
+      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
+      rel="stylesheet"
+    />
+
+  </head>
+  <body>
+    <div class="d-flex flex-column mb-3">
+      <h1 class='p-2'>Weather Project</h1>
+      <hr />
+      <form class='' class="d-flex">
+        <input type="text" placeholder="Enter a city name..." id="city-name" class="p-3 d-flex mx-2" />
+        <button id="handleSubmit" type='button' class="btn btn-primary p-3">Search</button>
+      </form>
+    </div>
+
+    <div class='row'>
+      <div class='d-flex justify-content-center' id="todays-forecast-container"></div>
+
+      <section class='d-flex justify-content-center' id="five-day-forecast-container"></section>
+    </div>
+
+    <script src="weather.js"></script>
+
+  </body>
+</html>
diff --git a/weather.js b/weather.js
@@ -0,0 +1,106 @@
+
+const inputElement = document.getElementById("city-name");
+const submitButton = document.getElementById("handleSubmit");
+
+let todaysForecastContainer = document.getElementById(
+  "todays-forecast-container"
+);
+let fiveDayForecastContainer = document.getElementById(
+  "five-day-forecast-container"
+);
+
+let weatherData = [];
+
+const fetchWeatherData = (cityName) => {
+  const apiKey = "63168e96197ab571649bdefbef398926";
+  const currentWeatherUrl = `https://api.openweathermap.org/data/2.5/weather?q=${cityName}&appid=${apiKey}&units=imperial`;
+  const forecastWeatherUrl = `https://api.openweathermap.org/data/2.5/forecast?q=${cityName}&appid=${apiKey}&units=imperial`;
+
+  fetch(currentWeatherUrl)
+    .then((response) => {
+      if (!response.ok) {
+        throw new Error(response.status);
+      }
+      return response.json();
+    })
+    .then((data) => addCurrentWeather(data))
+    .catch((error) => console.log(error.message));
+
+  fetch(forecastWeatherUrl)
+    .then((response) => {
+      if (!response.ok) {
+        throw new Error(response.status);
+      }
+      return response.json();
+    })
+    .then((data) => addForecastWeather(data))
+    .catch((error) => console.log(error.message));
+};
+
+const addCurrentWeather = (data) => {
+  weatherData = [];
+  weatherData.push({
+    name: data.name,
+    temperature: data.main.temp,
+    description: data.weather[0].description
+  });
+
+  renderWeather();
+};
+
+const addForecastWeather = (data) => {
+  data.list.forEach((item) => {
+    weatherData.push({
+      date: new Date(item.dt * 1000),
+      temperature: item.main.temp,
+      description: item.weather[0].description
+    });
+  });
+
+  renderForecast();
+};
+
+const renderWeather = () => {
+  todaysForecastContainer.innerHTML = "";
+
+  const template = `
+    <div class="col-md-12 mb-4 bg-primary">
+      <div class="card border-primary">
+        <div class="card-body">
+          <h2 class="card-title text-primary">${weatherData[0].temperature} °F</h2>
+          <p class="card-text"><strong>City:</strong> ${weatherData[0].name}</p>
+          <p class="card-text"><strong>Conditions:</strong> ${weatherData[0].description}</p>
+        </div>
+      </div>
+    </div>
+  `;
+
+  todaysForecastContainer.innerHTML = template;
+};
+
+const renderForecast = () => {
+  fiveDayForecastContainer.innerHTML = "";
+
+  weatherData.slice(1).forEach((item) => {
+    const template = `
+         <div class="col-md-2 mb-4 d-flex">
+          <div class="card border-secondary ">
+            <div class="card-body ">
+              <h5 class="card-title">${item.date.toLocaleDateString(undefined, {
+                weekday: "long"
+              })}</h5>
+              <p class="card-text">${item.temperature} °F</p>
+              <p class="card-text">${item.description}</p>
+            </div>
+          </div>
+        </div>
+      `;
+    fiveDayForecastContainer.insertAdjacentHTML("beforeend", template);
+  });
+};
+
+submitButton.addEventListener("click", () => {
+  const cityName = inputElement.value;
+  fetchWeatherData(cityName);
+  inputElement.value = "";
+});