From 2659a241d61872c0e067c678da00fd6c26d8dbd6 Mon Sep 17 00:00:00 2001 From: Catie Date: Mon, 1 Apr 2024 15:01:35 -0700 Subject: [PATCH 1/9] firstcommit --- index.html | 26 ++++++++++++++++++++++++++ main.js | 0 style.css | 9 +++++++++ 3 files changed, 35 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..f5efee1f --- /dev/null +++ b/index.html @@ -0,0 +1,26 @@ + + + + + + + + Document +

Weather Project

+
+ + +
+
+ +
+ +
+
+ +
+
+ + + + \ No newline at end of file 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..bee1a1bf --- /dev/null +++ b/style.css @@ -0,0 +1,9 @@ +.title { + margin: auto; + text-align: center; +} + +form { + margin: auto; + text-align: center; +} From 3c0572863c903bee2a2ba6eda1fc4ce4845c91b1 Mon Sep 17 00:00:00 2001 From: Catie Date: Tue, 16 Apr 2024 12:12:57 -0700 Subject: [PATCH 2/9] trying --- index.html | 7 ++++--- main.js | 48 ++++++++++++++++++++++++++++++++++++++++++++++++ style.css | 1 + 3 files changed, 53 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index f5efee1f..632f78a5 100644 --- a/index.html +++ b/index.html @@ -10,11 +10,12 @@

Weather Project

