From cc113384a56786b3f75144f9737fd9afcb2580cd Mon Sep 17 00:00:00 2001 From: Philomena Kelly Date: Sun, 12 Jun 2022 15:29:15 -0400 Subject: [PATCH 1/4] tear down and rebuild. added API calls for lat/long and temperature. --- .gitignore | 3 +- OLDindex.html | 37 +++++++++++++++++++ images/green_mountains.svg | 62 ++++++++++++++++++++++++++++++++ index.html | 9 +++-- src/index.js | 63 +++++++++++++++++++++++++++++++++ styles/OLDindex.css | 56 +++++++++++++++++++++++++++++ styles/{index.css => style.css} | 0 weather-report-proxy-server | 1 + 8 files changed, 228 insertions(+), 3 deletions(-) create mode 100644 OLDindex.html create mode 100644 images/green_mountains.svg create mode 100644 styles/OLDindex.css rename styles/{index.css => style.css} (100%) create mode 160000 weather-report-proxy-server diff --git a/.gitignore b/.gitignore index 31b153a9b..8ad729bbf 100644 --- a/.gitignore +++ b/.gitignore @@ -1,4 +1,5 @@ .vscode .DS_Store node_modules -.cache \ No newline at end of file +.cache +.env \ No newline at end of file diff --git a/OLDindex.html b/OLDindex.html new file mode 100644 index 000000000..987462a79 --- /dev/null +++ b/OLDindex.html @@ -0,0 +1,37 @@ + + + + + + + + + + Weather Report + + + + +
+
+
+
+

+
+
+

Danbury, CT

+
+
+ +
+
+ +
+
+ + + + + + + \ No newline at end of file diff --git a/images/green_mountains.svg b/images/green_mountains.svg new file mode 100644 index 000000000..3d043519b --- /dev/null +++ b/images/green_mountains.svg @@ -0,0 +1,62 @@ + + + + diff --git a/index.html b/index.html index 68b320b9a..36f818ce0 100644 --- a/index.html +++ b/index.html @@ -1,12 +1,17 @@ - - Weather Report + Document + +

+

