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..1ac22b2b --- /dev/null +++ b/main.js @@ -0,0 +1,110 @@ +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 = 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 = 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 = 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); + } + renderWeather(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(); + } + + + 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 = 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 = offset => { + let currentDay = currentDate.getDay() + offset; + if (currentDay > 6) { + currentDay -= 7; + } + return daysOfWeek[currentDay]; +} 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