projectshft · mstwssts · Feb 28, 2025 · Mar 2, 2025 · Mar 3, 2025 · Mar 3, 2025
diff --git a/index.html b/index.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <link
+      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
+      rel="stylesheet"
+      integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
+      crossorigin="anonymous"
+    />
+    <link rel="stylesheet" href="style.css" />
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Weather App Project</title>
+  </head>
+  <body>
+    <div class="container text-center">
+      <div class="row justify-content-center">
+        <div class="col py-5">
+          <h1>Weather Project</h1>
+          <hr />
+        </div>
+      </div>
+      <div class="row g-3 justify-content-center">
+        <div class="col-auto">
+          <input
+            class="form-control-lg"
+            list="datalistOptions"
+            id="city-name"
+            placeholder="Enter City Name Here"
+          />
+          <datalist id="datalistOptions">
+            <option value="San Francisco"></option>
+            <option value="New York"></option>
+            <option value="Seattle"></option>
+            <option value="Los Angeles"></option>
+            <option value="Chicago"></option>
+          </datalist>
+        </div>
+        <div class="col-auto">
+          <button type="button" class="btn btn-primary btn-lg mb-3 search">
+            Search
+          </button>
+        </div>
+      </div>
+
+      <div class="container mt-5 text-center">
+        <div id ="current-weather" class="row justify-content-center">
+
+        </div>
+      </div>
+      <div class="container mt-5 text-center ">
+        <div id="forecast-cards" class="d-flex flex-wrap justify-content-center gap-3">
+
+        </div>
+      </div>
+    <script src="main.js"></script>
+  </body>
+</html>
diff --git a/main.js b/main.js
@@ -0,0 +1,76 @@
+document.querySelector('.search').addEventListener('click', function(event) {
+  event.preventDefault();
+  const cityName = document.querySelector('#city-name').value;
+
+  if (!cityName) {
+    alert("Please enter city name");
+    return;
+  }
+
+  fetchWeather(cityName);
+  document.querySelector('#city-name').value = "";
+});
+
+const fetchWeather = function(cityName) {
+  const apiKey = `6b1b3ebef7a7e650e8bff4f1b84115be`
+  const url = `https://api.openweathermap.org/data/2.5/weather?q=${cityName}&appid=${apiKey}&units=imperial`;
+
+  fetch(url, { method: 'GET' })
+    .then(response => response.json())
+    .then(data => addWeather(data))
+
+  const fiveDayForecast = `https://api.openweathermap.org/data/2.5/forecast?q=${cityName}&appid=${apiKey}&units=imperial`
+
+  fetch(fiveDayForecast, {method: 'GET'})
+    .then(response => response.json())
+    .then(data => addForecast(data))
+};
+
+const addWeather = (data) => {
+  const currentWeatherContainer = document.getElementById("current-weather");
+    currentWeatherContainer.innerHTML = "";
+
+  const weatherInfo = {
+    conditions: data.weather[0].description || null,
+    temperature: `${data.main.temp}°F` || null,
+    icon_url: `http://openweathermap.org/img/wn/${data.weather[0].icon}@2x.png` || null,
+    day: new Date(data.dt * 1000).toLocaleDateString('en-US', { weekday: 'long' }) || null
+  };
+
+
+  const template = `
+    <div class="col-md-2 col-sm-4 weather-card">
+      <p>${weatherInfo.conditions}</p>
+      <h3>${weatherInfo.temperature}</h3>
+      <img src="${weatherInfo.icon_url}" alt="${weatherInfo.conditions}" class="weather-icon">
+      <p><strong>${weatherInfo.day}</strong></p>
+    </div>`;
+
+    document.getElementById("current-weather").insertAdjacentHTML("beforeend", template);
+
+};
+
+const addForecast = (data) => {
+  const forecastContainer = document.getElementById("forecast-cards");
+  forecastContainer.innerHTML = "";
+
+  for (let i = 0; i < data.list.length; i += 8) { 
+    const forecast = data.list[i];
+    const forecastInfo = {
+      conditions: forecast.weather[0].description || null,
+      temperature: `${forecast.main.temp}°F` || null,
+      icon_url: `http://openweathermap.org/img/wn/${forecast.weather[0].icon}@2x.png` || null,
+      day: new Date(forecast.dt * 1000).toLocaleDateString('en-US', { weekday: 'long' }) || null
+    };
+
+    const forecastTemplate = `
+      <div class=" col-sm-4 forecast-card">
+        <p>${forecastInfo.conditions}</p>
+        <h3>${forecastInfo.temperature}</h3>
+        <img src="${forecastInfo.icon_url}" alt="${forecastInfo.conditions}" class="weather-icon">
+        <p>${forecastInfo.day}</p>
+      </div>`;
+
+    forecastContainer.insertAdjacentHTML("beforeend", forecastTemplate); 
+  }
+}
diff --git a/style.css b/style.css
@@ -0,0 +1,29 @@
+body {
+  background-color: rgb(83, 121, 160);
+}
+.weather-card {
+  border: 4mm outset rgb(115, 134, 240);
+  padding: 20px;
+  text-align: center;
+  border-radius: 10%;
+  background-color: rgb(161, 252, 217);
+  width: 225px;
+}
+.weather-icon {
+  font-size: 40px;
+}
+.forecast-card {
+  border: 4mm outset rgb(115, 134, 240);
+  text-align: center;
+  border-radius: 10%;
+  background-color: rgb(161, 252, 217);
+  width: auto;
+  min-width: 200px;
+  padding-top: 20px;
+}
+.forecast-card:hover {
+  border: 3mm inset rgb(115, 134, 240);
+}
+.weather-card:hover {
+  border: 3mm inset rgb(115, 134, 240);
+}