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

Weather Project

+
+
+ + +
+
+
+

+ Weather icon +

+
+
+

5-Day Forecast

+
+ +
+
+
+ + + \ No newline at end of file diff --git a/main.js b/main.js new file mode 100644 index 00000000..a7cb3faa --- /dev/null +++ b/main.js @@ -0,0 +1,79 @@ +const apiKey = "ee02afd279ba852f5518dbe94195f595"; + +const searchButton = document.querySelector(".btn-primary"); +const cityInput = document.querySelector('.form-control'); +const weatherContainer = document.getElementById('weather-container'); +const currentWeatherDiv = document.querySelector('.current-weather'); +const forecastDiv = document.querySelector('.forecast'); + +currentWeatherDiv.style.display = 'none'; +forecastDiv.style.display = 'none'; + +searchButton.addEventListener('click', () => { + const city = cityInput.value; + if (!city) { + alert('No city name given'); + return; + } + fetchCurrentWeather(city); + fetchForecast(city); +}); + +function fetchCurrentWeather(city) { + const url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&units=imperial&appid=${apiKey}`; + fetch(url) + .then((response) => response.json()) + .then(function (data) { + const cityNameElement = document.getElementById('city-name'); + const weatherIconElement = document.getElementById('current-weather-icon'); + const tempElement = document.getElementById('current-temp'); + + cityNameElement.textContent = data.name; + weatherIconElement.src = `https://openweathermap.org/img/wn/${data.weather[0].icon}@2x.png`; + weatherIconElement.alt = data.weather[0].description; + tempElement.textContent = `${data.main.temp} °F - ${data.weather[0].description}`; + + currentWeatherDiv.style.display = 'block'; + }) + .catch((error) => { + console.error('Error, didn\'t fetch weather', error); + }); +} + +function fetchForecast(city) { + const url = `https://api.openweathermap.org/data/2.5/forecast?q=${city}&units=imperial&appid=${apiKey}`; + fetch(url) + .then((response) => response.json()) + .then(function (data) { + const forecastDaysElement = document.getElementById("forecast-days"); + forecastDaysElement.innerHTML = ''; // + + for (let i = 0; i < data.list.length; i += 8) { // + const entry = data.list[i]; + const date = new Date(entry.dt * 1000); + const dayName = date.toLocaleDateString("en-US", { weekday: "long" }); + + const forecastDayDiv = document.createElement('div'); + forecastDayDiv.className = 'forecast-day'; + + const dayElement = document.createElement('h3'); + dayElement.textContent = dayName; + + const weatherIcon = document.createElement('img'); + weatherIcon.src = `https://openweathermap.org/img/wn/${entry.weather[0].icon}@2x.png`; + + const tempElement = document.createElement('p'); + tempElement.textContent = `${entry.main.temp} °F - ${entry.weather[0].description}`; + + forecastDayDiv.appendChild(dayElement); + forecastDayDiv.appendChild(weatherIcon); + forecastDayDiv.appendChild(tempElement); + forecastDaysElement.appendChild(forecastDayDiv); + } + + forecastDiv.style.display = 'block'; + }) + .catch((error) => { + console.error('Error, didn\'t fetch forecast:', error); + }); +} diff --git a/style.css b/style.css new file mode 100644 index 00000000..e510fd73 --- /dev/null +++ b/style.css @@ -0,0 +1,68 @@ +h1 { + text-align: center; +} + +.form-control { + padding-left: 5; + margin-left: 502px; +} + +.btn { + margin-right: 500px; +} + +.current-weather { + text-align: center; +} + +.current-weather img { + width: 100px; + height: 100px; +} + +.current-weather h2 { + margin-bottom: 10px; + +} + +.current-weather p { + margin: 5px 0; +} + +.forecast { + margin-top: 20px; +} + +.forecast h2 { + text-align: center; + margin-bottom: 20px; +} + +.forecast-day { + display: inline-block; + width: calc(20% - 16px); + margin: 0 3px; + text-align: center; + padding: 10px; + background-color: #ffffff; + border: 1px solid #dee2e6; + border-radius: 8px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); +} + +.forecast-day img { + display: block; + margin: 0 auto 10px; + width: 80px; + height: 80px; +} + +.forecast-day h3 { + margin-bottom: 8px; +} + +.forecast-day p { + margin: 4px 0; +} + +