-
-
- + + +
+
diff --git a/main.js b/main.js index e69de29b..c885e6b2 100644 --- a/main.js +++ b/main.js @@ -0,0 +1,48 @@ +const submitButton = document.querySelector('.submit'); +const searchInput = document.querySelector('.input'); +const coordinates = []; + + +submitButton.addEventListener('click', function(){ + const city = document.querySelector('.input').value; + + const url = `http://api.openweathermap.org/geo/1.0/direct?q=${city}&limit=3&appid=91c003f75e0552ff819bcfb19c839958` + + // fetches coordinates and adds to coordinates array + fetch(url, { + method: 'GET', + dataType: 'json' + }) + .then(res => res.json()) + .then(data => { + coordinates.lat = data[0].lat + coordinates.lon = data[0].lon + console.log(coordinates.lat, coordinates.lon) + }) +}) + +// fetch daily weather from API +const fetchDaily = function() { + const lat = coordinates[0] + + + let url = `https://api.openweathermap.org/data/2.5/weather?lat={${lat}}&lon={${lon}}&appid={91c003f75e0552ff819bcfb19c839958}`; + + console.log(lat); + + fetch(url, { + method: 'GET', + dataType: 'json' + }) + .then(data => data.json()) + .then(data => { + console.log('fetch success', data); + }) +}; + + +// fetch forecast from API +const fetchForecast = function(input) { + +}; + diff --git a/style.css b/style.css index bee1a1bf..fe367e47 100644 --- a/style.css +++ b/style.css @@ -7,3 +7,4 @@ form { margin: auto; text-align: center; } + From b6b03c0ee1185408aff080c32ab01968e93afc6c Mon Sep 17 00:00:00 2001 From: Catie Date: Tue, 16 Apr 2024 14:09:39 -0700 Subject: [PATCH 3/9] first part done --- index.html | 5 ++++- main.js | 53 +++++++++++++++++++++++++++++++++++++++-------------- style.css | 10 ++++++++++ 3 files changed, 53 insertions(+), 15 deletions(-) diff --git a/index.html b/index.html index 632f78a5..f428f0f6 100644 --- a/index.html +++ b/index.html @@ -1,6 +1,7 @@ + @@ -8,14 +9,15 @@ Document

Weather Project

+ +
-
@@ -24,4 +26,5 @@

Weather Project

+ \ No newline at end of file diff --git a/main.js b/main.js index c885e6b2..6f27e50a 100644 --- a/main.js +++ b/main.js @@ -1,13 +1,15 @@ const submitButton = document.querySelector('.submit'); const searchInput = document.querySelector('.input'); -const coordinates = []; submitButton.addEventListener('click', function(){ - const city = document.querySelector('.input').value; + let city = document.querySelector('.input').value; const url = `http://api.openweathermap.org/geo/1.0/direct?q=${city}&limit=3&appid=91c003f75e0552ff819bcfb19c839958` + document.querySelector('.input').value = ' '; + document.querySelector('.current-weather').innerHTML = ' '; + // fetches coordinates and adds to coordinates array fetch(url, { method: 'GET', @@ -15,20 +17,16 @@ submitButton.addEventListener('click', function(){ }) .then(res => res.json()) .then(data => { - coordinates.lat = data[0].lat - coordinates.lon = data[0].lon - console.log(coordinates.lat, coordinates.lon) + fetchDaily(data); }) + }) // fetch daily weather from API -const fetchDaily = function() { - const lat = coordinates[0] - - - let url = `https://api.openweathermap.org/data/2.5/weather?lat={${lat}}&lon={${lon}}&appid={91c003f75e0552ff819bcfb19c839958}`; - - console.log(lat); +const fetchDaily = function(data) { + let lat = data[0].lat + let lon = data[0].lon + const url = `https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&appid=91c003f75e0552ff819bcfb19c839958`; fetch(url, { method: 'GET', @@ -37,12 +35,39 @@ const fetchDaily = function() { .then(data => data.json()) .then(data => { console.log('fetch success', data); + kelvinConvert(data); + renderDailyWeather(data) }) + }; +// convert current weather +const kelvinConvert = function (data) { + let kelvinTemp = data.main.temp + return Math.floor((kelvinTemp - 273.15) * 9/5 + 32) +} + +// render daily weather +const renderDailyWeather = function (data){ + let currTemp = kelvinConvert(data); + let city = data.name; + let weather = data.weather[0].main; + let weatherIcon = data.weather[0].icon; + let template = ` +
+

${currTemp}°
+ ${city}
+ ${weather} +

+
+
+ +
+ ` + document.querySelector('.current-weather').insertAdjacentHTML('beforeend', template); +} // fetch forecast from API const fetchForecast = function(input) { -}; - +}; \ No newline at end of file diff --git a/style.css b/style.css index fe367e47..c6660ea7 100644 --- a/style.css +++ b/style.css @@ -8,3 +8,13 @@ form { text-align: center; } +.column { + float: left; + width: 50%; +} + +.current-weather:after { + content: ""; + display: table; + clear: both; +} \ No newline at end of file From 4fc4b756610ade239ab86e819d581aab608607e9 Mon Sep 17 00:00:00 2001 From: Catie Date: Tue, 16 Apr 2024 14:38:49 -0700 Subject: [PATCH 4/9] first commit second part --- main.js | 32 +++++++++++++++++++------------- style.css | 2 ++ 2 files changed, 21 insertions(+), 13 deletions(-) diff --git a/main.js b/main.js index 6f27e50a..4fb0d9e1 100644 --- a/main.js +++ b/main.js @@ -1,7 +1,6 @@ const submitButton = document.querySelector('.submit'); const searchInput = document.querySelector('.input'); - submitButton.addEventListener('click', function(){ let city = document.querySelector('.input').value; @@ -9,34 +8,45 @@ submitButton.addEventListener('click', function(){ document.querySelector('.input').value = ' '; document.querySelector('.current-weather').innerHTML = ' '; - - // fetches coordinates and adds to coordinates array + + // FETCH COORDINATES fetch(url, { method: 'GET', dataType: 'json' }) .then(res => res.json()) .then(data => { - fetchDaily(data); + fetchWeather(data); }) - }) -// fetch daily weather from API -const fetchDaily = function(data) { +const fetchWeather = function(data) { let lat = data[0].lat let lon = data[0].lon const url = `https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&appid=91c003f75e0552ff819bcfb19c839958`; + const url2 = `https://api.openweathermap.org/data/2.5/forecast?lat=${lat}&lon=${lon}&appid=91c003f75e0552ff819bcfb19c839958` + + // FETCH DAILY fetch(url, { method: 'GET', dataType: 'json' }) - .then(data => data.json()) + .then(res => res.json()) .then(data => { - console.log('fetch success', data); + console.log('DAILY fetch success', data); kelvinConvert(data); renderDailyWeather(data) + }); + + // FETCH FORECAST + fetch(url2, { + method: 'GET', + dataType: 'json' + }) + .then(res => res.json()) + .then(data => { + console.log('FORECAST fetch success',data) }) }; @@ -67,7 +77,3 @@ const renderDailyWeather = function (data){ document.querySelector('.current-weather').insertAdjacentHTML('beforeend', template); } -// fetch forecast from API -const fetchForecast = function(input) { - -}; \ No newline at end of file diff --git a/style.css b/style.css index c6660ea7..e9585c94 100644 --- a/style.css +++ b/style.css @@ -11,6 +11,8 @@ form { .column { float: left; width: 50%; + margin: auto; + text-align: center; } .current-weather:after { From 7f7e7b6e6dcd88e5fd0b19d0a3ce13c02356fbdc Mon Sep 17 00:00:00 2001 From: Catie Date: Thu, 18 Apr 2024 14:07:34 -0700 Subject: [PATCH 5/9] its working omg --- main.js | 74 +++++++++++++++++++++++++++++++++++++++++++++++++------ style.css | 4 +++ 2 files changed, 70 insertions(+), 8 deletions(-) diff --git a/main.js b/main.js index 4fb0d9e1..57d39cd2 100644 --- a/main.js +++ b/main.js @@ -3,12 +3,9 @@ const searchInput = document.querySelector('.input'); submitButton.addEventListener('click', function(){ let city = document.querySelector('.input').value; - const url = `http://api.openweathermap.org/geo/1.0/direct?q=${city}&limit=3&appid=91c003f75e0552ff819bcfb19c839958` - document.querySelector('.input').value = ' '; document.querySelector('.current-weather').innerHTML = ' '; - // FETCH COORDINATES fetch(url, { method: 'GET', @@ -24,9 +21,7 @@ const fetchWeather = function(data) { let lat = data[0].lat let lon = data[0].lon const url = `https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&appid=91c003f75e0552ff819bcfb19c839958`; - const url2 = `https://api.openweathermap.org/data/2.5/forecast?lat=${lat}&lon=${lon}&appid=91c003f75e0552ff819bcfb19c839958` - // FETCH DAILY fetch(url, { method: 'GET', @@ -38,7 +33,6 @@ const fetchWeather = function(data) { kelvinConvert(data); renderDailyWeather(data) }); - // FETCH FORECAST fetch(url2, { method: 'GET', @@ -46,9 +40,9 @@ const fetchWeather = function(data) { }) .then(res => res.json()) .then(data => { - console.log('FORECAST fetch success',data) + console.log('FORECAST fetch success', data); + getAndRenFive(data) }) - }; // convert current weather @@ -57,6 +51,66 @@ const kelvinConvert = function (data) { return Math.floor((kelvinTemp - 273.15) * 9/5 + 32) } +// select instances of weather for each day +// render 5 day forecast +// get days of the week +const getAndRenFive = function (data) { + let daysOfWeek = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]; + let getDate = new Date(); + let getNum = getDate.getDay(); + const getToday = function () { + return daysOfWeek[getNum] + }; + let dayOne = data.list[7].weather[0].main + let dayOneIcon = data.list[7].weather[0].icon + let dayTwo = data.list[15].weather[0].main + let dayTwoIcon = data.list[15].weather[0].icon + let dayThree = data.list[23].weather[0].main + let dayThreeIcon = data.list[23].weather[0].icon + let dayFour = data.list[31].weather[0].main + let dayFourIcon = data.list[31].weather[0].icon + let dayFive = data.list[39].weather[0].main + let dayFiveIcon = data.list[39].weather[0].icon + let weekdayOne = getToday(); + let weekdayTwo = daysOfWeek[(getNum + 1)]; + let weekdayThree = daysOfWeek[(getNum + 2)]; + let weekdayFour = daysOfWeek[(getNum + 3)]; + let weekdayFive = daysOfWeek[(getNum + 4)]; + let template = ` + +
+
+
+ ${dayOne}
+
+ ${weekdayOne}
+
+
+ ${dayTwo}
+
+ ${weekdayTwo}
+
+
+ ${dayThree}
+
+ ${weekdayThree}
+
+
+ ${dayFour}
+
+ ${weekdayFour}
+
+
+ ${dayFive}
+
+ ${weekdayFive}
+
+
+
+ `; + document.querySelector('.forecast').insertAdjacentHTML('beforeend', template); +} + // render daily weather const renderDailyWeather = function (data){ let currTemp = kelvinConvert(data); @@ -77,3 +131,7 @@ const renderDailyWeather = function (data){ document.querySelector('.current-weather').insertAdjacentHTML('beforeend', template); } +// render forecast +const renderForecast = function () { + +}; diff --git a/style.css b/style.css index e9585c94..19473af7 100644 --- a/style.css +++ b/style.css @@ -19,4 +19,8 @@ form { content: ""; display: table; clear: both; +} + +.col { + border: solid; } \ No newline at end of file From 51384b06b6f8a2470f10ed36d406bd9090121a07 Mon Sep 17 00:00:00 2001 From: Catie Date: Thu, 18 Apr 2024 14:27:09 -0700 Subject: [PATCH 6/9] final ish --- main.js | 22 +++++++++++----------- style.css | 2 ++ 2 files changed, 13 insertions(+), 11 deletions(-) diff --git a/main.js b/main.js index 57d39cd2..015ca454 100644 --- a/main.js +++ b/main.js @@ -61,23 +61,23 @@ const getAndRenFive = function (data) { const getToday = function () { return daysOfWeek[getNum] }; - let dayOne = data.list[7].weather[0].main - let dayOneIcon = data.list[7].weather[0].icon - let dayTwo = data.list[15].weather[0].main - let dayTwoIcon = data.list[15].weather[0].icon - let dayThree = data.list[23].weather[0].main - let dayThreeIcon = data.list[23].weather[0].icon - let dayFour = data.list[31].weather[0].main - let dayFourIcon = data.list[31].weather[0].icon - let dayFive = data.list[39].weather[0].main - let dayFiveIcon = data.list[39].weather[0].icon + let dayOne = data.list[7].weather[0].main; + let dayOneIcon = data.list[7].weather[0].icon; + let dayOneTemp = data.list[7].main.temp; + let dayTwo = data.list[15].weather[0].main; + let dayTwoIcon = data.list[15].weather[0].icon; + let dayThree = data.list[23].weather[0].main; + let dayThreeIcon = data.list[23].weather[0].icon; + let dayFour = data.list[31].weather[0].main; + let dayFourIcon = data.list[31].weather[0].icon; + let dayFive = data.list[39].weather[0].main; + let dayFiveIcon = data.list[39].weather[0].icon; let weekdayOne = getToday(); let weekdayTwo = daysOfWeek[(getNum + 1)]; let weekdayThree = daysOfWeek[(getNum + 2)]; let weekdayFour = daysOfWeek[(getNum + 3)]; let weekdayFive = daysOfWeek[(getNum + 4)]; let template = ` -
diff --git a/style.css b/style.css index 19473af7..9d507b1d 100644 --- a/style.css +++ b/style.css @@ -23,4 +23,6 @@ form { .col { border: solid; + margin-top: 5%; + text-align: center; } \ No newline at end of file From 22be9a76d87fcea02304b553c6674660c222cbce Mon Sep 17 00:00:00 2001 From: Catie Date: Fri, 19 Apr 2024 08:58:39 -0700 Subject: [PATCH 7/9] almost there --- main.js | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/main.js b/main.js index 015ca454..ee8ffee0 100644 --- a/main.js +++ b/main.js @@ -6,6 +6,7 @@ submitButton.addEventListener('click', function(){ const url = `http://api.openweathermap.org/geo/1.0/direct?q=${city}&limit=3&appid=91c003f75e0552ff819bcfb19c839958` document.querySelector('.input').value = ' '; document.querySelector('.current-weather').innerHTML = ' '; + document.querySelector('.forecast').innerHTML = ' '; // FETCH COORDINATES fetch(url, { method: 'GET', @@ -66,12 +67,16 @@ const getAndRenFive = function (data) { let dayOneTemp = data.list[7].main.temp; let dayTwo = data.list[15].weather[0].main; let dayTwoIcon = data.list[15].weather[0].icon; + let dayTwoTemp = data.list[15].main.temp; let dayThree = data.list[23].weather[0].main; let dayThreeIcon = data.list[23].weather[0].icon; + let dayThreeTemp = data.list[23].main.temp; let dayFour = data.list[31].weather[0].main; let dayFourIcon = data.list[31].weather[0].icon; + let dayFOurTemp = data.list[31].main.temp; let dayFive = data.list[39].weather[0].main; let dayFiveIcon = data.list[39].weather[0].icon; + let dayFiveTemp = data.list[39].main.temp; let weekdayOne = getToday(); let weekdayTwo = daysOfWeek[(getNum + 1)]; let weekdayThree = daysOfWeek[(getNum + 2)]; @@ -131,7 +136,3 @@ const renderDailyWeather = function (data){ document.querySelector('.current-weather').insertAdjacentHTML('beforeend', template); } -// render forecast -const renderForecast = function () { - -}; From ac2a6621e4c1fc7e6e2d023a9979169c781ca4b6 Mon Sep 17 00:00:00 2001 From: Catie Date: Mon, 22 Apr 2024 11:57:24 -0700 Subject: [PATCH 8/9] FINAL --- main.js | 32 ++++++++++++++++++-------------- 1 file changed, 18 insertions(+), 14 deletions(-) diff --git a/main.js b/main.js index ee8ffee0..9aedcda4 100644 --- a/main.js +++ b/main.js @@ -31,7 +31,7 @@ const fetchWeather = function(data) { .then(res => res.json()) .then(data => { console.log('DAILY fetch success', data); - kelvinConvert(data); + console.log(kelvinConvert(data.main.temp)); renderDailyWeather(data) }); // FETCH FORECAST @@ -48,8 +48,7 @@ const fetchWeather = function(data) { // convert current weather const kelvinConvert = function (data) { - let kelvinTemp = data.main.temp - return Math.floor((kelvinTemp - 273.15) * 9/5 + 32) + return Math.floor((data - 273.15) * 9/5 + 32) } // select instances of weather for each day @@ -64,24 +63,25 @@ const getAndRenFive = function (data) { }; let dayOne = data.list[7].weather[0].main; let dayOneIcon = data.list[7].weather[0].icon; - let dayOneTemp = data.list[7].main.temp; + let dayOneTemp = kelvinConvert(data.list[7].main.temp); + console.log(data.list[7].main.temp); let dayTwo = data.list[15].weather[0].main; let dayTwoIcon = data.list[15].weather[0].icon; - let dayTwoTemp = data.list[15].main.temp; + let dayTwoTemp = kelvinConvert(data.list[15].main.temp); let dayThree = data.list[23].weather[0].main; let dayThreeIcon = data.list[23].weather[0].icon; - let dayThreeTemp = data.list[23].main.temp; + let dayThreeTemp = kelvinConvert(data.list[23].main.temp); let dayFour = data.list[31].weather[0].main; let dayFourIcon = data.list[31].weather[0].icon; - let dayFOurTemp = data.list[31].main.temp; + let dayFourTemp = kelvinConvert(data.list[31].main.temp); let dayFive = data.list[39].weather[0].main; let dayFiveIcon = data.list[39].weather[0].icon; - let dayFiveTemp = data.list[39].main.temp; + let dayFiveTemp = kelvinConvert(data.list[39].main.temp); let weekdayOne = getToday(); let weekdayTwo = daysOfWeek[(getNum + 1)]; let weekdayThree = daysOfWeek[(getNum + 2)]; let weekdayFour = daysOfWeek[(getNum + 3)]; - let weekdayFive = daysOfWeek[(getNum + 4)]; + let weekdayFive = daysOfWeek[(getNum + 4)] let template = `
@@ -89,36 +89,41 @@ const getAndRenFive = function (data) { ${dayOne}

${weekdayOne}
+ ${dayOneTemp}°
${dayTwo}

${weekdayTwo}
+ ${dayTwoTemp}°
${dayThree}

${weekdayThree}
+ ${dayThreeTemp}°
${dayFour}

${weekdayFour}
+ ${dayFourTemp}°
${dayFive}

${weekdayFive}
+ ${dayFiveTemp}°
`; document.querySelector('.forecast').insertAdjacentHTML('beforeend', template); -} +}; // render daily weather -const renderDailyWeather = function (data){ - let currTemp = kelvinConvert(data); +const renderDailyWeather = function (data) { + let currTemp = kelvinConvert(data.main.temp); let city = data.name; let weather = data.weather[0].main; let weatherIcon = data.weather[0].icon; @@ -134,5 +139,4 @@ const renderDailyWeather = function (data){
` document.querySelector('.current-weather').insertAdjacentHTML('beforeend', template); -} - +}; From 03d00af79f3e0a4f9cca60e923692682f8eec721 Mon Sep 17 00:00:00 2001 From: Catie Date: Mon, 22 Apr 2024 11:58:17 -0700 Subject: [PATCH 9/9] actual final --- main.js | 4 ---- 1 file changed, 4 deletions(-) diff --git a/main.js b/main.js index 9aedcda4..6db0871b 100644 --- a/main.js +++ b/main.js @@ -30,8 +30,6 @@ const fetchWeather = function(data) { }) .then(res => res.json()) .then(data => { - console.log('DAILY fetch success', data); - console.log(kelvinConvert(data.main.temp)); renderDailyWeather(data) }); // FETCH FORECAST @@ -41,7 +39,6 @@ const fetchWeather = function(data) { }) .then(res => res.json()) .then(data => { - console.log('FORECAST fetch success', data); getAndRenFive(data) }) }; @@ -64,7 +61,6 @@ const getAndRenFive = function (data) { let dayOne = data.list[7].weather[0].main; let dayOneIcon = data.list[7].weather[0].icon; let dayOneTemp = kelvinConvert(data.list[7].main.temp); - console.log(data.list[7].main.temp); let dayTwo = data.list[15].weather[0].main; let dayTwoIcon = data.list[15].weather[0].icon; let dayTwoTemp = kelvinConvert(data.list[15].main.temp);