projectshft · j-emitch · Feb 19, 2025 · Feb 19, 2025 · Feb 19, 2025 · Oct 17, 2025
diff --git a/index.html b/index.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <!-- Required meta tags -->
+    <link rel="stylesheet" href="style.css" />
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, shrink-to-fit=no"
+    />
+
+    <!-- Bootstrap CSS -->
+    <link
+      rel="stylesheet"
+      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"
+      integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ"
+      crossorigin="anonymous"
+    />
+  </head>
+  <body>
+    <div class="container-fluid">
+      <div class="row">
+        <div class="col-md-6 offset-md-3">
+          <div class="page-header">
+            <h1>The Weather App</h1>
+            <hr />
+          </div>
+
+          <form class="search-form">
+            <h3>Search City</h3>
+
+            <div class="form-group">
+              <input
+                type="text"
+                id="search-query"
+                class="form-control"
+                placeholder="Enter City Name Here"
+              />
+            </div>
+
+            <button type="button" class="btn btn-primary search">Search</button>
+          </form>
+
+          <hr />
+        </div>
+      </div>
+      <div class="current-weather row justify-content-center mt-4"></div>
+      <div class="five-day row justify-content-center text-center mt-4"></div>
+    </div>
+
+    <script src="main.js" type="text/javascript"></script>
+  </body>
+</html>
diff --git a/main.js b/main.js
@@ -0,0 +1,101 @@
+const apiKey = '';
+let curWeather = {};
+let fiveDayForecast = [];
+
+document.querySelector('.search').addEventListener('click', function () {
+  const city = document.querySelector('#search-query').value;
+
+  fetchCurWeather(city);
+  fetchFiveDay(city);
+
+  document.querySelector('#search-query').value = '';
+});
+
+const addCurWeather = (data) => {
+    curWeather = {
+      city: data.name || null,
+      description: data.weather[0].main || null,
+      icon: data.weather[0].icon || null,
+      temp: Math.round(data.main.temp) || null,
+    };
+
+  renderCurWeather();
+};
+
+const addFiveDay = (data) => {
+  fiveDayForecast = [];
+
+  for (i=7; i<data.list.length; i += 8){
+    const curDay = {
+      description: data.list[i].weather[0].main || null,
+      icon: data.list[i].weather[0].icon || null,
+      temp: Math.round(data.list[i].main.temp) || null,
+      day: new Date(data.list[i].dt_txt).toLocaleString('en',{
+        weekday: 'long'})
+    };
+    fiveDayForecast.push(curDay);
+  }
+
+  renderFiveDay();
+};
+
+const fetchCurWeather = (city) => {
+  const url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=imperial`;
+  fetch(url, {
+    method: 'GET',
+    dataType: 'json'
+  })
+    .then(data => data.json())
+    .then(data => addCurWeather(data));
+}
+
+const fetchFiveDay = (city) => {
+  const url = `https://api.openweathermap.org/data/2.5/forecast?q=${city}&appid=${apiKey}&units=imperial`;
+  fetch(url, {
+    method: 'GET',
+    dataType: 'json'
+  })
+    .then(data => data.json())
+    .then(data => addFiveDay(data));
+}
+
+const renderCurWeather = () => {
+  document.querySelector('.current-weather').replaceChildren();
+
+    const curWeatherTemplate = 
+      `
+      <div class = "col-md-4 d-flex justify-content-between align-items-center">
+        <div class = "d-flex flex-column text-center justify-content-center">
+            <h2>${curWeather.temp}\u00B0F</h2>
+            <h3>${curWeather.city}</h3>
+            <p>${curWeather.description}</p>
+        </div>
+        <div>
+            <img src="https://openweathermap.org/img/wn/${curWeather.icon}@2x.png" alt="Weather Icon">
+        </div>
+      </div>
+      `;
+
+    document.querySelector('.current-weather').insertAdjacentHTML('beforeend', curWeatherTemplate);
+};
+
+const renderFiveDay = () => {
+  document.querySelector('.five-day').replaceChildren();
+
+  const fiveDayTemplate = fiveDayForecast.map(day => {
+    return `
+      <div class="col-md-2 col-sm-4">
+          <div class="card p-2 shadow-sm">
+              <div class="card-body">
+                  <p class="card-text">${day.description}</p>
+                  <h3 class="card-title">${day.temp}\u00B0F</h3>
+                  <img src="https://openweathermap.org/img/wn/${day.icon}@2x.png"" alt="Icon">
+                  <p class="card-text fw-bold">${day.day}</p>
+              </div>
+          </div>
+      </div>
+      `;
+  }).join('');
+
+  document.querySelector('.five-day').insertAdjacentHTML('beforeend', fiveDayTemplate);
+};
diff --git a/style.css b/style.css
@@ -0,0 +1,10 @@
+.page-header {
+  margin-top: 40px;
+  width: 100%;
+  text-align: center;
+}
+
+.search-form {
+  margin-top: 40px;
+  margin-bottom: 40px;
+}