From 9ae3925d99881efc2417a90f0bd2eb17d374f3ab Mon Sep 17 00:00:00 2001 From: Ronin619 Date: Thu, 4 Dec 2025 21:09:01 -0500 Subject: [PATCH 1/7] feat: implement form layout --- index.html | 38 ++++++++++++++++++++++++++++++++++++++ main.js | 0 styles.css | 8 ++++++++ 3 files changed, 46 insertions(+) create mode 100644 index.html create mode 100644 main.js create mode 100644 styles.css diff --git a/index.html b/index.html new file mode 100644 index 00000000..cd03d992 --- /dev/null +++ b/index.html @@ -0,0 +1,38 @@ + + + + + + + + Weather Project + + +
+

Weather Project

+ +
+
+
+ + +
+
+ +
+
+
+
+ + + diff --git a/main.js b/main.js new file mode 100644 index 00000000..e69de29b diff --git a/styles.css b/styles.css new file mode 100644 index 00000000..e356115d --- /dev/null +++ b/styles.css @@ -0,0 +1,8 @@ +h1 { + font-weight: bold; + font-size: 60px; +} + +.row { + margin-top: 60px; +} \ No newline at end of file From 7ad643d897a5d47e4412ac2f7cd2eecb91537eee Mon Sep 17 00:00:00 2001 From: Ronin619 Date: Fri, 5 Dec 2025 21:58:04 -0500 Subject: [PATCH 2/7] implement fetch weather function --- .gitignore | 1 + index.html | 7 +++++-- main.js | 23 +++++++++++++++++++++++ 3 files changed, 29 insertions(+), 2 deletions(-) create mode 100644 .gitignore 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 index cd03d992..ee4c1f63 100644 --- a/index.html +++ b/index.html @@ -28,11 +28,14 @@

Weather Project

