From 925eb90249d03a50a6dc565774aa3d8f61dd4682 Mon Sep 17 00:00:00 2001 From: EvelynBell <163486317+EvelynBell@users.noreply.github.com> Date: Thu, 16 May 2024 10:52:23 -0400 Subject: [PATCH 1/2] Add files via upload --- index.html | 48 +++++++++++++++++++++++ main.js | 112 +++++++++++++++++++++++++++++++++++++++++++++++++++++ style.css | 17 ++++++++ 3 files changed, 177 insertions(+) create mode 100644 index.html create mode 100644 main.js create mode 100644 style.css diff --git a/index.html b/index.html new file mode 100644 index 00000000..6ad3c6d1 --- /dev/null +++ b/index.html @@ -0,0 +1,48 @@ + + + + Weather Project + + + + +
+
+
+
+

Weather Project

+
+
+
+ +
+
+
+
+ + +
+
+ +
+
+
+
+ +
+
+
+
+
+
+ +
+
+
+
+
+
+
+ + + \ No newline at end of file diff --git a/main.js b/main.js new file mode 100644 index 00000000..385c60c3 --- /dev/null +++ b/main.js @@ -0,0 +1,112 @@ +const daysOfWeek = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']; +const currentDate = new Date(); + +document.getElementById('submit-search').addEventListener('click', function () { + cityName = document.getElementById('location').value; + fetchFromCityLocation(cityName); +}); + +const fetchWeatherData = function (lat, lon, city) { + const fetchUrl = `https://api.openweathermap.org/data/2.5/forecast?lat=${lat}&lon=${lon}&appid=ca90637f0ed0bcfecc469a57ea89c230`; + + fetch(fetchUrl, { + method: 'GET', + dataType: 'json' + }).then(data => data.json()).then(data => readWeatherData(data, city)); +} + +const fetchFromCityLocation = function (city) { + const geoUrl = `https://api.openweathermap.org/geo/1.0/direct?q=${city}&limit=1&appid=ca90637f0ed0bcfecc469a57ea89c230`; + + fetch(geoUrl, { + method: 'GET', + dataType: 'json' + }).then(data => data.json()).then(data => fetchWeatherData(data[0].lat, data[0].lon, city)); +} + +const readWeatherData = function (data, city) { + const weatherData = []; + + for(let i = 0; i < data.list.length; i += 8) { + const currentWeatherData = data.list[i]; + + const weather = { + temp: ((currentWeatherData.main.temp - 273.15) * (9/5) + 32), + main: currentWeatherData.weather[0].main + }; + + weatherData.push(weather); + } + + console.log(weatherData); + renderWeather(weatherData, city); +} + +const renderWeather = function (weatherData, city) { + if(document.querySelector('.main-weather').hasChildNodes() && document.querySelector('.sub-weather').hasChildNodes()) { + document.querySelector('.main-weather').replaceChildren(); + document.querySelector('.sub-weather').replaceChildren(); + } + + + for(let i = 0; i < weatherData.length; i++) { + const mainWeatherTemplate = ` +
+
+ +
+
+ ${weatherData[i].main} Icon +
+
`; + + const subWeatherTemplate = ` +
+
+ + ${weatherData[i].main} Icon +

${returnDayOfWeek(i)}

+
+
`; + + if(i != 0) { + document.querySelector('.sub-weather').insertAdjacentHTML('beforeend', subWeatherTemplate); + } else { + document.querySelector('.main-weather').insertAdjacentHTML('beforeend', mainWeatherTemplate); + } + } +} + +const returnWeatherIcon = function (description) { + switch(description) { + case 'Thunderstorm': + return '11'; + case 'Drizzle': + return '09'; + case 'Rain': + return '10'; + case 'Snow': + return '13'; + case 'Atmosphere': + return '50'; + case 'Clear': + return '01'; + case 'Clouds': + return '04'; + } +} + +const returnDayOfWeek = function (offset) { + let currentDay = currentDate.getDay() + offset; + if (currentDay > 6) { + currentDay -= 7; + } + return daysOfWeek[currentDay]; +} \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 00000000..98559b04 --- /dev/null +++ b/style.css @@ -0,0 +1,17 @@ +.form-control { + margin: 10px 10px; +} + +.no-padding-left { + padding-left: 0px; +} + +.sub-weather-item { + border-style: solid; + border-color: black; + border-width: 2px; +} + +#location { + width: 400px; +} \ No newline at end of file From 645e2b2795e2972717d9323842d4784ec3e8496a Mon Sep 17 00:00:00 2001 From: EvelynBell <163486317+EvelynBell@users.noreply.github.com> Date: Mon, 20 May 2024 09:11:16 -0400 Subject: [PATCH 2/2] Update main.js --- main.js | 18 ++++++++---------- 1 file changed, 8 insertions(+), 10 deletions(-) diff --git a/main.js b/main.js index 385c60c3..1ac22b2b 100644 --- a/main.js +++ b/main.js @@ -6,7 +6,7 @@ document.getElementById('submit-search').addEventListener('click', function () { fetchFromCityLocation(cityName); }); -const fetchWeatherData = function (lat, lon, city) { +const fetchWeatherData = lat, lon, city => { const fetchUrl = `https://api.openweathermap.org/data/2.5/forecast?lat=${lat}&lon=${lon}&appid=ca90637f0ed0bcfecc469a57ea89c230`; fetch(fetchUrl, { @@ -15,7 +15,7 @@ const fetchWeatherData = function (lat, lon, city) { }).then(data => data.json()).then(data => readWeatherData(data, city)); } -const fetchFromCityLocation = function (city) { +const fetchFromCityLocation = city => { const geoUrl = `https://api.openweathermap.org/geo/1.0/direct?q=${city}&limit=1&appid=ca90637f0ed0bcfecc469a57ea89c230`; fetch(geoUrl, { @@ -24,7 +24,7 @@ const fetchFromCityLocation = function (city) { }).then(data => data.json()).then(data => fetchWeatherData(data[0].lat, data[0].lon, city)); } -const readWeatherData = function (data, city) { +const readWeatherData = city => { const weatherData = []; for(let i = 0; i < data.list.length; i += 8) { @@ -37,12 +37,10 @@ const readWeatherData = function (data, city) { weatherData.push(weather); } - - console.log(weatherData); renderWeather(weatherData, city); } -const renderWeather = function (weatherData, city) { +const renderWeather = weatherData, city => { if(document.querySelector('.main-weather').hasChildNodes() && document.querySelector('.sub-weather').hasChildNodes()) { document.querySelector('.main-weather').replaceChildren(); document.querySelector('.sub-weather').replaceChildren(); @@ -76,7 +74,7 @@ const renderWeather = function (weatherData, city) { `; - if(i != 0) { + if (i != 0) { document.querySelector('.sub-weather').insertAdjacentHTML('beforeend', subWeatherTemplate); } else { document.querySelector('.main-weather').insertAdjacentHTML('beforeend', mainWeatherTemplate); @@ -84,7 +82,7 @@ const renderWeather = function (weatherData, city) { } } -const returnWeatherIcon = function (description) { +const returnWeatherIcon = description => { switch(description) { case 'Thunderstorm': return '11'; @@ -103,10 +101,10 @@ const returnWeatherIcon = function (description) { } } -const returnDayOfWeek = function (offset) { +const returnDayOfWeek = offset => { let currentDay = currentDate.getDay() + offset; if (currentDay > 6) { currentDay -= 7; } return daysOfWeek[currentDay]; -} \ No newline at end of file +}