From 64c6505ad134aeb53d88c346b37bb6dc1d398fe3 Mon Sep 17 00:00:00 2001 From: Jacqueline Hopkins <318jlh@gmail.com> Date: Wed, 7 Dec 2022 14:07:13 -0800 Subject: [PATCH 01/15] linked index.js, stylesheet, and axios to html document --- index.html | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index 68b320b9a..75e0ec098 100644 --- a/index.html +++ b/index.html @@ -5,8 +5,12 @@ Weather Report + - + + - \ No newline at end of file + + + From 2c82c666ce716f0a74be305a537eef5059330961 Mon Sep 17 00:00:00 2001 From: arika Date: Wed, 7 Dec 2022 17:08:51 -0500 Subject: [PATCH 02/15] "added set up stuff" --- index.html | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 68b320b9a..b3c3529b1 100644 --- a/index.html +++ b/index.html @@ -1,12 +1,15 @@ + + Weather Report - + + \ No newline at end of file From 183cae8bb822bc7859a555f6e8a64952654022a8 Mon Sep 17 00:00:00 2001 From: arika Date: Wed, 7 Dec 2022 18:36:22 -0500 Subject: [PATCH 03/15] "updated html" --- index.html | 42 ++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 42 insertions(+) diff --git a/index.html b/index.html index 88b4f5741..27aefa234 100644 --- a/index.html +++ b/index.html @@ -9,6 +9,48 @@ +
+

Weather Report

+
+ +
+

Temperature

+ + + +

+ 60 +

+ + +
+ +
+

Sky

+ + +
+ +
+

City Name

+
+ + +
+
+ +
+

Weather Garden

+

🌧🌈⛈🌧🌧💧⛈🌧🌦🌧💧🌧🌧

+

🌾🌾_🍃_🪨__🛤_🌾🌾🌾_🍃

