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

Weather Project

+
+
+
+
+
+ + + + + + + + +
+
+ +
+
+ +
+
+ +
+
+
+
+ +
+
+ + + \ No newline at end of file diff --git a/main.js b/main.js new file mode 100644 index 00000000..6563f5c7 --- /dev/null +++ b/main.js @@ -0,0 +1,76 @@ +document.querySelector('.search').addEventListener('click', function(event) { + event.preventDefault(); + const cityName = document.querySelector('#city-name').value; + + if (!cityName) { + alert("Please enter city name"); + return; + } + + fetchWeather(cityName); + document.querySelector('#city-name').value = ""; +}); + +const fetchWeather = function(cityName) { + const apiKey = `6b1b3ebef7a7e650e8bff4f1b84115be` + const url = `https://api.openweathermap.org/data/2.5/weather?q=${cityName}&appid=${apiKey}&units=imperial`; + + fetch(url, { method: 'GET' }) + .then(response => response.json()) + .then(data => addWeather(data)) + + const fiveDayForecast = `https://api.openweathermap.org/data/2.5/forecast?q=${cityName}&appid=${apiKey}&units=imperial` + + fetch(fiveDayForecast, {method: 'GET'}) + .then(response => response.json()) + .then(data => addForecast(data)) +}; + +const addWeather = (data) => { + const currentWeatherContainer = document.getElementById("current-weather"); + currentWeatherContainer.innerHTML = ""; + + const weatherInfo = { + conditions: data.weather[0].description || null, + temperature: `${data.main.temp}°F` || null, + icon_url: `http://openweathermap.org/img/wn/${data.weather[0].icon}@2x.png` || null, + day: new Date(data.dt * 1000).toLocaleDateString('en-US', { weekday: 'long' }) || null + }; + + + const template = ` +
+

${weatherInfo.conditions}

+

${weatherInfo.temperature}

+ ${weatherInfo.conditions} +

${weatherInfo.day}

+
`; + + document.getElementById("current-weather").insertAdjacentHTML("beforeend", template); + +}; + +const addForecast = (data) => { + const forecastContainer = document.getElementById("forecast-cards"); + forecastContainer.innerHTML = ""; + + for (let i = 0; i < data.list.length; i += 8) { + const forecast = data.list[i]; + const forecastInfo = { + conditions: forecast.weather[0].description || null, + temperature: `${forecast.main.temp}°F` || null, + icon_url: `http://openweathermap.org/img/wn/${forecast.weather[0].icon}@2x.png` || null, + day: new Date(forecast.dt * 1000).toLocaleDateString('en-US', { weekday: 'long' }) || null + }; + + const forecastTemplate = ` +
+

${forecastInfo.conditions}

+

${forecastInfo.temperature}

+ ${forecastInfo.conditions} +

${forecastInfo.day}

+
`; + + forecastContainer.insertAdjacentHTML("beforeend", forecastTemplate); + } +} diff --git a/style.css b/style.css new file mode 100644 index 00000000..c8e00788 --- /dev/null +++ b/style.css @@ -0,0 +1,29 @@ +body { + background-color: rgb(83, 121, 160); +} +.weather-card { + border: 4mm outset rgb(115, 134, 240); + padding: 20px; + text-align: center; + border-radius: 10%; + background-color: rgb(161, 252, 217); + width: 225px; +} +.weather-icon { + font-size: 40px; +} +.forecast-card { + border: 4mm outset rgb(115, 134, 240); + text-align: center; + border-radius: 10%; + background-color: rgb(161, 252, 217); + width: auto; + min-width: 200px; + padding-top: 20px; +} +.forecast-card:hover { + border: 3mm inset rgb(115, 134, 240); +} +.weather-card:hover { + border: 3mm inset rgb(115, 134, 240); +}