From e5c239ba0bce1dcf212ef9483fd73b2eacb194b1 Mon Sep 17 00:00:00 2001 From: acl13 <128934431+acl13@users.noreply.github.com> Date: Mon, 5 Aug 2024 13:31:58 -0400 Subject: [PATCH 01/13] initial commit --- index.html | 0 main.js | 0 style.css | 0 3 files changed, 0 insertions(+), 0 deletions(-) create mode 100644 index.html create mode 100644 main.js create mode 100644 style.css diff --git a/index.html b/index.html new file mode 100644 index 00000000..e69de29b diff --git a/main.js b/main.js new file mode 100644 index 00000000..e69de29b diff --git a/style.css b/style.css new file mode 100644 index 00000000..e69de29b From b5aa4815e7e34a360d6d466a10ff2912dbf6c24b Mon Sep 17 00:00:00 2001 From: acl13 <128934431+acl13@users.noreply.github.com> Date: Mon, 5 Aug 2024 13:37:35 -0400 Subject: [PATCH 02/13] create html boilerplate; link bootstrap, css, and js --- index.html | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/index.html b/index.html index e69de29b..952e20a7 100644 --- a/index.html +++ b/index.html @@ -0,0 +1,19 @@ + + + + + + Weather Project + + + + +

Test

+ + + From 5f855e0153de26e66654ce430e6fcb2a395ccaef Mon Sep 17 00:00:00 2001 From: acl13 <128934431+acl13@users.noreply.github.com> Date: Mon, 5 Aug 2024 14:47:48 -0400 Subject: [PATCH 03/13] create page layout with dummy content --- index.html | 86 +++++++++++++++++++++++++++++++++++++++++++++++++++++- style.css | 18 ++++++++++++ 2 files changed, 103 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 952e20a7..13a4e69b 100644 --- a/index.html +++ b/index.html @@ -13,7 +13,91 @@ -

Test

+
+
+
+
+

Weather Project

+
+
+ +
+
+
+
+ +
+
+ +
+
+
+
+ +
+
+

00°

+

City

+

Condition

+
+
+ +
+
+
+
+
+
+
Condition
+
00°
+ +
Weekday
+
+
+
Condition
+
00°
+ +
Weekday
+
+
+
Condition
+
00°
+ +
Weekday
+
+
+
Condition
+
00°
+ +
Weekday
+
+
+
Condition
+
00°
+ +
Weekday
+
+
+
diff --git a/style.css b/style.css index e69de29b..cbff48e1 100644 --- a/style.css +++ b/style.css @@ -0,0 +1,18 @@ +.current-weather img { + max-width: 150px; +} + +.forecast img { + max-width: 50px; + margin: 0px auto; +} + +.justify-center { + display: flex; + flex-direction: column; + justify-content: center; +} + +.border { + border: 1px solid black; +} From 2a6a41ea981a231d9cbb3f052c3e6bb34f272a53 Mon Sep 17 00:00:00 2001 From: acl13 <128934431+acl13@users.noreply.github.com> Date: Tue, 6 Aug 2024 10:56:52 -0400 Subject: [PATCH 04/13] fetch weather data for Charlotte --- main.js | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/main.js b/main.js index e69de29b..076d3157 100644 --- a/main.js +++ b/main.js @@ -0,0 +1,12 @@ +const fetchWeatherData = (city) => { + const url = `https://api.openweathermap.org/data/2.5/forecast?q=${city}&appid=a01dd8f2b7b0fd48756b05d7cb1e2fe5`; + + fetch(url, { + method: "GET", + dataType: "json", + }) + .then((data) => data.json()) + .then((data) => console.log(data)); +}; + +fetchWeatherData("Charlotte"); From be302f7eab472424dfc274b9eabb153c056bdec9 Mon Sep 17 00:00:00 2001 From: acl13 <128934431+acl13@users.noreply.github.com> Date: Tue, 6 Aug 2024 10:59:05 -0400 Subject: [PATCH 05/13] display current weather data for Charlotte --- index.html | 7 ++++--- main.js | 15 ++++++++++++++- 2 files changed, 18 insertions(+), 4 deletions(-) diff --git a/index.html b/index.html index 13a4e69b..5ff3a5c6 100644 --- a/index.html +++ b/index.html @@ -43,12 +43,13 @@

