projectshft · areebakwas · Sep 10, 2024 · ronyrosenberg · Sep 16, 2024 · ronyrosenberg
diff --git a/index.html b/index.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
+    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" 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 Prompt</title>
+</head>
+<body>
+  <div class="container">
+
+    <h1 class="my-4">Weather Project- Module 3</h1>
+    <div class="search-box mb-3 d-flex justify-content-center">
+        <input type="text" id="current-town" class="form-control" placeholder="Enter City Name Here">
+        <div class="search-box-add">
+          <button type="button" class="btn btn-primary" id="button-search">Search</button>
+        </div>
+    </div>
+
+
+
+    <div id="weather-today" class="my-4 city-searched-here mx-auto"></div>
+    <div id="week-forecast" class="row"></div>
+  </div>
+
+  <script src="main.js"></script>
+</body>
+</html>
diff --git a/main.js b/main.js
@@ -0,0 +1,104 @@
+// create eventlistener and variable
+
+document.getElementById('button-search').addEventListener('click', function() {
+  let townName = document.getElementById('current-town').value;
+
+  weatherOfTheDay(townName);
+
+});
+
+//create new function 
+
-
-//create new function 
+
+//create new function 
-
-//create new function 
+
+//create new function 
+function weatherOfTheDay(townName) {
+
-
-
+      const apiKey = '63168e96197ab571649bdefbef398926';
+      const currentWeatherApiUrl = `https://api.openweathermap.org/data/2.5/weather?q=${townName}&units=imperial&appid=${apiKey}`;
+//create fetch to grab data, add error check as well
+    fetch(currentWeatherApiUrl)
+            .then(response => response.json())
+            .then(data => {
-            .then(data => {
+            .then(weatherData => {
-            .then(data => {
+            .then(weatherData => {
+              showPresentWeather(data);
+              predictClimate(townName, apiKey)
+            })
+            //error with message for console log
+            .catch(error => console.error('There is an error trying to get the data:', error))
+
+}
+
+//create new function showpresentweather and a template to display data
+
+function showPresentWeather(data) {
+    const climateSection = document.getElementById('weather-today');
+    const handleClimate = `
+        <h2>${data.name}</h2>
+        <p>${Math.round(data.main.temp)}°</p>
+        <p>${data.weather[0].main}</p>
+        <img src="https://openweathermap.org/img/wn/${data.weather[0].icon}@2x.png" alt="${data.weather[0].description}">
+    `;
+    //use innerHTML
+    climateSection.innerHTML = handleClimate;
+}
+//create new fxn predictclimate
+function predictClimate(townName, apiKey) {
+  const currentWeatherApiUrl = `https://api.openweathermap.org/data/2.5/forecast?q=${townName}&units=imperial&appid=${apiKey}`;
+  //use fetch agiain to grab the json data
+  fetch(currentWeatherApiUrl)
+    .then(response => response.json())
+    .then(data => {
+       fiveDayWeather(data);
+    })
+    .catch(error => console.error('There is an errow trying to fetch the 5 day weather data:', error))
+}
+//create fxn fivedayweather 
+
+function fiveDayWeather(data) {
+    const tempWeatherPart = document.getElementById('week-forecast');
+    tempWeatherPart.innerHTML = '';
+    const timeDias = data.list.filter((reading) => reading.dt_txt.includes("18:00:00")); 
+    timeDias.forEach(timeDia => {
+      const date = new Date(timeDia.dt_txt);
+      const dayOfWeek = date.toLocaleDateString('en-US', { weekday: 'long' });
+      const forecastToPage = `
+            <div class="col-sm-2">
+                <div class="card">
+                    <div class="card-body text-center">
+                        <p class="card-text">${dayOfWeek}</p>
+                        <p class="card-text">${Math.round(timeDia.main.temp)}°</p>
+                        <p class="card-text">${timeDia.weather[0].main}</p>
+                        <img src="https://openweathermap.org/img/wn/${timeDia.weather[0].icon}@2x.png" alt="${timeDia.weather[0].description}">
+                    </div>
+                </div>
+            </div>
+        `;
+        // Append each forecast card to the div
+        tempWeatherPart.innerHTML += forecastToPage;
+    });
+
+
+
+
+
+};
+
+
+
+
+
+
+
+
+//find last town searched and save
+document.getElementById('button-search').addEventListener('click', function() {
+ let townName = document.getElementById('current-town').value;
+ localStorage.setItem('previousTown', townName);
+ weatherOfTheDay(townName);
+
+});
+ window.onload = function() {
+  let previousTown = localStorage.getItem('previousTown');
+  //need conditional
+  if (previousTown) {
+    weatherOfTheDay(previousTown);
+    document.getElementById('current-town').value = previousTown;
+  }
+ }
diff --git a/style.css b/style.css
@@ -0,0 +1,4 @@
+.city-searched-here {
+ color: palevioletred;
+
+}