diff --git a/.gitignore b/.gitignore new file mode 100644 index 00000000..a2d72a24 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +config.js \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 00000000..f0373a80 --- /dev/null +++ b/index.html @@ -0,0 +1,44 @@ + + + + + + + + Weather Project + + +
+

Weather Project

+ +
+
+
+ + +
+
+ +
+
+
+
+
+
+
+
+ + + diff --git a/main.js b/main.js new file mode 100644 index 00000000..b765ce68 --- /dev/null +++ b/main.js @@ -0,0 +1,125 @@ +import { API_KEY } from "./config.js"; + +let currentWeatherData = []; +let fiveDayForecastData = []; + +let renderCurrentWeather = () => { + document.querySelector('#currentWeather').replaceChildren(); + + for (let i = 0; i < currentWeatherData.length; i++) { + const template = ` +
+

${Math.ceil(currentWeatherData[i].temperature)}°

+

${currentWeatherData[i].cityName}

+

${currentWeatherData[i].weatherCondition}

+
+
+ +
+ ` + document.querySelector("#currentWeather").insertAdjacentHTML("beforeend", template); + } +} + +let renderFiveDayWeather = () => { + document.querySelector('.card-group').replaceChildren(); + + for( let i = 0; i < fiveDayForecastData.length; i++) { + let dayData = fiveDayForecastData[i]; + const template = ` +
+
+

${dayData.condition}

+

${dayData.temp}°

+ weather icon +

${dayData.day}

+
+
+ ` + document.querySelector(".card-group").insertAdjacentHTML("beforeend", template); + } +} + +document.querySelector("#searchBtn").addEventListener("click", (e) => { + e.preventDefault(); + + let search = document.querySelector("#inlineFormInputName").value; + + fetchCurrentWeather(search); + fetchfiveDayWeather(search); + + document.querySelector("#inlineFormInputName").value = ""; +}); + +let fetchCurrentWeather = (city) => { + const weatherUrl = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${API_KEY}&units=imperial`; + + fetch(weatherUrl , { + method: "GET", + dataType: "json" + }) + .then(res => res.json()) + .then(res => { + addCurrentWeather(res); + }) +} + +let fetchfiveDayWeather = (city) => { + const fiveDayWeatherUrl = `https://api.openweathermap.org/data/2.5/forecast?q=${city}&appid=${API_KEY}&units=imperial`; + + fetch(fiveDayWeatherUrl, { + method: "GET", + dataType: "json" + }) + .then(res => res.json()) + .then(res => { + + addFiveDayWeather(res); + }) +} + +let addFiveDayWeather = (data) => { + fiveDayForecastData = []; + + for (let i = 0; i < data.list.length; i += 8) { + const days = data.list.slice(i, i + 8); + + const temps = days.map(value => value.main.temp); + const avgTemp = temps.reduce((sum, t) => sum + t, 0)/temps.length; + const roundedTemp = Math.ceil(avgTemp); + + const date = new Date(days[0].dt_txt); + const dayNames = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]; + const dayOfWeek = dayNames[date.getDay()]; + + const icon = `https://openweathermap.org/img/wn/${days[0].weather[0].icon}@2x.png`; + + const condition = days[0].weather[0].main; + + fiveDayForecastData.push({ + condition: condition, + temp: roundedTemp, + icon: icon, + day: dayOfWeek, + }); + } + + renderFiveDayWeather(fiveDayForecastData); +} + +let addCurrentWeather = (res) => { + currentWeatherData = []; + + const weatherProfile = { + temperature: res.main.temp, + cityName: res.name, + weatherCondition: res.weather[0].main, + weatherIcon: `https://openweathermap.org/img/wn/${res.weather[0].icon}@2x.png` + } + + currentWeatherData.push(weatherProfile); + + renderCurrentWeather(currentWeatherData); +} + + diff --git a/styles.css b/styles.css new file mode 100644 index 00000000..9703e0f6 --- /dev/null +++ b/styles.css @@ -0,0 +1,35 @@ +h1 { + font-weight: bold; + font-size: 60px; +} + +.row { + margin-top: 60px; +} + +#currentWeather { + display:flex; + justify-content: center; + align-items: center; + gap: 300px; + margin-top: 40px; +} + +.city { + font-size: 30px; + font-weight: bold; +} + +.card { + max-width: 250px; +} + +.card-group { + justify-content: center; + margin-top: 40px; +} + +.card-text { + font-weight: bold; +} +