diff --git a/index.html b/index.html new file mode 100644 index 00000000..dd262f9c --- /dev/null +++ b/index.html @@ -0,0 +1,45 @@ + + + + + + + + Weather App + + + +
+
+
+
+

Weather

+
+ +
+
+ + +
+ + +
+
+ + + +
+ +
+ +
+
+ +
+
+
+
+ + + + \ No newline at end of file diff --git a/main.js b/main.js new file mode 100644 index 00000000..16b0cf78 --- /dev/null +++ b/main.js @@ -0,0 +1,220 @@ +// Set current date +const date = new Date(); +const options = { weekday: 'long'}; +const formattedDate = new Intl.DateTimeFormat('en-US', options).format(date); + + +const formattedDates = []; + +for (let i = 0; i < 5; i++) { + const nextDay = new Date(date); + nextDay.setDate(date.getDate() + i + 1); + const formattedDate = new Intl.DateTimeFormat('en-US', options).format(nextDay); + formattedDates.push(formattedDate); +} + +// Get current weather + +var currentWeather = []; + +var weatherForecast = []; + +document.querySelector('.search').addEventListener('click', function () { + var searchLocation = document.querySelector('#search-query').value; + var words = searchLocation.split(' '); + var city = words.join('/'); + + document.querySelector('#search-query').value = ''; + currentWeather = []; + weatherForecast = []; + + fetchLocation(city); + fetchPlace(city); +}); + +var fetchLocation = function(city) { + const apiKey = '0e79198cac257d0139d13e84e8617759' + const url = `http://api.openweathermap.org/geo/1.0/direct?q=${city}&appid=` + apiKey; + fetch(url, { + method: 'GET', + dataType: 'json' + }) + .then(data => data.json()) + .then(data => fetchWeather(data)); +}; + +var fetchWeather = function(data) { + const apiKey = '0e79198cac257d0139d13e84e8617759' + const url = `https://api.openweathermap.org/data/2.5/weather?lat=${data[0].lat}&lon=${data[0].lon}&appid=` + apiKey + `&units=imperial`; + fetch(url, { + method: 'GET', + dataType: 'json' + }) + .then(data => data.json()) + .then(data => addWeather(data)); +}; + +var addWeather = function (data) { + currentWeather.push({ + temp: Math.round(data.main.temp), + name: data.name, + conditions: data.weather[0].main, + icon: `https://openweathermap.org/img/wn/${data.weather[0].icon}@4x.png` + }) + + renderWeather(); +}; + +var renderWeather = function() { + document.querySelector('.current-weather').replaceChildren(); + + for (let i = 0; i < currentWeather.length; i++) { + const weather = currentWeather[i]; + + var template = ` +
+
+

${weather.temp}º

+

${weather.name}

+

${weather.conditions}

+
+
+
+
+ +
+
`; + + document.querySelector('.current-weather').insertAdjacentHTML('beforeend', template); + } +}; + +// Get 5 day forecast + +var fetchPlace = function(city) { + const url = 'http://api.openweathermap.org/geo/1.0/direct?q='; + const apiKey = '&appid=0e79198cac257d0139d13e84e8617759' + const fullUrl = url + city + apiKey; + fetch(fullUrl, { + method: 'GET', + dataType: 'json' + }) + .then(data => data.json()) + .then(data => fetchForecast(data)); +}; + +var fetchForecast = function(data) { + const apiKey = '0e79198cac257d0139d13e84e8617759' + const url = `http://api.openweathermap.org/data/2.5/forecast?lat=${data[0].lat}&lon=${data[0].lon}&appid=${apiKey}&units=imperial`; + + fetch(url, { + method: 'GET', + dataType: 'json' + }) + .then(data => data.json()) + .then(data => addForecast(data)); +}; + +var addForecast = function (data) { + const dayOne = []; + const dayTwo = []; + const dayThree = []; + const dayFour = []; + const dayFive = []; + + dayOne.push({ + conditions: data.list[0].weather[0].main, + temp: Math.round(data.list[0].main.temp), + icon: `https://openweathermap.org/img/wn/${data.list[0].weather[0].icon}@2x.png`, + day: formattedDates[0] + }) + + dayTwo.push({ + conditions: data.list[7].weather[0].main, + temp: Math.round(data.list[7].main.temp), + icon: `https://openweathermap.org/img/wn/${data.list[7].weather[0].icon}@2x.png`, + day: formattedDates[1] + }) + + dayThree.push({ + conditions: data.list[15].weather[0].main, + temp: Math.round(data.list[15].main.temp), + icon: `https://openweathermap.org/img/wn/${data.list[15].weather[0].icon}@2x.png`, + day: formattedDates[2] + }) + + dayFour.push({ + conditions: data.list[23].weather[0].main, + temp: Math.round(data.list[23].main.temp), + icon: `https://openweathermap.org/img/wn/${data.list[23].weather[0].icon}@2x.png`, + day: formattedDates[3] + }) + + dayFive.push({ + conditions: data.list[31].weather[0].main, + temp: Math.round(data.list[31].main.temp), + icon: `https://openweathermap.org/img/wn/${data.list[31].weather[0].icon}@2x.png`, + day: formattedDates[4] + }) + + + weatherForecast.push({ + dayOne, dayTwo, dayThree, dayFour, dayFive + }) + + renderForecast(); +}; + +var renderForecast = function() { + document.querySelector('.weather-forecast').replaceChildren(); + + for (let i = 0; i < weatherForecast.length; i++) { + const weather = weatherForecast[i]; + + var template = ` +
+
+
+ +
+

5 Day Forecast

+
+
+
+
+

${weather.dayOne[0].conditions}

+

${weather.dayOne[0].temp}º

+ +

${weather.dayOne[0].day}

+
+
+

${weather.dayTwo[0].conditions}

+

${weather.dayTwo[0].temp}º

+ +

${weather.dayTwo[0].day}

+
+
+

${weather.dayThree[0].conditions}

+

${weather.dayThree[0].temp}º

+ +

${weather.dayThree[0].day}

+
+
+

${weather.dayFour[0].conditions}

+

${weather.dayFour[0].temp}º

+ +

${weather.dayFour[0].day}

+
+
+

${weather.dayFive[0].conditions}

+

${weather.dayFive[0].temp}º

+ +

${weather.dayFive[0].day}

+
+
+
`; + + document.querySelector('.weather-forecast').insertAdjacentHTML('beforeend', template); + } +}; \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 00000000..db1082f0 --- /dev/null +++ b/style.css @@ -0,0 +1,73 @@ +body { + margin: 50px; +} + +.title { + text-align: center; + font-size: 50px; +} + +.search-form { + display: flex; + align-items: center; +} + +.btn { + width: 100px; +} + +hr { + border: 1px solid black; +} + +.form { + flex: 1; + margin: 25px; + height: 30px; +} + +.container { + width: 100%; + margin: 0 auto; +} + +.current-weather { + padding: 15px; + margin-bottom: 15px; + justify-content: center; +} + +.day-one { + display: inline-block; + max-width: fit-content; +} + +.day-two { + display: inline-block; + max-width: fit-content; +} + +.day-three { + display: inline-block; + max-width: fit-content; +} + +.day-four { + display: inline-block; + max-width: fit-content; +} + +.day-five { + display: inline-block; + max-width: fit-content; +} + +.header { + margin: 10px; + text-align: center; +} + +.row { + justify-content: center; + text-align: center; +}