diff --git a/index.html b/index.html new file mode 100644 index 00000000..c44609e9 --- /dev/null +++ b/index.html @@ -0,0 +1,53 @@ + + + + + + + + + + + + +
+
+
+
+

The Weather App

+
+
+ +
+

Search City

+ +
+ +
+ + +
+ +
+
+
+
+
+
+ + + + diff --git a/main.js b/main.js new file mode 100644 index 00000000..746abaf1 --- /dev/null +++ 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 { + 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 = + ` +
+
+

${curWeather.temp}\u00B0F

+

${curWeather.city}

+

${curWeather.description}

+
+
+ Weather Icon +
+
+ `; + + document.querySelector('.current-weather').insertAdjacentHTML('beforeend', curWeatherTemplate); +}; + +const renderFiveDay = () => { + document.querySelector('.five-day').replaceChildren(); + + const fiveDayTemplate = fiveDayForecast.map(day => { + return ` +
+
+
+

${day.description}

+

${day.temp}\u00B0F

+ Icon +

${day.day}

+
+
+
+ `; + }).join(''); + + document.querySelector('.five-day').insertAdjacentHTML('beforeend', fiveDayTemplate); +}; diff --git a/style.css b/style.css new file mode 100644 index 00000000..dd00a912 --- /dev/null +++ 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; +}