From e1dd871f48aa4be76ac94a8629d22118062cbe52 Mon Sep 17 00:00:00 2001 From: cathos Date: Sun, 12 Jun 2022 15:28:59 -0700 Subject: [PATCH 1/7] finished wave 2 - got buttons to increase and decrease temperature --- .gitignore | 3 +- index.html | 40 +++++++++++++++++++- src/index.js | 38 +++++++++++++++++++ styles/index.css | 0 styles/style.css | 98 ++++++++++++++++++++++++++++++++++++++++++++++++ 5 files changed, 176 insertions(+), 3 deletions(-) delete mode 100644 styles/index.css create mode 100644 styles/style.css diff --git a/.gitignore b/.gitignore index 31b153a9b..bd1278b53 100644 --- a/.gitignore +++ b/.gitignore @@ -1,4 +1,5 @@ .vscode .DS_Store node_modules -.cache \ No newline at end of file +.cache +src/jsExample.js \ No newline at end of file diff --git a/index.html b/index.html index 68b320b9a..8c936e218 100644 --- a/index.html +++ b/index.html @@ -3,10 +3,46 @@ - + Weather Report + + - +
+ +
+
+

25

+
+
+
+ + + +
+
+ 
+            
+                        ┼┼┼│  │    ││ │
+            ┼┼┼┼┐ ├────┼┼─┼──
+            ┼┼┼┼│ ├────┼┼─┼──┼┼┼│ 
+            ┼┼┼┼┘ │    ││ │┼┼┼│  │    ││ │
+            ┼     ├────┼┼─┼──
+            ┼┼┼┼│ ├────┼┼─┼──
+            ┼┼┼┼┘ │    ││ │       ┼┼┼┼┼┼****
+            ********************************
+            ********************************
+            ********************************
+
+
+ + \ No newline at end of file diff --git a/src/index.js b/src/index.js index e69de29bb..7a2f32162 100644 --- a/src/index.js +++ b/src/index.js @@ -0,0 +1,38 @@ +// import axios from 'axios'; + +const state = { + temp: 25, + city: 'Denver', + lat: 39.7392, + long: -104.985, +}; + +const convertKtoC = (temp) => { + return temp - 273.15; +}; + +const convertCtoF = (temp) => { + return temp * (9 / 5) + 32; +}; + +const increaseTemp = () => { + state.temp += 1; + const tempContainer = document.querySelector('#numeric_temperature'); + tempContainer.textContent = `${state.temp}`; +}; + +const decreaseTemp = () => { + state.temp -= 1; + const tempContainer = document.querySelector('#numeric_temperature'); + tempContainer.textContent = `${state.temp}`; +}; + +const registerEventHandlers = () => { + const increaseTempButton = document.querySelector('#increase'); + increaseTempButton.addEventListener('click', increaseTemp); + + const decreaseTempButton = document.querySelector('#decrease'); + decreaseTempButton.addEventListener('click', decreaseTemp); +}; + +document.addEventListener('DOMContentLoaded', registerEventHandlers); diff --git a/styles/index.css b/styles/index.css deleted file mode 100644 index e69de29bb..000000000 diff --git a/styles/style.css b/styles/style.css new file mode 100644 index 000000000..c8bf8297b --- /dev/null +++ b/styles/style.css @@ -0,0 +1,98 @@ +html { + /* margin: calc(8px + 1.5625vw); */ + /* justify-content: center; */ + /* align-items: center; */ + font-size: min(max(2rem, 4vw), 30px); + line-height: 0.25; + max-width: 50vw; + text-align: center; +} + +header { + +} + +nav { + display: flex; + align-items: center; + flex-direction: row; + /* padding: calc(8px + 1.5625vw); */ + column-gap: 1rem; + row-gap: 0rem; + max-width: 50vw; + justify-content: center; + /* padding: 0vh; */ + /* line-height: 50%; */ + /* grid-template-columns: 12.5% auto 12.5%; */ + +} + +figure { + flex-wrap: nowrap; + display: flex; + align-items: center; + flex-direction: row; + /* max-height: 2vh; */ + column-gap: 1rem; + row-gap: 0rem; + justify-content: center; +} + +#landscape { + display: flex; + align-items: center; + padding-left: calc(8px + 1.5625vw); + /* padding-right: calc(8px + 1.5625vw); */ + font-family: monospace; + font-size: 0.5rem; + line-height: 0.5rem; + text-align: start; +} + +#search_location { + /* grid-column-start: 1; */ +} + +#location_text { + font-weight: bold; + font-size: large; + text-align: center; +} + +#site_title{ + /* grid-column-start: 2; */ + text-align: center; +} + +#refresh_weather{ + /* grid-column-start: 3; */ +} + +#weather_display { + /* max-width: 66vw; */ + display: flex; + align-self: center; + align-items: center; + /* gap: 1rem; */ + /* grid-template-columns: 12.5% 12.5% auto 12.5% 12.5%; + grid-template-rows: 50% 12.5%; */ + vertical-align: top; + +} + +#numeric_temperature { + /* grid-column-start: 3; */ + /* text-align: center; */ + /* font-size: 10rem; */ +} + +#temperature_units { + /* grid-column-start: 4; */ + text-align: start; +} + +#change_temperature { + /* display: flex; */ + /* gap: 1rem; */ + /* text-align: center; */ +} \ No newline at end of file From e1272ba1a067e7bf4dc66b9238c5d2efefb54699 Mon Sep 17 00:00:00 2001 From: cathos Date: Sun, 12 Jun 2022 19:24:06 -0700 Subject: [PATCH 2/7] finished wave 2 landscape and unit changes (preliminary landscapes) --- .gitignore | 2 +- index.html | 65 +++++++++++++++--------------- src/index.js | 101 ++++++++++++++++++++++++++++++++++++++++++++--- styles/style.css | 56 ++++++++++++++++++-------- 4 files changed, 169 insertions(+), 55 deletions(-) diff --git a/.gitignore b/.gitignore index bd1278b53..1b2daf7fa 100644 --- a/.gitignore +++ b/.gitignore @@ -2,4 +2,4 @@ .DS_Store node_modules .cache -src/jsExample.js \ No newline at end of file +jsExample.js \ No newline at end of file diff --git a/index.html b/index.html index 8c936e218..79593f98f 100644 --- a/index.html +++ b/index.html @@ -9,38 +9,39 @@ -
- -
-
-