+ + + \ No newline at end of file diff --git a/src/index.js b/src/index.js index e69de29bb..c3cda71eb 100644 --- a/src/index.js +++ b/src/index.js @@ -0,0 +1,63 @@ +'use strict'; + +const updatecity = (event) => { + city = document.getElementById('city').value; + console.log(city); + + let searchparams = { + q: city, + }; + + axios + .get('http://127.0.0.1:5000/location', { params: searchparams }) + + .then((response) => { + console.log('success!', response.data[0]['lat'], response.data[0]['lon']); + document.getElementById( + 'latlon' + ).textContent += ` success! ${response.data[0]['lat']}, ${response.data[0]['lon']}`; + + axios + .get('http://127.0.0.1:5000/weather', { + params: { + lat: response.data[0]['lat'], + lon: response.data[0]['lon'], + }, + }) + + .then((response) => { + console.log('success!', response.data.current.temp); + document.getElementById( + 'weather' + ).textContent += `success! ${response.data.current.temp}`; + }) + .catch((error) => { + console.log('error!', error.response.data); + }); + }) + .catch((error) => { + console.log('error!', error.response.data); + }); +}; + +const getWeather = (lat, lon) => { + axios + .get('http://127.0.0.1:5000/weather', { params: { lat: lat, lon: lon } }) + + .then((response) => { + console.log('success!', response.data[0]['current']['temp']); + document.getElementById( + 'weather' + ).textContent += `success! ${response.data}`; + }) + .catch((error) => { + console.log('error!', error.response.data); + }); +}; + +const registerEventHandlers = (event) => { + const cityField = document.querySelector('#cityButton'); + cityField.addEventListener('click', updatecity); +}; + +document.addEventListener('DOMContentLoaded', registerEventHandlers); diff --git a/styles/OLDindex.css b/styles/OLDindex.css new file mode 100644 index 000000000..90f7e76f6 --- /dev/null +++ b/styles/OLDindex.css @@ -0,0 +1,56 @@ + +body { + background-color: lightblue; + text-align: center; + height: 100%; + margin: 0; + +} + +.temperature { + color: black; +} + +#weatherbox { + width: 60%; + min-height: 40%; + background-color: white; + border: 2px solid black; + left: 20%; + top: 30%; + position:absolute; + display: flex; + justify-content: space-between; + padding: 20px; + margin-left: -20px; + margin-top: -20px; +} + +.weatherbox__section { + width: 30%; + height: 100%; + overflow: hidden; + border: 1px solid pink; +} + +.weatherbox__section h1 { + font-size: xx-large; +} + +.weatherbox_section--landscape { + display: flex; + align-items: end; + background-color: cornflowerblue; +} + +.weatherbox__section--city { + +} + +.weatherbox__section--temp { + +} + +.mountains { + width: 100%; +} \ No newline at end of file diff --git a/styles/index.css b/styles/style.css similarity index 100% rename from styles/index.css rename to styles/style.css diff --git a/weather-report-proxy-server b/weather-report-proxy-server new file mode 160000 index 000000000..95ab98e6d --- /dev/null +++ b/weather-report-proxy-server @@ -0,0 +1 @@ +Subproject commit 95ab98e6da97d76bcdeb527d5bcb3b4cb6f80c19 From dd4144823d17b120fd2556f38f739921bec77201 Mon Sep 17 00:00:00 2001 From: Philomena Kelly Date: Sun, 12 Jun 2022 22:58:38 -0400 Subject: [PATCH 2/4] added functionality to change temp and update color changes --- OLDindex.html | 37 ------------ index.html | 38 +++++++++++-- secretindex.html | 19 +++++++ src/index.js | 91 ++++++++++++++++++++---------- styles/{OLDindex.css => index.css} | 10 +--- styles/style.css | 0 6 files changed, 113 insertions(+), 82 deletions(-) delete mode 100644 OLDindex.html create mode 100644 secretindex.html rename styles/{OLDindex.css => index.css} (89%) delete mode 100644 styles/style.css diff --git a/OLDindex.html b/OLDindex.html deleted file mode 100644 index 987462a79..000000000 --- a/OLDindex.html +++ /dev/null @@ -1,37 +0,0 @@ - - - - - - - - - - Weather Report - - - - -
-
-
-
-

-
-
-

Danbury, CT

-
-
- -
-
- -
-
- - - - - - - \ No newline at end of file diff --git a/index.html b/index.html index 36f818ce0..dd1c5f33f 100644 --- a/index.html +++ b/index.html @@ -1,17 +1,43 @@ + - Document + + + + Weather Report + + - - -

-

+
+
+
+
+ sun + +

- + snowflake + +
+
+

+ +
+
+ +
+
+ +
+
+ + + + \ No newline at end of file diff --git a/secretindex.html b/secretindex.html new file mode 100644 index 000000000..acb1544d5 --- /dev/null +++ b/secretindex.html @@ -0,0 +1,19 @@ + + + + + + Document + + + + +
+ sun +

75

