From 6b9495486d7dced89087a10d87fd19c00f6cea6a Mon Sep 17 00:00:00 2001 From: Joseph Mitchell Date: Tue, 18 Feb 2025 21:10:26 -0500 Subject: [PATCH 1/4] feat: add current weather display, parse fiveDayForecast data --- index.html | 53 +++++++++++++++++++++++++++++++++++ main.js | 81 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ style.css | 10 +++++++ 3 files changed, 144 insertions(+) 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..3fe1437e --- /dev/null +++ b/index.html @@ -0,0 +1,53 @@ + + + + + + + + + + + + +
+
+
+
+

The Weather App

+
+
+ +
+

Search City

+ +
+ +
+ + +
+ +
+
+
+
+
+
+ + + + diff --git a/main.js b/main.js new file mode 100644 index 00000000..db625054 --- /dev/null +++ b/main.js @@ -0,0 +1,81 @@ +const apiKey = '1d224a4af2354cde18df2f7243cc84f4'; +let curWeather = {}; +let fiveDayForecast = []; + +document.querySelector('.search').addEventListener('click', function () { + const city = document.querySelector('#search-query').value; + + fetchCurWeather(city); + fetchFiveDay(city); + + + document.querySelector('#search-query').value = ''; +}); + +const addCurWeather = (data) => { +//debugger; + curWeather = { + city: data.name || null, + description: data.weather[0].main || null, + icon: data.weather[0].icon || null, + temp: Math.round(data.main.temp) || null, + }; + + renderCurWeather(); + +}; + +const addFiveDay = (data) => { +//debugger; + for (i=7; i { + const url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=imperial`; + fetch(url, { + method: 'GET', + dataType: 'json' + }) + .then(data => data.json()) + .then(data => addCurWeather(data)); +} + +const fetchFiveDay = (city) => { + const url = `https://api.openweathermap.org/data/2.5/forecast?q=${city}&appid=${apiKey}&units=imperial`; + fetch(url, { + method: 'GET', + dataType: 'json' + }) + .then(data => data.json()) + .then(data => addFiveDay(data)); +} + +const renderCurWeather = () => { + //debugger; + document.querySelector('.current-weather').replaceChildren(); + + const curWeatherTemplate = + `
+
+

${curWeather.temp}\u00B0F

+

${curWeather.city}

+

${curWeather.description}

+
+
+ Weather Icon +
+
`; + + document.querySelector('.current-weather').insertAdjacentHTML('beforeend', curWeatherTemplate); +}; + diff --git a/style.css b/style.css new file mode 100644 index 00000000..dd00a912 --- /dev/null +++ b/style.css @@ -0,0 +1,10 @@ +.page-header { + margin-top: 40px; + width: 100%; + text-align: center; +} + +.search-form { + margin-top: 40px; + margin-bottom: 40px; +} From 4ed2ed3b35d57ca5b6f69d00fe4ae32397f6f435 Mon Sep 17 00:00:00 2001 From: Joseph Mitchell Date: Wed, 19 Feb 2025 14:16:54 -0500 Subject: [PATCH 2/4] feat: five day forecast --- index.html | 2 +- main.js | 30 +++++++++++++++++++++++++----- 2 files changed, 26 insertions(+), 6 deletions(-) diff --git a/index.html b/index.html index 3fe1437e..c44609e9 100644 --- a/index.html +++ b/index.html @@ -45,7 +45,7 @@

Search City

-
+
diff --git a/main.js b/main.js index db625054..79c61554 100644 --- a/main.js +++ b/main.js @@ -13,7 +13,6 @@ document.querySelector('.search').addEventListener('click', function () { }); const addCurWeather = (data) => { -//debugger; curWeather = { city: data.name || null, description: data.weather[0].main || null, @@ -26,7 +25,8 @@ const addCurWeather = (data) => { }; const addFiveDay = (data) => { -//debugger; + fiveDayForecast = []; + for (i=7; i { } const renderCurWeather = () => { - //debugger; document.querySelector('.current-weather').replaceChildren(); const curWeatherTemplate = - `
+ ` +

${curWeather.temp}\u00B0F

${curWeather.city}

@@ -74,8 +74,28 @@ const renderCurWeather = () => {
Weather Icon
-
`; +
+ `; document.querySelector('.current-weather').insertAdjacentHTML('beforeend', curWeatherTemplate); }; +const renderFiveDay = () => { + document.querySelector('.five-day').replaceChildren(); + + const fiveDayTemplate = fiveDayForecast.map(day => { + return ` +
+
+
+

${day.description}

+

${day.temp}\u00B0F

+ Icon +

${day.day}

+
+
+
`; + }).join(''); + + document.querySelector('.five-day').insertAdjacentHTML('beforeend', fiveDayTemplate); +}; \ No newline at end of file From 8c938ff71d4be2175b137b31617c46f2a81f9f59 Mon Sep 17 00:00:00 2001 From: Joseph Mitchell Date: Wed, 19 Feb 2025 14:24:31 -0500 Subject: [PATCH 3/4] update formatting --- main.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/main.js b/main.js index 79c61554..25c11156 100644 --- a/main.js +++ b/main.js @@ -8,7 +8,6 @@ document.querySelector('.search').addEventListener('click', function () { fetchCurWeather(city); fetchFiveDay(city); - document.querySelector('#search-query').value = ''; }); @@ -21,7 +20,6 @@ const addCurWeather = (data) => { }; renderCurWeather(); - }; const addFiveDay = (data) => { @@ -37,6 +35,7 @@ const addFiveDay = (data) => { }; fiveDayForecast.push(curDay); } + renderFiveDay(); }; @@ -94,7 +93,8 @@ const renderFiveDay = () => {

${day.day}

- `; + + `; }).join(''); document.querySelector('.five-day').insertAdjacentHTML('beforeend', fiveDayTemplate); From 5f5af1623aef265a1bcfc9dc0aa485ef85fd43b4 Mon Sep 17 00:00:00 2001 From: j-emitch <48036253+j-emitch@users.noreply.github.com> Date: Fri, 17 Oct 2025 16:48:55 -0400 Subject: [PATCH 4/4] Remove API key from main.js --- main.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/main.js b/main.js index 25c11156..746abaf1 100644 --- a/main.js +++ b/main.js @@ -1,4 +1,4 @@ -const apiKey = '1d224a4af2354cde18df2f7243cc84f4'; +const apiKey = ''; let curWeather = {}; let fiveDayForecast = []; @@ -98,4 +98,4 @@ const renderFiveDay = () => { }).join(''); document.querySelector('.five-day').insertAdjacentHTML('beforeend', fiveDayTemplate); -}; \ No newline at end of file +};