/>
- +
- +
+ diff --git a/main.js b/main.js index e69de29b..c3c45757 100644 --- a/main.js +++ b/main.js @@ -0,0 +1,23 @@ +import { API_KEY } from "./config.js"; +const currentWeather = document.getElementsByClassName("current-weather"); + +let weatherData = []; + +document.querySelector("#searchBtn").addEventListener("click", (e) => { + e.preventDefault(); + + const search = document.querySelector("#inlineFormInputName").value; + + fetchWeather(search); +}) + +let fetchWeather = (city) => { + const url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${API_KEY}&units=imperial` + + fetch(url, { + method: "GET", + dataType: "json" + }) + .then(data => data.json()) + .then(data => console.log(data)) +} \ No newline at end of file From 48330e4b4c9b25b57a41033b94950b97fd8f1ed7 Mon Sep 17 00:00:00 2001 From: Ronin619 Date: Fri, 5 Dec 2025 22:15:42 -0500 Subject: [PATCH 3/7] update: fetchWeather function --- main.js | 22 +++++++++++++++++----- 1 file changed, 17 insertions(+), 5 deletions(-) diff --git a/main.js b/main.js index c3c45757..5058b3de 100644 --- a/main.js +++ b/main.js @@ -3,6 +3,10 @@ const currentWeather = document.getElementsByClassName("current-weather"); let weatherData = []; +let renderWeather = (res, iconUrl) => { + +} + document.querySelector("#searchBtn").addEventListener("click", (e) => { e.preventDefault(); @@ -12,12 +16,20 @@ document.querySelector("#searchBtn").addEventListener("click", (e) => { }) let fetchWeather = (city) => { - const url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${API_KEY}&units=imperial` + const weatherUrl = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${API_KEY}&units=imperial` - fetch(url, { + fetch(weatherUrl , { method: "GET", dataType: "json" }) - .then(data => data.json()) - .then(data => console.log(data)) -} \ No newline at end of file + .then(res => res.json()) + .then(res => { + + const icon = res.weather[0].icon; + + const iconUrl = `https://openweathermap.org/img/wn/${icon}@2x.png`; + + renderWeather(res, iconUrl); + }) +} + From 80dbf1f382e0f2cbab4f1f51a65cdd56d9f63440 Mon Sep 17 00:00:00 2001 From: Ronin619 Date: Sun, 7 Dec 2025 16:32:14 -0500 Subject: [PATCH 4/7] feat: implement renderWeather function --- index.html | 4 +++- main.js | 45 +++++++++++++++++++++++++++++++++++---------- styles.css | 13 +++++++++++++ 3 files changed, 51 insertions(+), 11 deletions(-) diff --git a/index.html b/index.html index ee4c1f63..1575ac01 100644 --- a/index.html +++ b/index.html @@ -35,7 +35,9 @@

Weather Project

-
+
+
+
diff --git a/main.js b/main.js index 5058b3de..9d718f88 100644 --- a/main.js +++ b/main.js @@ -1,19 +1,35 @@ import { API_KEY } from "./config.js"; -const currentWeather = document.getElementsByClassName("current-weather"); let weatherData = []; -let renderWeather = (res, iconUrl) => { - +let renderWeather = () => { + document.querySelector('#currentWeather').replaceChildren(); + + for (let i = 0; i < weatherData.length; i++) { + const template = ` +
+

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

+

${weatherData[i].cityName}

+

${weatherData[i].weatherCondition}

+
+
+ +
+ ` + document.querySelector("#currentWeather").insertAdjacentHTML("beforeend", template); + } } + document.querySelector("#searchBtn").addEventListener("click", (e) => { e.preventDefault(); - const search = document.querySelector("#inlineFormInputName").value; + let search = document.querySelector("#inlineFormInputName").value; fetchWeather(search); -}) + + search = ""; +}); let fetchWeather = (city) => { const weatherUrl = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${API_KEY}&units=imperial` @@ -24,12 +40,21 @@ let fetchWeather = (city) => { }) .then(res => res.json()) .then(res => { + addWeather(res); + }) +} - const icon = res.weather[0].icon; +let addWeather = (res) => { + weatherData = []; - const iconUrl = `https://openweathermap.org/img/wn/${icon}@2x.png`; + 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` + } - renderWeather(res, iconUrl); - }) -} + weatherData.push(weatherProfile); + renderWeather(weatherData); +} diff --git a/styles.css b/styles.css index e356115d..15a4d95a 100644 --- a/styles.css +++ b/styles.css @@ -5,4 +5,17 @@ h1 { .row { margin-top: 60px; +} + +#currentWeather { + display:flex; + justify-content: center; + align-items: center; + gap: 150px; + margin-top: 40px; +} + +.city { + font-size: 30px; + font-weight: bold; } \ No newline at end of file From 1c575015533a7cb10d78d912f15fa615f7676242 Mon Sep 17 00:00:00 2001 From: Ronin619 Date: Sun, 7 Dec 2025 16:47:01 -0500 Subject: [PATCH 5/7] update fetchWeather function to fetchCurrentWeather and weatherData array to currentWEatherData --- main.js | 27 ++++++++++++++++----------- 1 file changed, 16 insertions(+), 11 deletions(-) diff --git a/main.js b/main.js index 9d718f88..b6596f29 100644 --- a/main.js +++ b/main.js @@ -1,19 +1,20 @@ import { API_KEY } from "./config.js"; -let weatherData = []; +let currentWeatherData = []; +let fiveDayForecastData = []; let renderWeather = () => { document.querySelector('#currentWeather').replaceChildren(); - for (let i = 0; i < weatherData.length; i++) { + for (let i = 0; i < currentWeatherData.length; i++) { const template = `
-

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

-

${weatherData[i].cityName}

-

${weatherData[i].weatherCondition}

+

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

+

${currentWeatherData[i].cityName}

+

${currentWeatherData[i].weatherCondition}

- +
` document.querySelector("#currentWeather").insertAdjacentHTML("beforeend", template); @@ -26,12 +27,12 @@ document.querySelector("#searchBtn").addEventListener("click", (e) => { let search = document.querySelector("#inlineFormInputName").value; - fetchWeather(search); + fetchCurrentWeather(search); search = ""; }); -let fetchWeather = (city) => { +let fetchCurrentWeather = (city) => { const weatherUrl = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${API_KEY}&units=imperial` fetch(weatherUrl , { @@ -44,8 +45,12 @@ let fetchWeather = (city) => { }) } +let fetchfiveDayWeather = (city) => { + +} + let addWeather = (res) => { - weatherData = []; + currentWeatherData = []; const weatherProfile = { temperature: res.main.temp, @@ -54,7 +59,7 @@ let addWeather = (res) => { weatherIcon: `https://openweathermap.org/img/wn/${res.weather[0].icon}@2x.png` } - weatherData.push(weatherProfile); + currentWeatherData.push(weatherProfile); - renderWeather(weatherData); + renderWeather(currentWeatherData); } From 32122a3cdcca41035f1b6f2d2026bfbc895c11c1 Mon Sep 17 00:00:00 2001 From: Ronin619 Date: Sun, 7 Dec 2025 17:52:56 -0500 Subject: [PATCH 6/7] update renderWeather to renderCurrentWeather function --- main.js | 20 +++++++++++++++----- 1 file changed, 15 insertions(+), 5 deletions(-) diff --git a/main.js b/main.js index b6596f29..2f18f6c1 100644 --- a/main.js +++ b/main.js @@ -3,7 +3,7 @@ import { API_KEY } from "./config.js"; let currentWeatherData = []; let fiveDayForecastData = []; -let renderWeather = () => { +let renderCurrentWeather = () => { document.querySelector('#currentWeather').replaceChildren(); for (let i = 0; i < currentWeatherData.length; i++) { @@ -28,12 +28,13 @@ document.querySelector("#searchBtn").addEventListener("click", (e) => { let search = document.querySelector("#inlineFormInputName").value; fetchCurrentWeather(search); + fetchfiveDayWeather(search); search = ""; }); let fetchCurrentWeather = (city) => { - const weatherUrl = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${API_KEY}&units=imperial` + const weatherUrl = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${API_KEY}&units=imperial`; fetch(weatherUrl , { method: "GET", @@ -41,15 +42,24 @@ let fetchCurrentWeather = (city) => { }) .then(res => res.json()) .then(res => { - addWeather(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 => { + console.log(res); + }) } -let addWeather = (res) => { +let addCurrentWeather = (res) => { currentWeatherData = []; const weatherProfile = { @@ -61,5 +71,5 @@ let addWeather = (res) => { currentWeatherData.push(weatherProfile); - renderWeather(currentWeatherData); + renderCurrentWeather(currentWeatherData); } From c42201052f40ddbf2ccf8d17d1a4c03e4b6337d4 Mon Sep 17 00:00:00 2001 From: Ronin619 Date: Sun, 7 Dec 2025 20:53:12 -0500 Subject: [PATCH 7/7] complete part 1 and 2 --- index.html | 1 + main.js | 54 ++++++++++++++++++++++++++++++++++++++++++++++++++++-- styles.css | 18 ++++++++++++++++-- 3 files changed, 69 insertions(+), 4 deletions(-) diff --git a/index.html b/index.html index 1575ac01..f0373a80 100644 --- a/index.html +++ b/index.html @@ -38,6 +38,7 @@

Weather Project

+
diff --git a/main.js b/main.js index 2f18f6c1..b765ce68 100644 --- a/main.js +++ b/main.js @@ -21,6 +21,24 @@ let renderCurrentWeather = () => { } } +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(); @@ -30,7 +48,7 @@ document.querySelector("#searchBtn").addEventListener("click", (e) => { fetchCurrentWeather(search); fetchfiveDayWeather(search); - search = ""; + document.querySelector("#inlineFormInputName").value = ""; }); let fetchCurrentWeather = (city) => { @@ -55,10 +73,40 @@ let fetchfiveDayWeather = (city) => { }) .then(res => res.json()) .then(res => { - console.log(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 = []; @@ -73,3 +121,5 @@ let addCurrentWeather = (res) => { renderCurrentWeather(currentWeatherData); } + + diff --git a/styles.css b/styles.css index 15a4d95a..9703e0f6 100644 --- a/styles.css +++ b/styles.css @@ -11,11 +11,25 @@ h1 { display:flex; justify-content: center; align-items: center; - gap: 150px; + gap: 300px; margin-top: 40px; } .city { font-size: 30px; font-weight: bold; -} \ No newline at end of file +} + +.card { + max-width: 250px; +} + +.card-group { + justify-content: center; + margin-top: 40px; +} + +.card-text { + font-weight: bold; +} +