+ snowflake + + + + + \ No newline at end of file diff --git a/src/index.js b/src/index.js index c3cda71eb..48b6eea5e 100644 --- a/src/index.js +++ b/src/index.js @@ -1,8 +1,12 @@ 'use strict'; -const updatecity = (event) => { +const state = { + city: 'new milford, ct', + temperature: 0, +}; + +const updateCity = (event) => { city = document.getElementById('city').value; - console.log(city); let searchparams = { q: city, @@ -12,52 +16,77 @@ const updatecity = (event) => { .get('http://127.0.0.1:5000/location', { params: searchparams }) .then((response) => { - console.log('success!', response.data[0]['lat'], response.data[0]['lon']); - document.getElementById( - 'latlon' - ).textContent += ` success! ${response.data[0]['lat']}, ${response.data[0]['lon']}`; - - axios - .get('http://127.0.0.1:5000/weather', { - params: { - lat: response.data[0]['lat'], - lon: response.data[0]['lon'], - }, - }) - - .then((response) => { - console.log('success!', response.data.current.temp); - document.getElementById( - 'weather' - ).textContent += `success! ${response.data.current.temp}`; - }) - .catch((error) => { - console.log('error!', error.response.data); - }); + getWeather(response.data[0]['lat'], response.data[0]['lon']); }) .catch((error) => { console.log('error!', error.response.data); }); }; -const getWeather = (lat, lon) => { +const getWeather = (lattitude, longitude) => { axios - .get('http://127.0.0.1:5000/weather', { params: { lat: lat, lon: lon } }) + .get('http://127.0.0.1:5000/weather', { + params: { + lat: lattitude, + lon: longitude, + }, + }) .then((response) => { - console.log('success!', response.data[0]['current']['temp']); - document.getElementById( - 'weather' - ).textContent += `success! ${response.data}`; + console.log('success!', response.data.current.temp); + kelvinToF(response.data.current.temp); + updateTempAndColor(); }) .catch((error) => { console.log('error!', error.response.data); }); }; +const raiseTemp = (event) => { + state.temperature += 1; + updateTempAndColor(); +}; + +const lowerTemp = (event) => { + state.temperature -= 1; + updateTempAndColor(); +}; + +const kelvinToF = (tempInK) => { + state.temperature = Math.round(1.8 * (tempInK - 273) + 32); +}; + +const calculateColor = () => { + let colorPercent; + if (state.temperature > 110) { + colorPercent = (110 + 10) / 120; + } else if (state.temperature < -10) { + colorPercent = (-10 + 10) / 120; + } else { + colorPercent = (state.temperature + 10) / 120; + } + let colorRotate = (100 - colorPercent) * 240; + return Math.round(colorRotate); +}; + +const updateTempAndColor = () => { + document.getElementById( + 'weather' + ).style.color = `hsl(${calculateColor()}, 75%, 50%)`; + document.getElementById('weather').textContent = state.temperature; +}; + +updateTempAndColor(); + const registerEventHandlers = (event) => { const cityField = document.querySelector('#cityButton'); - cityField.addEventListener('click', updatecity); + const warmer = document.querySelector('#warmer'); + const colder = document.querySelector('#colder'); + + cityField.addEventListener('click', updateCity); + + warmer.addEventListener('click', raiseTemp); + colder.addEventListener('click', lowerTemp); }; document.addEventListener('DOMContentLoaded', registerEventHandlers); diff --git a/styles/OLDindex.css b/styles/index.css similarity index 89% rename from styles/OLDindex.css rename to styles/index.css index 90f7e76f6..4d8b9bbe0 100644 --- a/styles/OLDindex.css +++ b/styles/index.css @@ -13,7 +13,7 @@ body { #weatherbox { width: 60%; - min-height: 40%; + height: 40%; background-color: white; border: 2px solid black; left: 20%; @@ -31,6 +31,7 @@ body { height: 100%; overflow: hidden; border: 1px solid pink; + overflow: hidden; } .weatherbox__section h1 { @@ -43,13 +44,6 @@ body { background-color: cornflowerblue; } -.weatherbox__section--city { - -} - -.weatherbox__section--temp { - -} .mountains { width: 100%; diff --git a/styles/style.css b/styles/style.css deleted file mode 100644 index e69de29bb..000000000 From 7a0aed38a57847a5c8424b428871caddeafc3ab9 Mon Sep 17 00:00:00 2001 From: Philomena Kelly Date: Mon, 13 Jun 2022 00:55:25 -0400 Subject: [PATCH 3/4] added sky images and classes --- images/cloudy.svg | 49 + images/hot_mountains.svg | 78 + images/ice_mountains.svg | 67 + images/less_hot_mountains.svg | 67 + images/snowy_mountains.svg | 90 + images/spooky.svg | 67 + images/starry.svg | 23115 ++++++++++++++++++++++++++++++++ images/sunny.svg | 39 + index.html | 8 +- src/index.js | 25 +- styles/index.css | 28 +- 11 files changed, 23625 insertions(+), 8 deletions(-) create mode 100644 images/cloudy.svg create mode 100644 images/hot_mountains.svg create mode 100644 images/ice_mountains.svg create mode 100644 images/less_hot_mountains.svg create mode 100644 images/snowy_mountains.svg create mode 100644 images/spooky.svg create mode 100644 images/starry.svg create mode 100644 images/sunny.svg diff --git a/images/cloudy.svg b/images/cloudy.svg new file mode 100644 index 000000000..139dd528a --- /dev/null +++ b/images/cloudy.svg @@ -0,0 +1,49 @@ + + + + diff --git a/images/hot_mountains.svg b/images/hot_mountains.svg new file mode 100644 index 000000000..7bb27af7c --- /dev/null +++ b/images/hot_mountains.svg @@ -0,0 +1,78 @@ + + + + diff --git a/images/ice_mountains.svg b/images/ice_mountains.svg new file mode 100644 index 000000000..4c79cef2c --- /dev/null +++ b/images/ice_mountains.svg @@ -0,0 +1,67 @@ + + + + diff --git a/images/less_hot_mountains.svg b/images/less_hot_mountains.svg new file mode 100644 index 000000000..34cba06d2 --- /dev/null +++ b/images/less_hot_mountains.svg @@ -0,0 +1,67 @@ + + + + diff --git a/images/snowy_mountains.svg b/images/snowy_mountains.svg new file mode 100644 index 000000000..9d27a9b32 --- /dev/null +++ b/images/snowy_mountains.svg @@ -0,0 +1,90 @@ + + + + diff --git a/images/spooky.svg b/images/spooky.svg new file mode 100644 index 000000000..e44b8cef7 --- /dev/null +++ b/images/spooky.svg @@ -0,0 +1,67 @@ + + + + + + + + + + + + + + diff --git a/images/starry.svg b/images/starry.svg new file mode 100644 index 000000000..d1794c44f --- /dev/null +++ b/images/starry.svg @@ -0,0 +1,23115 @@ + + + + diff --git a/images/sunny.svg b/images/sunny.svg new file mode 100644 index 000000000..890f3458b --- /dev/null +++ b/images/sunny.svg @@ -0,0 +1,39 @@ + + + + + + + + + + diff --git a/index.html b/index.html index dd1c5f33f..1501d7049 100644 --- a/index.html +++ b/index.html @@ -15,6 +15,7 @@
+
sun @@ -24,11 +25,12 @@

-

+

Getting weather for:

+

-
- +
+
diff --git a/src/index.js b/src/index.js index 48b6eea5e..ead2e4c5e 100644 --- a/src/index.js +++ b/src/index.js @@ -69,11 +69,33 @@ const calculateColor = () => { return Math.round(colorRotate); }; +const updateLandscape = () => { + let mountains; + if (state.temperature > 110) { + mountains = '/images/hot_mountains.svg'; + } else if (state.temperature > 85) { + mountains = '/images/less_hot_mountains.svg'; + } else if (state.temperature > 32) { + mountains = '/images/green_mountains.svg'; + } else if (state.temperature > -10) { + mountains = '/images/snowy_mountains.svg'; + } else { + mountains = '/images/ice_mountains.svg'; + } + document.querySelector('#mountain').src = mountains; +}; + const updateTempAndColor = () => { document.getElementById( 'weather' ).style.color = `hsl(${calculateColor()}, 75%, 50%)`; document.getElementById('weather').textContent = state.temperature; + updateLandscape(); +}; + +const updateCityText = (event) => { + document.getElementById('cityDisplay').textContent = + document.getElementById('city').value; }; updateTempAndColor(); @@ -82,9 +104,10 @@ const registerEventHandlers = (event) => { const cityField = document.querySelector('#cityButton'); const warmer = document.querySelector('#warmer'); const colder = document.querySelector('#colder'); + const cityChange = document.querySelector('#city'); cityField.addEventListener('click', updateCity); - + cityChange.addEventListener('keydown', updateCityText); warmer.addEventListener('click', raiseTemp); colder.addEventListener('click', lowerTemp); }; diff --git a/styles/index.css b/styles/index.css index 4d8b9bbe0..1db61bc7a 100644 --- a/styles/index.css +++ b/styles/index.css @@ -38,13 +38,33 @@ body { font-size: xx-large; } -.weatherbox_section--landscape { +#weatherbox__landscape { display: flex; align-items: end; - background-color: cornflowerblue; + background-size: contain; + width: 30%; + height: 100%; + overflow: hidden; + border: 1px solid pink; } +.sunnySky { + background-image: url('/images/sunny.svg'); + background-color: rgb(214, 243, 255); +} +.spookySky { + background-image: url('/images/spooky.svg'); + background-color: rgb(120, 140, 183); +} +.starrySky { + background-image: url('/images/starry.svg'); +} +.cloudySky { + background-image: url('/images/cloudy.svg'); + background-color: gainsboro; +} -.mountains { - width: 100%; +#mountain { + height: 70%; + margin-left: -50px; } \ No newline at end of file From 5ee90817dfdc63a1a68984d50c18a90854380823 Mon Sep 17 00:00:00 2001 From: Philomena Kelly Date: Mon, 13 Jun 2022 12:41:10 -0400 Subject: [PATCH 4/4] added functionality to change sky and reset city --- images/go.png | Bin 0 -> 1706 bytes images/reset.png | Bin 0 -> 3715 bytes index.html | 12 ++++++++++-- src/index.js | 21 ++++++++++++++++++++- styles/index.css | 7 +++++-- 5 files changed, 35 insertions(+), 5 deletions(-) create mode 100644 images/go.png create mode 100644 images/reset.png diff --git a/images/go.png b/images/go.png new file mode 100644 index 0000000000000000000000000000000000000000..221e97d80f63ebfa6502b36a1a5ffbffc46b76ea GIT binary patch literal 1706 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 ht?y0T#7*2d{10912
+

Getting weather for:

-

- +

+
diff --git a/src/index.js b/src/index.js index ead2e4c5e..3a3f118d0 100644 --- a/src/index.js +++ b/src/index.js @@ -98,6 +98,20 @@ const updateCityText = (event) => { document.getElementById('city').value; }; +const updateSky = (event) => { + let sky = document.querySelector('#skies').value; + let skyBox = document.querySelector('#weatherbox__landscape'); + skyBox.className = sky; + console.log(sky); +}; + +const resetCity = (event) => { + state.city = 'new milford, ct'; + city = document.querySelector('#city'); + city.value = 'new milford, ct'; + updateCity(); +}; + updateTempAndColor(); const registerEventHandlers = (event) => { @@ -105,11 +119,16 @@ const registerEventHandlers = (event) => { const warmer = document.querySelector('#warmer'); const colder = document.querySelector('#colder'); const cityChange = document.querySelector('#city'); + const skyChange = document.querySelector('#skies'); + const reset = document.querySelector('#reset'); + reset.addEventListener('click', resetCity); + skyChange.addEventListener('change', updateSky); cityField.addEventListener('click', updateCity); - cityChange.addEventListener('keydown', updateCityText); + cityChange.addEventListener('keyup', updateCityText); warmer.addEventListener('click', raiseTemp); colder.addEventListener('click', lowerTemp); }; document.addEventListener('DOMContentLoaded', registerEventHandlers); +document.addEventListener('DOMContentLoaded', updateCity); diff --git a/styles/index.css b/styles/index.css index 1db61bc7a..d4e39e123 100644 --- a/styles/index.css +++ b/styles/index.css @@ -42,6 +42,7 @@ body { display: flex; align-items: end; background-size: contain; + background-repeat: no-repeat; width: 30%; height: 100%; overflow: hidden; @@ -65,6 +66,8 @@ body { } #mountain { - height: 70%; - margin-left: -50px; + /* height: 70%; */ + width: 150%; + /* margin-left: -50px; + margin-bottom: -5px; */ } \ No newline at end of file