25

-
-
-
- - - -
-
- 
-            
-                        ┼┼┼│  │    ││ │
-            ┼┼┼┼┐ ├────┼┼─┼──
-            ┼┼┼┼│ ├────┼┼─┼──┼┼┼│ 
-            ┼┼┼┼┘ │    ││ │┼┼┼│  │    ││ │
-            ┼     ├────┼┼─┼──
-            ┼┼┼┼│ ├────┼┼─┼──
-            ┼┼┼┼┘ │    ││ │       ┼┼┼┼┼┼****
-            ********************************
-            ********************************
-            ********************************
-
+
+
+ +
+
+ 25 +
+
+
+ + + +
+
+ 
+┼┼┼│                      │  ┼┼│
+┼┼┼┼┐                       ┼┼┼│
+┼┼┼┼│           *         │┼┼┼┼│
+┼┼┼┼┘          *          │ ┼┼┼│
+┼  ├────┼          ───────│ ┼┼┼│
+┼┼┼┼│┐┐┐┐┐┐┐┐ ├├├├├├├├├──│┼ ┼┼┼│
+┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼
+********************************
+********************************
+********************************
+
+
diff --git a/src/index.js b/src/index.js index 7a2f32162..aac6dc5ec 100644 --- a/src/index.js +++ b/src/index.js @@ -2,35 +2,126 @@ const state = { temp: 25, + tempUnits: '°C', city: 'Denver', lat: 39.7392, long: -104.985, }; +const landscapes = { + cold: '\ + I X I I I I I I I I I I\ + ┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼\ + ********************************', + cool: '***cool***', + neutral: + '\ + ----neutral-----\ + ┼┼┼│ │ ┼┼│\ + ┼┼┼┼┐ ┼┼┼│\ + ┼┼┼┼│ * │┼┼┼┼│\ + ┼┼┼┼┘ * │ ┼┼┼│\ + ┼ ├────┼ ───────│ ┼┼┼│\ + ┼┼┼┼│┐┐┐┐┐┐┐┐ ├├├├├├├├├──│┼ ┼┼┼│\ + ┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼\ + ********************************\ + ********************************\ + ********************************', + warm: '^^^^^^warm^^^^^^', + hot: '<<<<>>>>', +}; + +const convertFtoC = (temp) => { + return Math.round((((temp - 32) * 5) / 9) * 10) / 10; +}; + const convertKtoC = (temp) => { return temp - 273.15; }; const convertCtoF = (temp) => { - return temp * (9 / 5) + 32; + return Math.round((temp * (9 / 5) + 32) * 10) / 10; }; -const increaseTemp = () => { - state.temp += 1; +const changeLandscapeTemp = () => { + let color = 'rgba(150, 50, 110, 0.5)'; + let degC = 0.0; + let landscape = landscapes.neutral; + + if (state.tempUnits === '°F') { + degC = convertFtoC(state.temp); + } else { + degC = state.temp; + } + if (degC > 30) { + landscape = landscapes.hot; + color = 'rgba(150, 90, 30, 0.5)'; + } else if (degC > 25) { + landscape = landscapes.warm; + color = 'rgba(120, 60, 40, 0.5)'; + } else if (degC > 15) { + landscape = landscapes.neutral; + color = 'rgba(100, 110, 10, 0.5)'; + } else if (degC > 0) { + landscape = landscapes.cool; + color = 'rgba(80, 10, 110, 0.5)'; + } else if (degC <= 0) { + landscape = landscapes.cold; + color = 'rgba(5, 5, 110, 0.5)'; + } + + let backgroundColors = `radial-gradient(${color}, rgba(0, 0, 0, 0))`; + + const backgroundColor = document.getElementById('weather_body'); + backgroundColor.style.backgroundImage = backgroundColors; + const landscapeReturn = document.getElementById('landscape'); + landscapeReturn.textContent = landscape; const tempContainer = document.querySelector('#numeric_temperature'); tempContainer.textContent = `${state.temp}`; + const unitsContainer = document.querySelector('#temperature_units'); + unitsContainer.textContent = `${state.tempUnits}`; +}; + +const changeUnits = () => { + const currentUnits = state.tempUnits; + // document.getElementById('#temperature_units').textContent; + // state.tempUnits = currentUnits; + console.log('current units: ' + currentUnits); + if (currentUnits === '°C') { + state.temp = convertCtoF(state.temp); + state.tempUnits = '°F'; + } else if (currentUnits === '°F') { + state.temp = convertFtoC(state.temp); + state.tempUnits = '°C'; + } + changeLandscapeTemp(); +}; + +const increaseTemp = () => { + state.temp += 1; + changeLandscapeTemp(); +}; + +const resetTemp = () => { + state.temp = 25; + changeLandscapeTemp(); }; const decreaseTemp = () => { state.temp -= 1; - const tempContainer = document.querySelector('#numeric_temperature'); - tempContainer.textContent = `${state.temp}`; + changeLandscapeTemp(); }; const registerEventHandlers = () => { + const changeUnitsButton = document.querySelector('#temperature_units'); + changeUnitsButton.addEventListener('click', changeUnits); + const increaseTempButton = document.querySelector('#increase'); increaseTempButton.addEventListener('click', increaseTemp); + const resetTempButton = document.querySelector('#reset'); + resetTempButton.addEventListener('click', resetTemp); + const decreaseTempButton = document.querySelector('#decrease'); decreaseTempButton.addEventListener('click', decreaseTemp); }; diff --git a/styles/style.css b/styles/style.css index c8bf8297b..9f0e65d17 100644 --- a/styles/style.css +++ b/styles/style.css @@ -3,23 +3,25 @@ html { /* justify-content: center; */ /* align-items: center; */ font-size: min(max(2rem, 4vw), 30px); - line-height: 0.25; - max-width: 50vw; + padding: calc(8px + 1.5625vw); + /* line-height: 0.25; */ + /* max-width: 50vw; */ text-align: center; + /* background-image: + radial-gradient(rgba(150, 50, 110, 0.50), rgba(0, 0, 0, 0)); */ } header { - + padding: calc(8px + 1.5625vw); } nav { display: flex; align-items: center; flex-direction: row; - /* padding: calc(8px + 1.5625vw); */ column-gap: 1rem; row-gap: 0rem; - max-width: 50vw; + /* max-width: 50vw; */ justify-content: center; /* padding: 0vh; */ /* line-height: 50%; */ @@ -33,20 +35,32 @@ figure { align-items: center; flex-direction: row; /* max-height: 2vh; */ - column-gap: 1rem; + /* column-gap: 1rem; */ row-gap: 0rem; + margin-top: 0; + margin-bottom: 0; justify-content: center; + flex: 25%; } -#landscape { +#weather_body { display: flex; + flex-direction: column; align-items: center; - padding-left: calc(8px + 1.5625vw); + background-image: + radial-gradient(rgba(100, 110, 10, 0.5), rgba(0, 0, 0, 0)); +} + +#landscape { + /* display: flex; */ + /* align-items: center; */ + /* align-self: center; */ + /* padding-left: calc(8px + 1.5625vw); */ /* padding-right: calc(8px + 1.5625vw); */ font-family: monospace; font-size: 0.5rem; line-height: 0.5rem; - text-align: start; + text-align: center; } #search_location { @@ -61,7 +75,7 @@ figure { #site_title{ /* grid-column-start: 2; */ - text-align: center; + /* text-align: center; */ } #refresh_weather{ @@ -70,29 +84,37 @@ figure { #weather_display { /* max-width: 66vw; */ + /* background-color: rgba(150, 50, 110, 0.85); */ display: flex; - align-self: center; - align-items: center; + /* align-self: center; */ + /* align-items: center; */ /* gap: 1rem; */ /* grid-template-columns: 12.5% 12.5% auto 12.5% 12.5%; grid-template-rows: 50% 12.5%; */ - vertical-align: top; + /* vertical-align: top; */ } #numeric_temperature { /* grid-column-start: 3; */ - /* text-align: center; */ - /* font-size: 10rem; */ + /* text-align: top; */ + font-size: 8rem; + line-height: 90%; + /* align-self: flex-start; */ +} + +#units_div { + align-self: flex-start; + flex-shrink: 2; } #temperature_units { /* grid-column-start: 4; */ - text-align: start; + /* text-align: top; */ } #change_temperature { /* display: flex; */ - /* gap: 1rem; */ + gap: 1rem; /* text-align: center; */ } \ No newline at end of file From 44e537e3467c986d6e2d19e0546524e1b265d906 Mon Sep 17 00:00:00 2001 From: cathos Date: Sun, 12 Jun 2022 21:31:52 -0700 Subject: [PATCH 3/7] finished basic implementation of wave 3 --- index.html | 7 ++++--- src/index.js | 20 ++++++++++++++++--- styles/style.css | 52 +----------------------------------------------- 3 files changed, 22 insertions(+), 57 deletions(-) diff --git a/index.html b/index.html index 79593f98f..c03c4c454 100644 --- a/index.html +++ b/index.html @@ -11,11 +11,12 @@
+ +

~ current temperature in ~

+
diff --git a/src/index.js b/src/index.js index aac6dc5ec..0795bde98 100644 --- a/src/index.js +++ b/src/index.js @@ -102,9 +102,10 @@ const increaseTemp = () => { changeLandscapeTemp(); }; -const resetTemp = () => { +const reset = () => { state.temp = 25; changeLandscapeTemp(); + resetLocation(); }; const decreaseTemp = () => { @@ -112,6 +113,19 @@ const decreaseTemp = () => { changeLandscapeTemp(); }; +const changeCity = () => { + const newCity = document.getElementById('location_text').value; + const cityDisplay = document.getElementById('location_text'); + state.city = newCity; + cityDisplay.textContent = state.city; +}; + +const resetLocation = () => { + const locationInput = document.getElementById('location_text'); + locationInput.value = 'Denver'; + changeCity(); +}; + const registerEventHandlers = () => { const changeUnitsButton = document.querySelector('#temperature_units'); changeUnitsButton.addEventListener('click', changeUnits); @@ -119,8 +133,8 @@ const registerEventHandlers = () => { const increaseTempButton = document.querySelector('#increase'); increaseTempButton.addEventListener('click', increaseTemp); - const resetTempButton = document.querySelector('#reset'); - resetTempButton.addEventListener('click', resetTemp); + const resetButton = document.querySelector('#reset'); + resetButton.addEventListener('click', reset); const decreaseTempButton = document.querySelector('#decrease'); decreaseTempButton.addEventListener('click', decreaseTemp); diff --git a/styles/style.css b/styles/style.css index 9f0e65d17..be14d4d89 100644 --- a/styles/style.css +++ b/styles/style.css @@ -1,14 +1,7 @@ html { - /* margin: calc(8px + 1.5625vw); */ - /* justify-content: center; */ - /* align-items: center; */ font-size: min(max(2rem, 4vw), 30px); padding: calc(8px + 1.5625vw); - /* line-height: 0.25; */ - /* max-width: 50vw; */ text-align: center; - /* background-image: - radial-gradient(rgba(150, 50, 110, 0.50), rgba(0, 0, 0, 0)); */ } header { @@ -21,12 +14,7 @@ nav { flex-direction: row; column-gap: 1rem; row-gap: 0rem; - /* max-width: 50vw; */ justify-content: center; - /* padding: 0vh; */ - /* line-height: 50%; */ - /* grid-template-columns: 12.5% auto 12.5%; */ - } figure { @@ -34,8 +22,6 @@ figure { display: flex; align-items: center; flex-direction: row; - /* max-height: 2vh; */ - /* column-gap: 1rem; */ row-gap: 0rem; margin-top: 0; margin-bottom: 0; @@ -52,55 +38,26 @@ figure { } #landscape { - /* display: flex; */ - /* align-items: center; */ - /* align-self: center; */ - /* padding-left: calc(8px + 1.5625vw); */ - /* padding-right: calc(8px + 1.5625vw); */ font-family: monospace; font-size: 0.5rem; line-height: 0.5rem; text-align: center; } -#search_location { - /* grid-column-start: 1; */ -} - #location_text { font-weight: bold; font-size: large; text-align: center; } -#site_title{ - /* grid-column-start: 2; */ - /* text-align: center; */ -} - -#refresh_weather{ - /* grid-column-start: 3; */ -} #weather_display { - /* max-width: 66vw; */ - /* background-color: rgba(150, 50, 110, 0.85); */ - display: flex; - /* align-self: center; */ - /* align-items: center; */ - /* gap: 1rem; */ - /* grid-template-columns: 12.5% 12.5% auto 12.5% 12.5%; - grid-template-rows: 50% 12.5%; */ - /* vertical-align: top; */ - + display: flex; } #numeric_temperature { - /* grid-column-start: 3; */ - /* text-align: top; */ font-size: 8rem; line-height: 90%; - /* align-self: flex-start; */ } #units_div { @@ -108,13 +65,6 @@ figure { flex-shrink: 2; } -#temperature_units { - /* grid-column-start: 4; */ - /* text-align: top; */ -} - #change_temperature { - /* display: flex; */ gap: 1rem; - /* text-align: center; */ } \ No newline at end of file From c9e0ea844aa85c8fda6f7c4e955177d0cc19e36f Mon Sep 17 00:00:00 2001 From: cathos Date: Mon, 13 Jun 2022 00:25:23 -0700 Subject: [PATCH 4/7] passed wave 4 --- index.html | 4 ++-- src/index.js | 58 +++++++++++++++++++++++++++++++++++++++++++++++----- 2 files changed, 55 insertions(+), 7 deletions(-) diff --git a/index.html b/index.html index c03c4c454..1f3d4f30c 100644 --- a/index.html +++ b/index.html @@ -44,7 +44,7 @@
- - + + \ No newline at end of file diff --git a/src/index.js b/src/index.js index 0795bde98..049ff29cd 100644 --- a/src/index.js +++ b/src/index.js @@ -1,15 +1,16 @@ // import axios from 'axios'; +// const axios = require('axios'); const state = { temp: 25, tempUnits: '°C', city: 'Denver', lat: 39.7392, - long: -104.985, + lon: -104.985, }; const landscapes = { - cold: '\ + cold: '-----cold-----\ I X I I I I I I I I I I\ ┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼\ ********************************', @@ -32,15 +33,15 @@ const landscapes = { }; const convertFtoC = (temp) => { - return Math.round((((temp - 32) * 5) / 9) * 10) / 10; + return Math.round(((temp - 32) * 5) / 9); }; const convertKtoC = (temp) => { - return temp - 273.15; + return Math.round(temp - 273.15); }; const convertCtoF = (temp) => { - return Math.round((temp * (9 / 5) + 32) * 10) / 10; + return Math.round(temp * (9 / 5) + 32); }; const changeLandscapeTemp = () => { @@ -74,10 +75,13 @@ const changeLandscapeTemp = () => { const backgroundColor = document.getElementById('weather_body'); backgroundColor.style.backgroundImage = backgroundColors; + const landscapeReturn = document.getElementById('landscape'); landscapeReturn.textContent = landscape; + const tempContainer = document.querySelector('#numeric_temperature'); tempContainer.textContent = `${state.temp}`; + const unitsContainer = document.querySelector('#temperature_units'); unitsContainer.textContent = `${state.tempUnits}`; }; @@ -113,6 +117,42 @@ const decreaseTemp = () => { changeLandscapeTemp(); }; +const searchLocation = () => { + axios + .get('http://localhost:5000/location', { + params: { + q: state.city, + }, + }) + .then((response) => { + console.log('success!' + JSON.stringify(response.data[0])); + state.lat = response.data[0].lat; + state.lon = response.data[0].lon; + searchTemperature(); + }) + .catch((error) => { + console.log('searchLocation error: ' + error.response); + }); +}; + +const searchTemperature = () => { + axios + .get('http://localhost:5000/weather', { + params: { + lat: state.lat, + lon: state.lon, + }, + }) + .then((response) => { + console.log('success!' + JSON.stringify(response.data.current.temp)); + state.temp = convertKtoC(response.data.current.temp); + changeLandscapeTemp(); + }) + .catch((error) => { + console.log('searchTemperature error: ' + error.response); + }); +}; + const changeCity = () => { const newCity = document.getElementById('location_text').value; const cityDisplay = document.getElementById('location_text'); @@ -127,6 +167,14 @@ const resetLocation = () => { }; const registerEventHandlers = () => { + changeCity(); + const changeLocationOnInput = document.querySelector('#location_text'); + changeLocationOnInput.addEventListener('change', searchLocation); + + changeCity(); + const changeLocation = document.querySelector('#refresh_weather'); + changeLocation.addEventListener('click', searchLocation); + const changeUnitsButton = document.querySelector('#temperature_units'); changeUnitsButton.addEventListener('click', changeUnits); From 1d0ebb1facb4b057a64224f861ec798375316b41 Mon Sep 17 00:00:00 2001 From: cathos Date: Mon, 13 Jun 2022 13:35:41 -0700 Subject: [PATCH 5/7] finished wave 5 --- index.html | 18 +++++++++++++++++- src/index.js | 38 ++++++++++++++++++++++++++++++++++++++ styles/style.css | 4 +++- 3 files changed, 58 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index 1f3d4f30c..3a846bf85 100644 --- a/index.html +++ b/index.html @@ -29,7 +29,23 @@ -
+
+ +
+
+ 
+|   :   :   :     :     :      │
+|  :   :   :     :     :       │
+|   :   :   :     :     :      │
+
+
+ 
 ┼┼┼│                      │  ┼┼│
 ┼┼┼┼┐                       ┼┼┼│
diff --git a/src/index.js b/src/index.js
index 049ff29cd..b10c3ae1e 100644
--- a/src/index.js
+++ b/src/index.js
@@ -7,6 +7,7 @@ const state = {
   city: 'Denver',
   lat: 39.7392,
   lon: -104.985,
+  sky: 'sunny',
 };
 
 const landscapes = {
@@ -32,6 +33,29 @@ const landscapes = {
   hot: '<<<<>>>>',
 };
 
+const skies = {
+  sunny:
+    '\
+  |   :   :   :     :     :      │\
+  |  :   :   :     :     :       │\
+  |   :   :   :     :     :      │',
+  cloudy:
+    '\
+|   : = : = :  =  :  =  :      │\
+|  : = : = :  =  :  =  :   =   │\
+| = : = : = :  =  :  =  :      │',
+  rainy:
+    '\
+|   :  :: : : : : : :   : :    │\
+|  : : : : :   : :   : :   :   │\
+|   : : :  ::  :  :: : ::   :  │',
+  snowy:
+    '\
+|   *    *    * *   *  *  *    │\
+| *  *    *  * *   * *  *  *  *│\
+|   * * * *   *   *   ** *     │',
+};
+
 const convertFtoC = (temp) => {
   return Math.round(((temp - 32) * 5) / 9);
 };
@@ -108,6 +132,7 @@ const increaseTemp = () => {
 
 const reset = () => {
   state.temp = 25;
+  state.tempUnits = '°C';
   changeLandscapeTemp();
   resetLocation();
 };
@@ -166,6 +191,16 @@ const resetLocation = () => {
   changeCity();
 };
 
+const changeSky = () => {
+  // const currentSky = state.sky;
+  const skyInput = document.getElementById('sky_selector');
+  const skyValue = skyInput.options[skyInput.selectedIndex].value;
+  console.log('sky_selector' + skyValue);
+  state.sky = skyValue;
+  const skyReturn = document.getElementById('sky_display');
+  skyReturn.textContent = skies[state.sky];
+};
+
 const registerEventHandlers = () => {
   changeCity();
   const changeLocationOnInput = document.querySelector('#location_text');
@@ -186,6 +221,9 @@ const registerEventHandlers = () => {
 
   const decreaseTempButton = document.querySelector('#decrease');
   decreaseTempButton.addEventListener('click', decreaseTemp);
+
+  const skySelector = document.querySelector('#sky_selector');
+  skySelector.addEventListener('change', changeSky);
 };
 
 document.addEventListener('DOMContentLoaded', registerEventHandlers);
diff --git a/styles/style.css b/styles/style.css
index be14d4d89..9d1bd473f 100644
--- a/styles/style.css
+++ b/styles/style.css
@@ -37,11 +37,13 @@ figure {
     radial-gradient(rgba(100, 110, 10, 0.5), rgba(0, 0, 0, 0));
 }
 
-#landscape {
+.ascii_art {
     font-family: monospace;
     font-size: 0.5rem;
     line-height: 0.5rem;
     text-align: center;
+    max-width: 32ch;
+    text-overflow: clip;
 }
 
 #location_text {

From 88ec6ed38f0df3d7c5f957c4627e2dd144fa560c Mon Sep 17 00:00:00 2001
From: cathos 
Date: Wed, 15 Jun 2022 17:16:22 -0700
Subject: [PATCH 6/7] minor change to location update search function call
 order

---
 src/index.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/index.js b/src/index.js
index b10c3ae1e..a9d589027 100644
--- a/src/index.js
+++ b/src/index.js
@@ -153,6 +153,7 @@ const searchLocation = () => {
       console.log('success!' + JSON.stringify(response.data[0]));
       state.lat = response.data[0].lat;
       state.lon = response.data[0].lon;
+      changeCity();
       searchTemperature();
     })
     .catch((error) => {

From bd5204cd785dd7bbd89b9a64994954580d00a66d Mon Sep 17 00:00:00 2001
From: cathos 
Date: Thu, 16 Jun 2022 15:33:19 -0700
Subject: [PATCH 7/7] made minor change to fix js event handler on change text

---
 index.html   | 2 +-
 src/index.js | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/index.html b/index.html
index 3a846bf85..57f3a2cb2 100644
--- a/index.html
+++ b/index.html
@@ -16,7 +16,7 @@
             
             
         
diff --git a/src/index.js b/src/index.js
index a9d589027..c2d36da0b 100644
--- a/src/index.js
+++ b/src/index.js
@@ -203,11 +203,11 @@ const changeSky = () => {
 };
 
 const registerEventHandlers = () => {
-  changeCity();
+  // changeCity();
   const changeLocationOnInput = document.querySelector('#location_text');
   changeLocationOnInput.addEventListener('change', searchLocation);
 
-  changeCity();
+  // changeCity();
   const changeLocation = document.querySelector('#refresh_weather');
   changeLocation.addEventListener('click', searchLocation);