projectshft · dcbeane · Apr 11, 2025
diff --git a/index.html b/index.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Weather Project</title>
+
+    <!-- Bootstrap 4.5.2 CSS -->
+    <link
+      rel="stylesheet"
+      href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
+    />
+
+    <!-- Bootstrap 4.5.2 JS + jQuery (required for full functionality) -->
+    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/js/bootstrap.bundle.min.js"></script>
+  </head>
+
+  <body class="container text-center">
+    <h1 class="my-4">Weather Project</h1>
+    <form id="search-form" class="form-inline justify-content-center mb-4">
+      <input
+        type="text"
+        id="city-input"
+        class="form-control form-control-lg mr-2"
+        placeholder="Enter city name"
+        required
+        style="max-width: 300px; width: 100%"
+      />
+      <button type="submit" class="btn btn-primary btn-lg">Search</button>
+    </form>
+    <div id="weather" class="mb-4"></div>
+    <div id="forecast" class="d-flex justify-content-center flex-wrap"></div>
+
+    <script src="main.js"></script>
+  </body>
+</html>
diff --git a/main.js b/main.js
@@ -0,0 +1,115 @@
+/// Weather App eval ///
+
+// API key from OpenWeather //
+const apiKey = "50db227b960d25c8fdefe35f9aa6496e";
+
+// Grabs DOM elements //
+const form = document.getElementById("search-form");
+const input = document.getElementById("city-input");
+const weatherDiv = document.getElementById("weather");
+const forecastDiv = document.getElementById("forecast");
+
+// Form submission handler //
+form.addEventListener("submit", function (event) {
+  event.preventDefault();
+
+  const city = input.value.trim();
+
+  if (city !== "") {
+    getWeather(city);
+    getForecast(city);
+  }
+});
+
+// Gets current weather data //
+function getWeather(city) {
+  const url = "https://api.openweathermap.org/data/2.5/weather?q=" + city + "&units=imperial&appid=" + apiKey;
+
+  fetch(url)
+    .then(function (response) {
+      return response.json();
+    })
+    .then(function (data) {
+      if (data.cod === 200) {
+        showWeather(data);
+      } else {
+        weatherDiv.innerHTML = "<p>City not found.</p>";
+      }
+    })
+    .catch(function () {
+      weatherDiv.innerHTML = "<p>Error getting weather.</p>";
+    });
+}
+
+// Displays current weather //
+function showWeather(data) {
+  const temp = Math.round(data.main.temp);
+  const city = data.name;
+  const condition = data.weather[0].main;
+  const icon = data.weather[0].icon;
+
+  weatherDiv.innerHTML = `
+    <h2>${temp}°F</h2>
+    <h3>${city}</h3>
+    <p>${condition}</p>
+    <img src="https://openweathermap.org/img/wn/${icon}@2x.png" alt="${condition}" />
+  `;
+}
+
+// Gets the 5-day forecast data //
+function getForecast(city) {
+  const url = "https://api.openweathermap.org/data/2.5/forecast?q=" + city + "&units=imperial&appid=" + apiKey;
+
+  fetch(url)
+    .then(function (response) {
+      return response.json();
+    })
+    .then(function (data) {
+      showForecast(data);
+    })
+    .catch(function () {
+      forecastDiv.innerHTML = "<p>Error getting forecast.</p>";
+    });
+}
+
+// Displays the 5-day forecast //
+function showForecast(data) {
+  forecastDiv.innerHTML = "";
+
+  const forecastDays = {};
+
+  for (let i = 0; i < data.list.length; i++) {
+    const item = data.list[i];
+    const dateTime = item.dt_txt;
+    const date = dateTime.split(" ")[0];
+    const time = dateTime.split(" ")[1];
+
+    if (time === "12:00:00" && !forecastDays[date]) {
+      forecastDays[date] = item;
+    }
+  }
+
+  const dayList = Object.values(forecastDays).slice(0, 5);
+
+  for (let j = 0; j < dayList.length; j++) {
+    const forecast = dayList[j];
+    const temp = Math.round(forecast.main.temp);
+    const condition = forecast.weather[0].main;
+    const icon = forecast.weather[0].icon;
+    const day = new Date(forecast.dt_txt).toLocaleDateString("en-US", { weekday: "long" });
+
+    const card = document.createElement("div");
+    card.className = "card text-center m-2 p-3";
+
+    card.innerHTML = `
+      <div class="card-body">
+        <h5>${condition}</h5>
+        <p>${temp}°</p>
+        <img src="https://openweathermap.org/img/wn/${icon}@2x.png" alt="${condition}" />
+        <p><strong>${day}</strong></p>
+      </div>
+    `;
+
+    forecastDiv.appendChild(card);
+  }
+}