+ +
+ From 9eb80751f8c5a9feda3e6b6b5f193e782fa5b7bc Mon Sep 17 00:00:00 2001 From: Jacqueline Hopkins <318jlh@gmail.com> Date: Wed, 7 Dec 2022 15:38:33 -0800 Subject: [PATCH 04/15] take away changes --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index 88b4f5741..04feeb6a2 100644 --- a/index.html +++ b/index.html @@ -10,7 +10,7 @@ - + From ba654a2535d1b6edf423bc0092bfda713b199404 Mon Sep 17 00:00:00 2001 From: arika Date: Thu, 8 Dec 2022 14:26:50 -0500 Subject: [PATCH 05/15] "wave 2 complete" --- src/index.js | 46 +++++++++++++++++++++++++++++++++++++++++----- styles/index.css | 3 +++ 2 files changed, 44 insertions(+), 5 deletions(-) diff --git a/src/index.js b/src/index.js index 9ff03912f..a6d74ee63 100644 --- a/src/index.js +++ b/src/index.js @@ -1,22 +1,58 @@ -let state = 60; +let state = { + startingTemp : 60, + // landscapeIcons : 🌾🌾_🍃_🪨__🛤_🌾🌾🌾_🍃, +}; + +// let state = 60; // increase temoerature const updateTemmperature = state => { // const increaseTemperature = () => { - const temperatureContainer = document.querySelector("#startingTemp"); - temperatureContainer.textContent = state; + const temperatureContainer = document.getElementById("startingTemp"); + temperatureContainer.textContent = state.startingTemp; }; const increaseTemperature = () => { - state += 1; + state.startingTemp += 1; updateTemmperature(state); + updateColor(); + updateLandscape(); }; const decreaseTemperature = () => { - state -= 1; + state.startingTemp -= 1; updateTemmperature(state); + updateColor(); + updateLandscape(); }; +const updateColor = () => { + + if (state.startingTemp >= 80) { + document.getElementById('startingTemp').style.color = 'red'; + } else if (state.startingTemp >= 70) { + document.getElementById('startingTemp').style.color = 'orange'; + } else if (state.startingTemp >= 60) { + document.getElementById('startingTemp').style.color = 'yellow'; + } else if (state.startingTemp >= 50) { + document.getElementById('startingTemp').style.color = 'green'; + } else if (state.startingTemp < 50) { + document.getElementById('startingTemp').style.color = 'teal'; + } +}; + +const updateLandscape = () => { + + if (state.startingTemp >= 80) { + document.getElementById('landscapeIcons').textContent = '🌵__🐍_🦂_🌵🌵__🐍_🏜_🦂'; + } else if (state.startingTemp >= 70) { + document.getElementById('landscapeIcons').textContent = '🌸🌿🌼__🌷🌻🌿_☘️🌱_🌻🌷'; + } else if (state.startingTemp >= 60) { + document.getElementById('landscapeIcons').textContent = '🌾🌾_🍃_🪨__🛤_🌾🌾🌾_🍃'; + } else if (state.startingTemp < 60) { + document.getElementById('landscapeIcons').textContent = '🌲🌲⛄️🌲⛄️🍂🌲🍁🌲🌲⛄️🍂🌲'; + } +}; const registerEventHandlers = () => { diff --git a/styles/index.css b/styles/index.css index e69de29bb..b4ea2d8b2 100644 --- a/styles/index.css +++ b/styles/index.css @@ -0,0 +1,3 @@ +#startingTemp { + color : black +} \ No newline at end of file From 058d80d47bd49cfd7d0a5bd48c053d564115dce4 Mon Sep 17 00:00:00 2001 From: arika Date: Fri, 9 Dec 2022 17:57:34 -0500 Subject: [PATCH 06/15] "wave 5 complete" --- index.html | 10 ++++++---- src/index.js | 18 ++++++++++++++++++ 2 files changed, 24 insertions(+), 4 deletions(-) diff --git a/index.html b/index.html index 56ab2a1b0..d5395dcf4 100644 --- a/index.html +++ b/index.html @@ -24,6 +24,10 @@

Temperature

+ +
+ +

Sky

@@ -40,7 +44,7 @@

Sky

City Name

- +
@@ -54,6 +58,4 @@

Weather Garden

- - - + \ No newline at end of file diff --git a/src/index.js b/src/index.js index a6d74ee63..3e7f4d115 100644 --- a/src/index.js +++ b/src/index.js @@ -54,6 +54,21 @@ const updateLandscape = () => { } }; +const updateSky = () => { + + const selectSky = document.getElementById('skyChoice') + + if (selectSky.value === 'rainy') { + document.getElementById('skyIcons').textContent = '🌧🌈⛈🌧🌧💧⛈🌧🌦🌧💧🌧'; + } else if (selectSky.value === 'sunny') { + document.getElementById('skyIcons').textContent = '☁️ ☁️ ☁️ ☀️ ☁️ ☁️'; + } else if (selectSky.value === 'cloudy') { + document.getElementById('skyIcons').textContent = '☁️☁️ ☁️ ☁️☁️ ☁️ 🌤 ☁️ ☁️☁️'; + } else if (selectSky.value === 'snowy') { + document.getElementById('skyIcons').textContent = '🌨❄️🌨🌨❄️❄️🌨❄️🌨❄️❄️🌨🌨'; + } +}; + const registerEventHandlers = () => { const increaseTemperatureButton = document.getElementById('increaseButton'); @@ -62,6 +77,9 @@ const registerEventHandlers = () => { const decreaseTemperatureButton = document.getElementById('decreaseButton'); decreaseTemperatureButton.addEventListener("click", decreaseTemperature); + const selectElement = document.getElementById('skyChoice'); + selectElement.addEventListener('change',updateSky); + }; From 2fe96f85b982a0f374c0d0a92acec465fb9e2718 Mon Sep 17 00:00:00 2001 From: Jacqueline Hopkins <318jlh@gmail.com> Date: Fri, 9 Dec 2022 15:44:44 -0800 Subject: [PATCH 07/15] Wave 3: Implement updateCity function --- index.html | 3 ++- src/index.js | 15 ++++++++++++--- 2 files changed, 14 insertions(+), 4 deletions(-) diff --git a/index.html b/index.html index d5395dcf4..897f480aa 100644 --- a/index.html +++ b/index.html @@ -11,6 +11,7 @@

Weather Report

+

For the City of Seattle

@@ -43,7 +44,7 @@

Sky

City Name

- +
diff --git a/src/index.js b/src/index.js index 3e7f4d115..76009b9e5 100644 --- a/src/index.js +++ b/src/index.js @@ -6,7 +6,7 @@ let state = { // let state = 60; // increase temoerature -const updateTemmperature = state => { +const updateTemperature = state => { // const increaseTemperature = () => { const temperatureContainer = document.getElementById("startingTemp"); temperatureContainer.textContent = state.startingTemp; @@ -14,14 +14,14 @@ const updateTemmperature = state => { const increaseTemperature = () => { state.startingTemp += 1; - updateTemmperature(state); + updateTemperature(state); updateColor(); updateLandscape(); }; const decreaseTemperature = () => { state.startingTemp -= 1; - updateTemmperature(state); + updateTemperature(state); updateColor(); updateLandscape(); }; @@ -69,6 +69,12 @@ const updateSky = () => { } }; +const updateCity = () => { + const inputCityName = document.getElementById("inputCity"); + const cityNameInHeader = document.getElementById("cityNameHeader"); + cityNameInHeader.textContent = inputCityName.value; + +}; const registerEventHandlers = () => { const increaseTemperatureButton = document.getElementById('increaseButton'); @@ -80,6 +86,9 @@ const registerEventHandlers = () => { const selectElement = document.getElementById('skyChoice'); selectElement.addEventListener('change',updateSky); + const userInputCity = document.getElementById('inputCity'); + userInputCity.addEventListener('input', updateCity); + }; From 62ebc52130c7dd3aaa5d46d008678e15868b9c24 Mon Sep 17 00:00:00 2001 From: Jacqueline Hopkins <318jlh@gmail.com> Date: Fri, 9 Dec 2022 15:46:39 -0800 Subject: [PATCH 08/15] fixed spelling --- src/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/index.js b/src/index.js index 76009b9e5..0724ccc81 100644 --- a/src/index.js +++ b/src/index.js @@ -5,7 +5,7 @@ let state = { // let state = 60; -// increase temoerature +// increase temperature const updateTemperature = state => { // const increaseTemperature = () => { const temperatureContainer = document.getElementById("startingTemp"); From 7e712c9d61776f8d09f0391b4b3a80dad97bc85d Mon Sep 17 00:00:00 2001 From: Jacqueline Hopkins <318jlh@gmail.com> Date: Sat, 10 Dec 2022 14:10:29 -0800 Subject: [PATCH 09/15] wave 5: calling api, not finished --- src/index.js | 45 +++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 45 insertions(+) diff --git a/src/index.js b/src/index.js index 0724ccc81..b2a1ec64d 100644 --- a/src/index.js +++ b/src/index.js @@ -76,6 +76,46 @@ const updateCity = () => { }; + +const axios = require('axios'); + +const getLongLat = () => { + let latitude, longitude; + axios.get('http://127.0.0.1:5000/location', + { + params: { + q: document.getElementById("inputCity").value + } + }) + .then((response) => { + latitude = response.data[0].lat; + longitude = response.data[0].lon; + console.log('Successful') + + getWeather(latitude, longitude); + }) + .catch( (error) => { + console.log("error in finding latitude and longitude"); + }); + } + const getWeather = (latitude, longitude) => { + axios.get('http://127.0.0.1:5000/weather', + { + params: { + lat: latitude, + lon : longitude, + } + }) + .then( (response) => { + const temperature = response.data.main.temp; + document.getElementById('startingTemp').textContent = temperature; + }) + .catch ((error) => { + console.log('error in finding weather'); + }); + + } + const registerEventHandlers = () => { const increaseTemperatureButton = document.getElementById('increaseButton'); increaseTemperatureButton.addEventListener("click", increaseTemperature); @@ -89,6 +129,11 @@ const registerEventHandlers = () => { const userInputCity = document.getElementById('inputCity'); userInputCity.addEventListener('input', updateCity); + const getRealTimeTemperature = document.getElementById('getTempButton'); + getRealTimeTemperature.addEventListener('click', getLongLat); + + + }; From a25969a7e5c35c2759a9c07936472a320b47d54a Mon Sep 17 00:00:00 2001 From: arika Date: Sat, 10 Dec 2022 17:10:49 -0500 Subject: [PATCH 10/15] "started adding styling" --- index.html | 15 ++++++++------- src/index.js | 1 + styles/index.css | 48 ++++++++++++++++++++++++++++++++++++++++++++++-- 3 files changed, 55 insertions(+), 9 deletions(-) diff --git a/index.html b/index.html index 897f480aa..40e874b90 100644 --- a/index.html +++ b/index.html @@ -9,12 +9,13 @@ +

Weather Report

For the City of Seattle

-
+

Temperature

@@ -24,13 +25,12 @@

Temperature

-
-
+ -
+

Sky

-
+

City Name

- +
-
+

Weather Garden

🌧🌈⛈🌧🌧💧⛈🌧🌦🌧💧🌧🌧

🌾🌾_🍃_🪨__🛤_🌾🌾🌾_🍃

+
diff --git a/src/index.js b/src/index.js index 0724ccc81..320cdb328 100644 --- a/src/index.js +++ b/src/index.js @@ -76,6 +76,7 @@ const updateCity = () => { }; + const registerEventHandlers = () => { const increaseTemperatureButton = document.getElementById('increaseButton'); increaseTemperatureButton.addEventListener("click", increaseTemperature); diff --git a/styles/index.css b/styles/index.css index b4ea2d8b2..2f06c5d31 100644 --- a/styles/index.css +++ b/styles/index.css @@ -1,3 +1,47 @@ #startingTemp { - color : black -} \ No newline at end of file + color : yellow +} + +body{ + background-color: blueviolet; +} + +#weatherContainer { + background-color: white; + width: 300px; + border: 15px solid black; + padding: 50px; + margin: 20px; +} + +#cityBox { + background-color: white; + width: 300px; + border: 15px solid black; + padding: 50px; + margin: 20px; +} + +#temperatureContainer { + background-color: white; + width: 300px; + border: 15px solid black; + padding: 50px; + margin: 20px; +} + +#skyContainer { + background-color: white; + width: 300px; + border: 15px solid black; + padding: 50px; + margin: 20px; +} + +container { + width: 100%; + display: grid; + grid-template-columns: 1fr 1fr 1fr 1fr; + grid-template-rows: 1fr; + background-color: rgb(127, 255, 170); +} From 381facd4bc990b9bad7ba5e561a69b9c55440f19 Mon Sep 17 00:00:00 2001 From: arika Date: Sat, 10 Dec 2022 18:36:45 -0500 Subject: [PATCH 11/15] "completed all waves" --- index.html | 4 ++-- src/index.js | 18 +++++------------- 2 files changed, 7 insertions(+), 15 deletions(-) diff --git a/index.html b/index.html index 40e874b90..a2edc590a 100644 --- a/index.html +++ b/index.html @@ -57,7 +57,7 @@

Weather Garden

- - + + \ No newline at end of file diff --git a/src/index.js b/src/index.js index b2a1ec64d..69a100d4d 100644 --- a/src/index.js +++ b/src/index.js @@ -1,13 +1,10 @@ +"use strict"; + let state = { startingTemp : 60, - // landscapeIcons : 🌾🌾_🍃_🪨__🛤_🌾🌾🌾_🍃, }; -// let state = 60; - -// increase temperature const updateTemperature = state => { -// const increaseTemperature = () => { const temperatureContainer = document.getElementById("startingTemp"); temperatureContainer.textContent = state.startingTemp; }; @@ -77,20 +74,17 @@ const updateCity = () => { }; -const axios = require('axios'); - const getLongLat = () => { let latitude, longitude; axios.get('http://127.0.0.1:5000/location', { params: { - q: document.getElementById("inputCity").value + q: document.getElementById("cityNameHeader").textContent } }) .then((response) => { latitude = response.data[0].lat; longitude = response.data[0].lon; - console.log('Successful') getWeather(latitude, longitude); }) @@ -108,7 +102,8 @@ const getLongLat = () => { }) .then( (response) => { const temperature = response.data.main.temp; - document.getElementById('startingTemp').textContent = temperature; + const fahrenheit = 1.8*(temperature-273) + 32 + document.getElementById('startingTemp').textContent = Math.round(fahrenheit); }) .catch ((error) => { console.log('error in finding weather'); @@ -132,9 +127,6 @@ const registerEventHandlers = () => { const getRealTimeTemperature = document.getElementById('getTempButton'); getRealTimeTemperature.addEventListener('click', getLongLat); - - - }; document.addEventListener("DOMContentLoaded", registerEventHandlers); From b1774a610d959e0dfa08ec4dfa7411e9b7a7d364 Mon Sep 17 00:00:00 2001 From: Jacqueline Hopkins <318jlh@gmail.com> Date: Sat, 10 Dec 2022 15:49:49 -0800 Subject: [PATCH 12/15] add update color to getweather function --- src/index.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/index.js b/src/index.js index 69a100d4d..a2f8729b4 100644 --- a/src/index.js +++ b/src/index.js @@ -104,6 +104,8 @@ const getLongLat = () => { const temperature = response.data.main.temp; const fahrenheit = 1.8*(temperature-273) + 32 document.getElementById('startingTemp').textContent = Math.round(fahrenheit); + state.startingTemp = Math.round(fahrenheit); + updateColor(); }) .catch ((error) => { console.log('error in finding weather'); From bb186cbc20e703b54fce462db33fd0f6747eb3b5 Mon Sep 17 00:00:00 2001 From: Jacqueline Hopkins <318jlh@gmail.com> Date: Sun, 11 Dec 2022 18:57:54 -0800 Subject: [PATCH 13/15] add updateLanscape function to getWeather in order for weather garden to change when getting real time temp --- src/index.js | 53 ++++++++++++++++++++++++++-------------------------- 1 file changed, 27 insertions(+), 26 deletions(-) diff --git a/src/index.js b/src/index.js index a2f8729b4..986876bbf 100644 --- a/src/index.js +++ b/src/index.js @@ -5,22 +5,22 @@ let state = { }; const updateTemperature = state => { - const temperatureContainer = document.getElementById("startingTemp"); - temperatureContainer.textContent = state.startingTemp; -}; - -const increaseTemperature = () => { - state.startingTemp += 1; - updateTemperature(state); - updateColor(); - updateLandscape(); -}; - -const decreaseTemperature = () => { - state.startingTemp -= 1; - updateTemperature(state); - updateColor(); - updateLandscape(); + const temperatureContainer = document.getElementById("startingTemp"); + temperatureContainer.textContent = state.startingTemp; + }; + + const increaseTemperature = () => { + state.startingTemp += 1; + updateTemperature(state); + updateColor(); + updateLandscape(); + }; + + const decreaseTemperature = () => { + state.startingTemp -= 1; + updateTemperature(state); + updateColor(); + updateLandscape(); }; const updateColor = () => { @@ -106,6 +106,7 @@ const getLongLat = () => { document.getElementById('startingTemp').textContent = Math.round(fahrenheit); state.startingTemp = Math.round(fahrenheit); updateColor(); + updateLandscape(); }) .catch ((error) => { console.log('error in finding weather'); @@ -114,20 +115,20 @@ const getLongLat = () => { } const registerEventHandlers = () => { - const increaseTemperatureButton = document.getElementById('increaseButton'); - increaseTemperatureButton.addEventListener("click", increaseTemperature); + const increaseTemperatureButton = document.getElementById('increaseButton'); + increaseTemperatureButton.addEventListener("click", increaseTemperature); - const decreaseTemperatureButton = document.getElementById('decreaseButton'); - decreaseTemperatureButton.addEventListener("click", decreaseTemperature); + const decreaseTemperatureButton = document.getElementById('decreaseButton'); + decreaseTemperatureButton.addEventListener("click", decreaseTemperature); - const selectElement = document.getElementById('skyChoice'); - selectElement.addEventListener('change',updateSky); + const selectElement = document.getElementById('skyChoice'); + selectElement.addEventListener('change',updateSky); - const userInputCity = document.getElementById('inputCity'); - userInputCity.addEventListener('input', updateCity); + const userInputCity = document.getElementById('inputCity'); + userInputCity.addEventListener('input', updateCity); - const getRealTimeTemperature = document.getElementById('getTempButton'); - getRealTimeTemperature.addEventListener('click', getLongLat); + const getRealTimeTemperature = document.getElementById('getTempButton'); + getRealTimeTemperature.addEventListener('click', getLongLat); }; From 2c3bb1cc3a42594e39bca9660f40f79f34a4d436 Mon Sep 17 00:00:00 2001 From: Jacqueline Hopkins <318jlh@gmail.com> Date: Sun, 11 Dec 2022 18:58:39 -0800 Subject: [PATCH 14/15] added container class --- index.html | 78 +++++++++++++++++++++++++----------------------------- 1 file changed, 36 insertions(+), 42 deletions(-) diff --git a/index.html b/index.html index a2edc590a..35d746a0b 100644 --- a/index.html +++ b/index.html @@ -9,52 +9,46 @@ -

Weather Report

For the City of Seattle

- -
-

Temperature

- - - -

- 60 -

- - - - -
- - -
-

Sky

- - -
- -
-

City Name

-
- - -
-
- -
-

Weather Garden

-

🌧🌈⛈🌧🌧💧⛈🌧🌦🌧💧🌧🌧

-

🌾🌾_🍃_🪨__🛤_🌾🌾🌾_🍃

- -
+
+
+

Temperature

+ + + +

+ 60 +

+ + + + +
+
+

Sky

+ + +
+
+

City Name

+
+ + +
+
+
+

Weather Garden

+

🌧🌈⛈🌧🌧💧⛈🌧🌦🌧💧🌧🌧

+

🌾🌾_🍃_🪨__🛤_🌾🌾🌾_🍃

+
From e0bdee9cadcee60dd5522d0acc53a18c3ce563f8 Mon Sep 17 00:00:00 2001 From: Jacqueline Hopkins <318jlh@gmail.com> Date: Sun, 11 Dec 2022 18:59:36 -0800 Subject: [PATCH 15/15] added styling --- styles/index.css | 117 ++++++++++++++++++++++++++++++++++++----------- 1 file changed, 90 insertions(+), 27 deletions(-) diff --git a/styles/index.css b/styles/index.css index 2f06c5d31..28afc4a1a 100644 --- a/styles/index.css +++ b/styles/index.css @@ -1,47 +1,110 @@ -#startingTemp { - color : yellow + +body { + font-family: 'Verdana', sans-serif, monospace; + background-color: rgb(122, 172, 218); + margin: 10px; + text-align: center; +} + +button:hover { + background-color: rgb(138, 138, 138); } -body{ - background-color: blueviolet; +#websiteContainer { + display: grid; + grid-template-columns: 1fr 1fr 1fr 1fr; + grid-template-rows: 1fr 1fr 1fr ; + margin: 20px; } -#weatherContainer { - background-color: white; +.container { width: 300px; - border: 15px solid black; padding: 50px; margin: 20px; + border-radius: 25px; + text-align: center; + padding-top: 0px; + background-color: white; + border: 15px solid rgb(255, 255, 255); } #cityBox { + grid-column: 1 / 2; + grid-row: 3 / 4; +} + +#weatherContainer { + grid-column: 3 / 4; + grid-row: 2 / 3; background-color: white; - width: 300px; - border: 15px solid black; - padding: 50px; - margin: 20px; + width: 400px; + padding: 40px; + padding-top: 0px; + position: relative; } #temperatureContainer { - background-color: white; - width: 300px; - border: 15px solid black; - padding: 50px; - margin: 20px; + grid-column: 1 / 2; + grid-row: 1 / 2; } #skyContainer { - background-color: white; - width: 300px; - border: 15px solid black; - padding: 50px; - margin: 20px; + grid-column: 1 / 2; + grid-row: 2 / 3; } -container { - width: 100%; - display: grid; - grid-template-columns: 1fr 1fr 1fr 1fr; - grid-template-rows: 1fr; - background-color: rgb(127, 255, 170); + +#cityNameHeader { + font-style: italic; + font-size: 24px; +} + +header h2 { + font-size: 20px; +} + +section h2 { + font-size: 30px; +} + +#getTempButton { + background-color: lightpink; + color: white; + padding: 15px 32px; + font-size: 16px; + border: none; + margin: 10px; + border-radius: 15px; +} + +#getTempButton:hover { + background-color: rgb(158, 158, 158); +} + +#increaseButton { + font-size: x-large; +} + +#decreaseButton { + font-size: x-large; + +} + +#startingTemp { + font-size: 50px; + font-weight: bold; + margin: 5px; + color: yellow; +} + +#skyIcons { + font-size: 30px; + position:absolute; + top: 15%; +} + +#landscapeIcons { + font-size: 30px; + position: absolute; + bottom: 0; }