diff --git a/README.md b/README.md deleted file mode 100644 index 4638c655..00000000 --- a/README.md +++ /dev/null @@ -1,5 +0,0 @@ -## Weather Project - -This project has been created by a student at Parsity, an online software engineering course. The work in this repository is wholly of the student based on a sample starter project that can be accessed by looking at the repository that this project forks. - -If you have any questions about this project or the program in general, visit [parsity.io](https://parsity.io/) or email hello@parsity.io. diff --git a/weather.html b/weather.html new file mode 100644 index 00000000..ea750f75 --- /dev/null +++ b/weather.html @@ -0,0 +1,32 @@ + + + + + + Bootstrap demo + + + + +
+

Weather Project

+
+
+ + +
+
+ +
+
+ +
+
+ + + + + diff --git a/weather.js b/weather.js new file mode 100644 index 00000000..798c85e1 --- /dev/null +++ b/weather.js @@ -0,0 +1,106 @@ + +const inputElement = document.getElementById("city-name"); +const submitButton = document.getElementById("handleSubmit"); + +let todaysForecastContainer = document.getElementById( + "todays-forecast-container" +); +let fiveDayForecastContainer = document.getElementById( + "five-day-forecast-container" +); + +let weatherData = []; + +const fetchWeatherData = (cityName) => { + const apiKey = "63168e96197ab571649bdefbef398926"; + const currentWeatherUrl = `https://api.openweathermap.org/data/2.5/weather?q=${cityName}&appid=${apiKey}&units=imperial`; + const forecastWeatherUrl = `https://api.openweathermap.org/data/2.5/forecast?q=${cityName}&appid=${apiKey}&units=imperial`; + + fetch(currentWeatherUrl) + .then((response) => { + if (!response.ok) { + throw new Error(response.status); + } + return response.json(); + }) + .then((data) => addCurrentWeather(data)) + .catch((error) => console.log(error.message)); + + fetch(forecastWeatherUrl) + .then((response) => { + if (!response.ok) { + throw new Error(response.status); + } + return response.json(); + }) + .then((data) => addForecastWeather(data)) + .catch((error) => console.log(error.message)); +}; + +const addCurrentWeather = (data) => { + weatherData = []; + weatherData.push({ + name: data.name, + temperature: data.main.temp, + description: data.weather[0].description + }); + + renderWeather(); +}; + +const addForecastWeather = (data) => { + data.list.forEach((item) => { + weatherData.push({ + date: new Date(item.dt * 1000), + temperature: item.main.temp, + description: item.weather[0].description + }); + }); + + renderForecast(); +}; + +const renderWeather = () => { + todaysForecastContainer.innerHTML = ""; + + const template = ` +
+
+
+

${weatherData[0].temperature} °F

+

City: ${weatherData[0].name}

+

Conditions: ${weatherData[0].description}

+
+
+
+ `; + + todaysForecastContainer.innerHTML = template; +}; + +const renderForecast = () => { + fiveDayForecastContainer.innerHTML = ""; + + weatherData.slice(1).forEach((item) => { + const template = ` +
+
+
+
${item.date.toLocaleDateString(undefined, { + weekday: "long" + })}
+

${item.temperature} °F

+

${item.description}

+
+
+
+ `; + fiveDayForecastContainer.insertAdjacentHTML("beforeend", template); + }); +}; + +submitButton.addEventListener("click", () => { + const cityName = inputElement.value; + fetchWeatherData(cityName); + inputElement.value = ""; +});