Weather Project

-

00°

-

City

-

Condition

+

00°

+

City

+

Condition

diff --git a/main.js b/main.js index 076d3157..5700b31a 100644 --- a/main.js +++ b/main.js @@ -6,7 +6,20 @@ const fetchWeatherData = (city) => { dataType: "json", }) .then((data) => data.json()) - .then((data) => console.log(data)); + .then((data) => displayCurrentData(data)); }; fetchWeatherData("Charlotte"); + +const displayCurrentData = (data) => { + console.log(data); + const fahrenheitTemp = Math.round((data.list[0].main.temp - 273) * 1.8 + 32); + const iconURL = `https://openweathermap.org/img/wn/${data.list[0].weather[0].icon}@2x.png`; + + document.getElementById("current-temp").textContent = + `${fahrenheitTemp}\u00B0`; + document.getElementById("city").textContent = data.city.name; + document.getElementById("current-condition").textContent = + data.list[0].weather[0].main; + document.getElementById("current-icon").src = iconURL; +}; From ef4d7aee39cf57988333225fbf9a100f31bd2db9 Mon Sep 17 00:00:00 2001 From: acl13 <128934431+acl13@users.noreply.github.com> Date: Tue, 6 Aug 2024 11:14:23 -0400 Subject: [PATCH 06/13] create function to convert kelvin to fahrenheit; use for temperature data --- main.js | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/main.js b/main.js index 5700b31a..cac99676 100644 --- a/main.js +++ b/main.js @@ -6,14 +6,14 @@ const fetchWeatherData = (city) => { dataType: "json", }) .then((data) => data.json()) - .then((data) => displayCurrentData(data)); + .then((data) => displayCurrentWeather(data)); }; fetchWeatherData("Charlotte"); -const displayCurrentData = (data) => { +const displayCurrentWeather = (data) => { console.log(data); - const fahrenheitTemp = Math.round((data.list[0].main.temp - 273) * 1.8 + 32); + const fahrenheitTemp = convertKelvinToFahrenheit(data.list[0].main.temp); const iconURL = `https://openweathermap.org/img/wn/${data.list[0].weather[0].icon}@2x.png`; document.getElementById("current-temp").textContent = @@ -23,3 +23,9 @@ const displayCurrentData = (data) => { data.list[0].weather[0].main; document.getElementById("current-icon").src = iconURL; }; + +const displayForecast = (data) => {}; + +const convertKelvinToFahrenheit = (deg) => { + return Math.round((deg - 273) * 1.8 + 32); +}; From 22e83c6e0f916585872d00dd9425c8c832ae66c0 Mon Sep 17 00:00:00 2001 From: acl13 <128934431+acl13@users.noreply.github.com> Date: Tue, 6 Aug 2024 11:39:01 -0400 Subject: [PATCH 07/13] display 5 day forecast data --- index.html | 25 +++++++++++++++---------- main.js | 52 +++++++++++++++++++++++++++++++++++++++++++++++++--- 2 files changed, 64 insertions(+), 13 deletions(-) diff --git a/index.html b/index.html index 5ff3a5c6..98ddad00 100644 --- a/index.html +++ b/index.html @@ -58,41 +58,46 @@

Condition

-
Condition
-
00°
+
Condition
+
00°
Weekday
-
Condition
-
00°
+
Condition
+
00°
Weekday
-
Condition
-
00°
+
Condition
+
00°
Weekday
-
Condition
-
00°
+
Condition
+
00°
Weekday
-
Condition
-
00°
+
Condition
+
00°
Weekday
diff --git a/main.js b/main.js index cac99676..9c46544d 100644 --- a/main.js +++ b/main.js @@ -6,13 +6,12 @@ const fetchWeatherData = (city) => { dataType: "json", }) .then((data) => data.json()) - .then((data) => displayCurrentWeather(data)); + .then((data) => displayWeatherData(data)); }; fetchWeatherData("Charlotte"); const displayCurrentWeather = (data) => { - console.log(data); const fahrenheitTemp = convertKelvinToFahrenheit(data.list[0].main.temp); const iconURL = `https://openweathermap.org/img/wn/${data.list[0].weather[0].icon}@2x.png`; @@ -24,7 +23,54 @@ const displayCurrentWeather = (data) => { document.getElementById("current-icon").src = iconURL; }; -const displayForecast = (data) => {}; +const displayForecast = (data) => { + console.log(data); + const dayOne = data.list[7]; + const dayTwo = data.list[15]; + const dayThree = data.list[23]; + const dayFour = data.list[31]; + const dayFive = data.list[39]; + + document.getElementById("day-one-condition").textContent = + dayOne.weather[0].main; + document.getElementById("day-one-temp").textContent = + `${convertKelvinToFahrenheit(dayOne.main.temp)}\u00B0`; + document.getElementById("day-one-icon").src = + `https://openweathermap.org/img/wn/${dayOne.weather[0].icon}@2x.png`; + + document.getElementById("day-two-condition").textContent = + dayTwo.weather[0].main; + document.getElementById("day-two-temp").textContent = + `${convertKelvinToFahrenheit(dayTwo.main.temp)}\u00B0`; + document.getElementById("day-two-icon").src = + `https://openweathermap.org/img/wn/${dayTwo.weather[0].icon}@2x.png`; + + document.getElementById("day-three-condition").textContent = + dayThree.weather[0].main; + document.getElementById("day-three-temp").textContent = + `${convertKelvinToFahrenheit(dayThree.main.temp)}\u00B0`; + document.getElementById("day-three-icon").src = + `https://openweathermap.org/img/wn/${dayThree.weather[0].icon}@2x.png`; + + document.getElementById("day-four-condition").textContent = + dayFour.weather[0].main; + document.getElementById("day-four-temp").textContent = + `${convertKelvinToFahrenheit(dayFour.main.temp)}\u00B0`; + document.getElementById("day-four-icon").src = + `https://openweathermap.org/img/wn/${dayFour.weather[0].icon}@2x.png`; + + document.getElementById("day-five-condition").textContent = + dayFive.weather[0].main; + document.getElementById("day-five-temp").textContent = + `${convertKelvinToFahrenheit(dayFive.main.temp)}\u00B0`; + document.getElementById("day-five-icon").src = + `https://openweathermap.org/img/wn/${dayFive.weather[0].icon}@2x.png`; +}; + +const displayWeatherData = (data) => { + displayCurrentWeather(data); + displayForecast(data); +}; const convertKelvinToFahrenheit = (deg) => { return Math.round((deg - 273) * 1.8 + 32); From fda783d82f11261e2955704a2d262c8a9a4f369f Mon Sep 17 00:00:00 2001 From: acl13 <128934431+acl13@users.noreply.github.com> Date: Tue, 6 Aug 2024 12:46:02 -0400 Subject: [PATCH 08/13] display days of week in forecast --- index.html | 10 +++++----- main.js | 27 +++++++++++++++++++++++++++ 2 files changed, 32 insertions(+), 5 deletions(-) diff --git a/index.html b/index.html index 98ddad00..7abe1044 100644 --- a/index.html +++ b/index.html @@ -64,7 +64,7 @@
00°
id="day-one-icon" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSHDJnVpkuMsmNs5iRuaI4L8aiuySUHU2-h80GEDcnA3Z7v_-vaBJsunl2ZI6iQr7UDTw4&usqp=CAU" /> -
Weekday
+
Weekday
Condition
@@ -73,7 +73,7 @@
00°
id="day-two-icon" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSHDJnVpkuMsmNs5iRuaI4L8aiuySUHU2-h80GEDcnA3Z7v_-vaBJsunl2ZI6iQr7UDTw4&usqp=CAU" /> -
Weekday
+
Weekday
Condition
@@ -82,7 +82,7 @@
00°
id="day-three-icon" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSHDJnVpkuMsmNs5iRuaI4L8aiuySUHU2-h80GEDcnA3Z7v_-vaBJsunl2ZI6iQr7UDTw4&usqp=CAU" /> -
Weekday
+
Weekday
Condition
@@ -91,7 +91,7 @@
00°
id="day-four-icon" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSHDJnVpkuMsmNs5iRuaI4L8aiuySUHU2-h80GEDcnA3Z7v_-vaBJsunl2ZI6iQr7UDTw4&usqp=CAU" /> -
Weekday
+
Weekday
Condition
@@ -100,7 +100,7 @@
00°
id="day-five-icon" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSHDJnVpkuMsmNs5iRuaI4L8aiuySUHU2-h80GEDcnA3Z7v_-vaBJsunl2ZI6iQr7UDTw4&usqp=CAU" /> -
Weekday
+
Weekday
diff --git a/main.js b/main.js index 9c46544d..119ac442 100644 --- a/main.js +++ b/main.js @@ -67,9 +67,36 @@ const displayForecast = (data) => { `https://openweathermap.org/img/wn/${dayFive.weather[0].icon}@2x.png`; }; +const displayDays = () => { + // Weekdays listed twice to account for overlap + const days = [ + "Sunday", + "Monday", + "Tuesday", + "Wednesday", + "Thursday", + "Friday", + "Saturday", + "Sunday", + "Monday", + "Tuesday", + "Wednesday", + "Thursday", + "Friday", + "Saturday", + ]; + const date = new Date(); + document.getElementById("day-one").textContent = days[date.getDay() + 1]; + document.getElementById("day-two").textContent = days[date.getDay() + 2]; + document.getElementById("day-three").textContent = days[date.getDay() + 3]; + document.getElementById("day-four").textContent = days[date.getDay() + 4]; + document.getElementById("day-five").textContent = days[date.getDay() + 5]; +}; + const displayWeatherData = (data) => { displayCurrentWeather(data); displayForecast(data); + displayDays(); }; const convertKelvinToFahrenheit = (deg) => { From cc82f644619e2facdae073145f8d671696e4b1e5 Mon Sep 17 00:00:00 2001 From: acl13 <128934431+acl13@users.noreply.github.com> Date: Tue, 6 Aug 2024 12:52:37 -0400 Subject: [PATCH 09/13] allow user to search for weather data by city name --- index.html | 7 ++++++- main.js | 13 +++++++++++++ 2 files changed, 19 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 7abe1044..e98f604b 100644 --- a/index.html +++ b/index.html @@ -30,10 +30,15 @@

Weather Project

id="search-query" class="form-control" placeholder="Enter City Name Here" + required />
-
diff --git a/main.js b/main.js index 119ac442..e9254567 100644 --- a/main.js +++ b/main.js @@ -1,3 +1,16 @@ +document.getElementById("search").addEventListener("click", function () { + const userSearch = document.getElementById("search-query").value; + console.log(userSearch); + + if (userSearch === "") { + alert("Please enter the name of a city"); + } else { + fetchWeatherData(userSearch); + } + + userSearch.textContent = ""; +}); + const fetchWeatherData = (city) => { const url = `https://api.openweathermap.org/data/2.5/forecast?q=${city}&appid=a01dd8f2b7b0fd48756b05d7cb1e2fe5`; From fb85a828197e0668e0b8638a0ef6db5c8db88d0e Mon Sep 17 00:00:00 2001 From: acl13 <128934431+acl13@users.noreply.github.com> Date: Tue, 6 Aug 2024 12:54:03 -0400 Subject: [PATCH 10/13] add error handler --- main.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/main.js b/main.js index e9254567..1b33c340 100644 --- a/main.js +++ b/main.js @@ -19,7 +19,8 @@ const fetchWeatherData = (city) => { dataType: "json", }) .then((data) => data.json()) - .then((data) => displayWeatherData(data)); + .then((data) => displayWeatherData(data)) + .catch(handleError); }; fetchWeatherData("Charlotte"); @@ -115,3 +116,7 @@ const displayWeatherData = (data) => { const convertKelvinToFahrenheit = (deg) => { return Math.round((deg - 273) * 1.8 + 32); }; + +function handleError(error) { + console.log(`ERROR: ${error}`); +} From 88c3ce6b8f4cd10d0b8633100bb61e0a3aeeb4ea Mon Sep 17 00:00:00 2001 From: acl13 <128934431+acl13@users.noreply.github.com> Date: Tue, 6 Aug 2024 13:43:12 -0400 Subject: [PATCH 11/13] disable button and display loading icon while data is being fetched --- index.html | 4 ++++ main.js | 11 +++++++++-- 2 files changed, 13 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index e98f604b..e2ec54da 100644 --- a/index.html +++ b/index.html @@ -10,6 +10,10 @@ integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous" /> + diff --git a/main.js b/main.js index 1b33c340..3687b228 100644 --- a/main.js +++ b/main.js @@ -13,13 +13,20 @@ document.getElementById("search").addEventListener("click", function () { const fetchWeatherData = (city) => { const url = `https://api.openweathermap.org/data/2.5/forecast?q=${city}&appid=a01dd8f2b7b0fd48756b05d7cb1e2fe5`; - + const searchButton = document.getElementById("search"); + searchButton.disabled = true; + searchButton.innerHTML = `Loading +`; fetch(url, { method: "GET", dataType: "json", }) .then((data) => data.json()) - .then((data) => displayWeatherData(data)) + .then((data) => { + displayWeatherData(data); + searchButton.disabled = false; + searchButton.innerHTML = "Search"; + }) .catch(handleError); }; From d2ff77dfa8434efcd4b5b896409e1aaa45818515 Mon Sep 17 00:00:00 2001 From: acl13 <128934431+acl13@users.noreply.github.com> Date: Tue, 6 Aug 2024 15:10:47 -0400 Subject: [PATCH 12/13] refactor to use templates and render HTML dynamically --- index.html | 62 ++---------------------------------- main.js | 92 ++++++++++++++++++++++++------------------------------ 2 files changed, 42 insertions(+), 112 deletions(-) diff --git a/index.html b/index.html index e2ec54da..493521cc 100644 --- a/index.html +++ b/index.html @@ -50,68 +50,10 @@

Weather Project

-
-
-

00°

-

City

-

Condition

-
-
- -
-
- - -
-
-
Condition
-
00°
- -
Weekday
-
-
-
Condition
-
00°
- -
Weekday
-
-
-
Condition
-
00°
- -
Weekday
-
-
-
Condition
-
00°
- -
Weekday
-
-
-
Condition
-
00°
- -
Weekday
+
+
diff --git a/main.js b/main.js index 3687b228..f58a4c35 100644 --- a/main.js +++ b/main.js @@ -8,7 +8,7 @@ document.getElementById("search").addEventListener("click", function () { fetchWeatherData(userSearch); } - userSearch.textContent = ""; + document.getElementById("search-query").value = ""; }); const fetchWeatherData = (city) => { @@ -33,63 +33,38 @@ const fetchWeatherData = (city) => { fetchWeatherData("Charlotte"); const displayCurrentWeather = (data) => { + document.querySelector(".current-weather").replaceChildren(); const fahrenheitTemp = convertKelvinToFahrenheit(data.list[0].main.temp); const iconURL = `https://openweathermap.org/img/wn/${data.list[0].weather[0].icon}@2x.png`; - document.getElementById("current-temp").textContent = - `${fahrenheitTemp}\u00B0`; - document.getElementById("city").textContent = data.city.name; - document.getElementById("current-condition").textContent = - data.list[0].weather[0].main; - document.getElementById("current-icon").src = iconURL; + const template = ` +
+

${fahrenheitTemp}°

+

${data.city.name}

+

${data.list[0].weather[0].main}

+
+
+ +
`; + + document + .querySelector(".current-weather") + .insertAdjacentHTML("beforeend", template); }; const displayForecast = (data) => { - console.log(data); + document.querySelector(".forecast").replaceChildren(); const dayOne = data.list[7]; const dayTwo = data.list[15]; const dayThree = data.list[23]; const dayFour = data.list[31]; const dayFive = data.list[39]; + const forecastDisplay = [dayOne, dayTwo, dayThree, dayFour, dayFive]; - document.getElementById("day-one-condition").textContent = - dayOne.weather[0].main; - document.getElementById("day-one-temp").textContent = - `${convertKelvinToFahrenheit(dayOne.main.temp)}\u00B0`; - document.getElementById("day-one-icon").src = - `https://openweathermap.org/img/wn/${dayOne.weather[0].icon}@2x.png`; - - document.getElementById("day-two-condition").textContent = - dayTwo.weather[0].main; - document.getElementById("day-two-temp").textContent = - `${convertKelvinToFahrenheit(dayTwo.main.temp)}\u00B0`; - document.getElementById("day-two-icon").src = - `https://openweathermap.org/img/wn/${dayTwo.weather[0].icon}@2x.png`; - - document.getElementById("day-three-condition").textContent = - dayThree.weather[0].main; - document.getElementById("day-three-temp").textContent = - `${convertKelvinToFahrenheit(dayThree.main.temp)}\u00B0`; - document.getElementById("day-three-icon").src = - `https://openweathermap.org/img/wn/${dayThree.weather[0].icon}@2x.png`; - - document.getElementById("day-four-condition").textContent = - dayFour.weather[0].main; - document.getElementById("day-four-temp").textContent = - `${convertKelvinToFahrenheit(dayFour.main.temp)}\u00B0`; - document.getElementById("day-four-icon").src = - `https://openweathermap.org/img/wn/${dayFour.weather[0].icon}@2x.png`; - - document.getElementById("day-five-condition").textContent = - dayFive.weather[0].main; - document.getElementById("day-five-temp").textContent = - `${convertKelvinToFahrenheit(dayFive.main.temp)}\u00B0`; - document.getElementById("day-five-icon").src = - `https://openweathermap.org/img/wn/${dayFive.weather[0].icon}@2x.png`; -}; - -const displayDays = () => { // Weekdays listed twice to account for overlap + const date = new Date(); const days = [ "Sunday", "Monday", @@ -106,18 +81,31 @@ const displayDays = () => { "Friday", "Saturday", ]; - const date = new Date(); - document.getElementById("day-one").textContent = days[date.getDay() + 1]; - document.getElementById("day-two").textContent = days[date.getDay() + 2]; - document.getElementById("day-three").textContent = days[date.getDay() + 3]; - document.getElementById("day-four").textContent = days[date.getDay() + 4]; - document.getElementById("day-five").textContent = days[date.getDay() + 5]; + + forecastDisplay.forEach((day) => { + const index = forecastDisplay.indexOf(day); + const forecastIconURL = `https://openweathermap.org/img/wn/${day.weather[0].icon}@2x.png`; + const forecastTemplate = ` +
+
${day.weather[0].main}
+
${convertKelvinToFahrenheit(day.main.temp)}°
+ +
${days[date.getDay() + (index + 1)]}
+
`; + + document + .querySelector(".forecast") + .insertAdjacentHTML("beforeend", forecastTemplate); + }); + document.getElementById(`${0}`).classList.add("offset-md-1"); }; const displayWeatherData = (data) => { displayCurrentWeather(data); displayForecast(data); - displayDays(); }; const convertKelvinToFahrenheit = (deg) => { From 2ded236352c0acedbd9ee80e5fd4c08c93178ba1 Mon Sep 17 00:00:00 2001 From: acl13 <128934431+acl13@users.noreply.github.com> Date: Wed, 14 Aug 2024 11:07:35 -0400 Subject: [PATCH 13/13] fix comments from pull request --- main.js | 104 ++++++++++++++++++++++++++++++++++---------------------- 1 file changed, 63 insertions(+), 41 deletions(-) diff --git a/main.js b/main.js index f58a4c35..77067d51 100644 --- a/main.js +++ b/main.js @@ -1,8 +1,29 @@ -document.getElementById("search").addEventListener("click", function () { +const searchButton = document.getElementById("search"); +// Weekdays listed twice to account for overlap +const days = [ + "Sunday", + "Monday", + "Tuesday", + "Wednesday", + "Thursday", + "Friday", + "Saturday", + "Sunday", + "Monday", + "Tuesday", + "Wednesday", + "Thursday", + "Friday", + "Saturday", +]; + +searchButton.addEventListener("click", function () { const userSearch = document.getElementById("search-query").value; - console.log(userSearch); - if (userSearch === "") { + if ( + !document.getElementById("search-query").checkValidity() || + userSearch.trim().length === 0 + ) { alert("Please enter the name of a city"); } else { fetchWeatherData(userSearch); @@ -11,12 +32,22 @@ document.getElementById("search").addEventListener("click", function () { document.getElementById("search-query").value = ""; }); -const fetchWeatherData = (city) => { - const url = `https://api.openweathermap.org/data/2.5/forecast?q=${city}&appid=a01dd8f2b7b0fd48756b05d7cb1e2fe5`; - const searchButton = document.getElementById("search"); +const searchLoading = () => { searchButton.disabled = true; searchButton.innerHTML = `Loading `; +}; + +const searchDone = () => { + searchButton.disabled = false; + searchButton.innerHTML = "Search"; +}; + +const fetchWeatherData = (city) => { + const url = `https://api.openweathermap.org/data/2.5/forecast?q=${city}&appid=a01dd8f2b7b0fd48756b05d7cb1e2fe5`; + + searchLoading(); + fetch(url, { method: "GET", dataType: "json", @@ -24,14 +55,18 @@ const fetchWeatherData = (city) => { .then((data) => data.json()) .then((data) => { displayWeatherData(data); - searchButton.disabled = false; - searchButton.innerHTML = "Search"; + searchDone(); }) .catch(handleError); }; fetchWeatherData("Charlotte"); +const displayWeatherData = (data) => { + displayCurrentWeather(data); + displayForecast(data); +}; + const displayCurrentWeather = (data) => { document.querySelector(".current-weather").replaceChildren(); const fahrenheitTemp = convertKelvinToFahrenheit(data.list[0].main.temp); @@ -56,34 +91,15 @@ const displayCurrentWeather = (data) => { const displayForecast = (data) => { document.querySelector(".forecast").replaceChildren(); - const dayOne = data.list[7]; - const dayTwo = data.list[15]; - const dayThree = data.list[23]; - const dayFour = data.list[31]; - const dayFive = data.list[39]; - const forecastDisplay = [dayOne, dayTwo, dayThree, dayFour, dayFive]; - - // Weekdays listed twice to account for overlap + + // Forecast data is stored in three hour intervals. This fetches the data every 8 intervals, or 24 hours + const dailyIntervals = [7, 15, 23, 31, 39]; + const fiveDayForecast = dailyIntervals.map((interval) => data.list[interval]); + const date = new Date(); - const days = [ - "Sunday", - "Monday", - "Tuesday", - "Wednesday", - "Thursday", - "Friday", - "Saturday", - "Sunday", - "Monday", - "Tuesday", - "Wednesday", - "Thursday", - "Friday", - "Saturday", - ]; - - forecastDisplay.forEach((day) => { - const index = forecastDisplay.indexOf(day); + + fiveDayForecast.forEach((day) => { + const index = fiveDayForecast.indexOf(day); const forecastIconURL = `https://openweathermap.org/img/wn/${day.weather[0].icon}@2x.png`; const forecastTemplate = `
@@ -103,15 +119,21 @@ const displayForecast = (data) => { document.getElementById(`${0}`).classList.add("offset-md-1"); }; -const displayWeatherData = (data) => { - displayCurrentWeather(data); - displayForecast(data); -}; - const convertKelvinToFahrenheit = (deg) => { return Math.round((deg - 273) * 1.8 + 32); }; function handleError(error) { - console.log(`ERROR: ${error}`); + if (error instanceof TypeError) { + alert(`Oops. Something went wrong. + Please check that: + - You have entered a valid city + - You are connected to the interent`); + } else { + alert( + `Oops. Looks like something went wrong on our end. + ERROR: ${error}` + ); + } + searchDone(); }