From 9e72509439e9a620a35dedf499e7dfab202acc6b Mon Sep 17 00:00:00 2001 From: Marisa Date: Mon, 14 Jun 2021 19:13:17 -0700 Subject: [PATCH 1/6] Build basic structure for index.html and creates buttons and JS for Temperature buttons --- index.html | 51 ++++++++++++++++++++++++++++++++++++++++++++++++ scripts/index.js | 24 +++++++++++++++++++++++ 2 files changed, 75 insertions(+) diff --git a/index.html b/index.html index e69de29bb..cf77144f3 100644 --- a/index.html +++ b/index.html @@ -0,0 +1,51 @@ + + + + + + + Weather Report + + + + +
+

Weather Report for:

+

*Whether or not this report matches the weather you are experiencing is completely coincidental.*

+ + +
+ +
+
+

Temperature 65℉

+ + +
+ +
+

Sky

+ +
+
+

City

+ +
+
+

Display Space

+ +
+
+ + + + + + + \ No newline at end of file diff --git a/scripts/index.js b/scripts/index.js index e69de29bb..4ebc3e285 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -0,0 +1,24 @@ +const state = { + currentTemp: 65 +}; + +const addTemp = (event) => { + state.currentTemp += 1; + const temperatureCountContainer = document.querySelector("#temperatureCount") + temperatureCountContainer.textContent = `Temperature ${state.currentTemp}℉`; +}; +const subtractTemp = (event) => { + state.currentTemp -= 1; + const temperatureCountContainer = document.querySelector("#temperatureCount") + temperatureCountContainer.textContent = `Temperature ${state.currentTemp}℉`; +}; + +const registerEventHandlers = (event) => { + const addTemperatureButton = document.querySelector("#addTemperatureButton"); + addTemperatureButton.addEventListener("click", addTemp); + + const subtractTemperatureButton = document.querySelector("#subtractTemperatureButton"); + subtractTemperatureButton.addEventListener("click", subtractTemp); +}; + +document.addEventListener("DOMContentLoaded", registerEventHandlers); \ No newline at end of file From 4766df19c123dd98d0acc9d5d9f1956e2b980679 Mon Sep 17 00:00:00 2001 From: Marisa Date: Mon, 14 Jun 2021 23:04:04 -0700 Subject: [PATCH 2/6] Adds images to landscape area on selection of dropdown option. --- index.html | 27 +++++++++++++++++++-------- scripts/index.js | 23 ++++++++++++++++++++++- 2 files changed, 41 insertions(+), 9 deletions(-) diff --git a/index.html b/index.html index cf77144f3..065ee6ffa 100644 --- a/index.html +++ b/index.html @@ -11,27 +11,38 @@

Weather Report for:

-

*Whether or not this report matches the weather you are experiencing is completely coincidental.*

+

*Whether or not this report matches the weather you are experiencing is completely coincidental*

-
-
+
+

Temperature 65℉

-
-

Sky

+
+ + + +
+ +
-
-

City

+
+

Location

-
+

Display Space

diff --git a/scripts/index.js b/scripts/index.js index 4ebc3e285..2a5fa177a 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -1,5 +1,14 @@ const state = { - currentTemp: 65 + currentTemp: 65, + // defaultSky: sunny, + // defaultLocation: "Unceded Duwamish Lands" +}; + +const skyImages = { + sunny: ["https://media.giphy.com/media/lyVNcb1n5Ob0Q/giphy.gif", "sunny alt"], + cloudy: ["https://media.giphy.com/media/lOkbL3MJnEtHi/giphy.gif", "cloudy alt"], + rainy: ["https://media.giphy.com/media/vLi3T5m3RH45y/giphy.gif", "rainy alt"], + snowy: ["https://media.giphy.com/media/Fh3ezinVpi4yk/giphy.gif", "snowy, alt"] }; const addTemp = (event) => { @@ -12,6 +21,14 @@ const subtractTemp = (event) => { const temperatureCountContainer = document.querySelector("#temperatureCount") temperatureCountContainer.textContent = `Temperature ${state.currentTemp}℉`; }; +const changeLandscape = (event) => { + let option = document.querySelector('#sky'); + let optionValue = option.value; + var x = document.createElement("IMG"); + x.setAttribute("src", skyImages[optionValue][0]); + x.setAttribute("alt", skyImages[optionValue][1]); + skyImageContainer.appendChild(x); +}; const registerEventHandlers = (event) => { const addTemperatureButton = document.querySelector("#addTemperatureButton"); @@ -19,6 +36,10 @@ const registerEventHandlers = (event) => { const subtractTemperatureButton = document.querySelector("#subtractTemperatureButton"); subtractTemperatureButton.addEventListener("click", subtractTemp); + + const landscapeOptions = document.querySelector("#sky"); + landscapeOptions.addEventListener("change", changeLandscape); + }; document.addEventListener("DOMContentLoaded", registerEventHandlers); \ No newline at end of file From e49948d05572cd745e4d9507cdfa9681d1649e84 Mon Sep 17 00:00:00 2001 From: Marisa Date: Mon, 14 Jun 2021 23:14:41 -0700 Subject: [PATCH 3/6] Refactors changeLandscape to replace images --- scripts/index.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/scripts/index.js b/scripts/index.js index 2a5fa177a..03d537602 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -22,12 +22,14 @@ const subtractTemp = (event) => { temperatureCountContainer.textContent = `Temperature ${state.currentTemp}℉`; }; const changeLandscape = (event) => { + // skyImageContainer.removeChild(x); let option = document.querySelector('#sky'); let optionValue = option.value; var x = document.createElement("IMG"); x.setAttribute("src", skyImages[optionValue][0]); x.setAttribute("alt", skyImages[optionValue][1]); - skyImageContainer.appendChild(x); + skyImageContainer.replaceChild(x, skyImageContainer.childNodes[0]); + // skyImageContainer.appendChild(x); }; const registerEventHandlers = (event) => { From 16e3a25e24c3aefe0487f0b0018fc6f3fd1b2c99 Mon Sep 17 00:00:00 2001 From: Marisa Date: Tue, 15 Jun 2021 21:34:46 -0700 Subject: [PATCH 4/6] Adds JavaScript skeletons for Location Name and Location Reset. Refactors the Temp buttons. --- index.html | 30 ++++++++++------ scripts/index.js | 93 +++++++++++++++++++++++++++++++++++------------- 2 files changed, 89 insertions(+), 34 deletions(-) diff --git a/index.html b/index.html index 065ee6ffa..5a3699dcc 100644 --- a/index.html +++ b/index.html @@ -10,36 +10,46 @@
-

Weather Report for:

+

Weather Report for: +

Unceded Coast Salish Land

+

*Whether or not this report matches the weather you are experiencing is completely coincidental*

+

Temperature 65℉

- - + +
-
+
+
-
-
+
-

Location

+

Enter the weather location below:

+
+
+ +

+ + +
@@ -57,6 +67,6 @@

Display Space

by Marisa Morales unless otherwise stated.

- + \ No newline at end of file diff --git a/scripts/index.js b/scripts/index.js index 03d537602..3b9938a90 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -1,36 +1,66 @@ -const state = { - currentTemp: 65, - // defaultSky: sunny, - // defaultLocation: "Unceded Duwamish Lands" -}; +let currentTemp = 65; + const skyImages = { - sunny: ["https://media.giphy.com/media/lyVNcb1n5Ob0Q/giphy.gif", "sunny alt"], - cloudy: ["https://media.giphy.com/media/lOkbL3MJnEtHi/giphy.gif", "cloudy alt"], - rainy: ["https://media.giphy.com/media/vLi3T5m3RH45y/giphy.gif", "rainy alt"], - snowy: ["https://media.giphy.com/media/Fh3ezinVpi4yk/giphy.gif", "snowy, alt"] + sunny: ["https://media.giphy.com/media/lyVNcb1n5Ob0Q/giphy.gif", "The sun shines directly into the camera lens through tall evergreens. The camera angle moves slightly."], + cloudy: ["https://media.giphy.com/media/lOkbL3MJnEtHi/giphy.gif", "The sun shines through clouds racing across the sky."], + rainy: ["https://media.giphy.com/media/vLi3T5m3RH45y/giphy.gif", "A hyper realistic animation. of heavy rain bouncing off tiled patio"], + snowy: ["https://media.giphy.com/media/Fh3ezinVpi4yk/giphy.gif", "A hyper realiztic animation of heavy snow falling through evergreens against distant mountains."] }; -const addTemp = (event) => { - state.currentTemp += 1; +// CHANGE TO FIT +const updateTemp = currentTemp => { const temperatureCountContainer = document.querySelector("#temperatureCount") - temperatureCountContainer.textContent = `Temperature ${state.currentTemp}℉`; + temperatureCountContainer.textContent = `Temperature ${currentTemp}℉`; + changeTempColor(currentTemp); + // updateGarden(currentTemp); +} +// Figuring out text / temp changes +const changeTempColor = (currentTemp) => { + const temperatureCountContainer = document.getElementById("temperatureCount"); + let color = 'blue' + if (currentTemp >= 80) { + color = 'red'; + } else if (currentTemp >= 70) { + color= 'orange'; + } else if (currentTemp >= 60) { + color = 'yellow'; + } else if (currentTemp >= 50) { + color = 'green'; + } + temperatureCountContainer.classList = color; +}; + +const addTemp = (event) => { + currentTemp += 1; + updateTemp(currentTemp); }; const subtractTemp = (event) => { - state.currentTemp -= 1; - const temperatureCountContainer = document.querySelector("#temperatureCount") - temperatureCountContainer.textContent = `Temperature ${state.currentTemp}℉`; + currentTemp -= 1; + updateTemp(currentTemp); }; -const changeLandscape = (event) => { - // skyImageContainer.removeChild(x); +const changeSky = (event) => { let option = document.querySelector('#sky'); let optionValue = option.value; - var x = document.createElement("IMG"); - x.setAttribute("src", skyImages[optionValue][0]); - x.setAttribute("alt", skyImages[optionValue][1]); - skyImageContainer.replaceChild(x, skyImageContainer.childNodes[0]); - // skyImageContainer.appendChild(x); + var skyImage = document.createElement("IMG"); + skyImage.setAttribute("src", skyImages[optionValue][0]); + skyImage.setAttribute("alt", skyImages[optionValue][1]); + skyImageContainer.replaceChild(skyImage, skyImageContainer.childNodes[0]); }; +// NEED HTML +// const updateCityName = () => { +// const inputName = document.getElementById("cityNameInput").value; +// const headerCityName = document.getElementById("headerCityName"); +// headerCityName.textContent = inputName; +// }; + +// NEED HTML +// const resetCityName = () => { +// const cityNameInput = document.getElementById("cityNameInput"); +// cityNameInput.value = "Seattle"; +// updateCityName(); +// }; + const registerEventHandlers = (event) => { const addTemperatureButton = document.querySelector("#addTemperatureButton"); @@ -39,8 +69,23 @@ const registerEventHandlers = (event) => { const subtractTemperatureButton = document.querySelector("#subtractTemperatureButton"); subtractTemperatureButton.addEventListener("click", subtractTemp); - const landscapeOptions = document.querySelector("#sky"); - landscapeOptions.addEventListener("change", changeLandscape); + const skyOptions = document.querySelector("#sky"); + skyOptions.addEventListener("change", changeSky); + + // CHANGE TO FIT + updateCityName(); + // const cityNameInput = document.getElementById("cityNameInput"); + // cityNameInput.addEventListener("input", updateCityName); + + // CHANGE TO FIT + // const cityNameResetBtn = document.getElementById("cityNameReset"); + // cityNameResetBtn.addEventListener("click", resetCityName); + + + // Figuring out text / temp changes + // const changeTextColor = document.getElementsByClassName("tempButton"); + // changeTextColor.addEventListener("change", changeTempColor); + }; From 9f84c4bffa073e2117e06da3a2a0bf897fddc6af Mon Sep 17 00:00:00 2001 From: Marisa Date: Wed, 16 Jun 2021 13:24:32 -0700 Subject: [PATCH 5/6] refactors code to add responsive background, place holder image, placeholder text, text styles and landscape text. --- index.html | 33 ++++++++------ scripts/index.js | 112 +++++++++++++++++++++++++++-------------------- styles/index.css | 103 +++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 186 insertions(+), 62 deletions(-) diff --git a/index.html b/index.html index 5a3699dcc..d6558f3d0 100644 --- a/index.html +++ b/index.html @@ -10,15 +10,21 @@
-

Weather Report for: -

Unceded Coast Salish Land

- -

*Whether or not this report matches the weather you are experiencing is completely coincidental*

+
    +
  • +

    Weather Report for +

    • +

  • + Unceded Coast Salish Land

    • + +

  • *Whether or not this report matches the weather you are experiencing is completely coincidental*

    • +
+

Temperature 65℉

@@ -30,36 +36,35 @@

Temperature 65℉

- -
-

Enter the weather location below:


- +

-
-
-
-

Display Space

+
+
+
+

Choose a Sky option or change the temperature for a custom weather report!

+
+ A gif from Miss Congeniality of a contestant saying: I'd have to say April 25th. Becasue it's not too hot, not too cold. All you need is a light jacket! +
+
-

Black Lives Matter | Created on unceded Coast Salish land | diff --git a/scripts/index.js b/scripts/index.js index 3b9938a90..a30b922f8 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -1,5 +1,5 @@ +// Variable assignment let currentTemp = 65; - const skyImages = { sunny: ["https://media.giphy.com/media/lyVNcb1n5Ob0Q/giphy.gif", "The sun shines directly into the camera lens through tall evergreens. The camera angle moves slightly."], @@ -8,14 +8,18 @@ const skyImages = { snowy: ["https://media.giphy.com/media/Fh3ezinVpi4yk/giphy.gif", "A hyper realiztic animation of heavy snow falling through evergreens against distant mountains."] }; -// CHANGE TO FIT -const updateTemp = currentTemp => { - const temperatureCountContainer = document.querySelector("#temperatureCount") - temperatureCountContainer.textContent = `Temperature ${currentTemp}℉`; - changeTempColor(currentTemp); - // updateGarden(currentTemp); -} -// Figuring out text / temp changes +// temperature functions +// increase temp helper function +const addTemp = () => { + currentTemp += 1; + updateTemp(currentTemp); +}; +// decrease temp helper function +const subtractTemp = () => { + currentTemp -= 1; + updateTemp(currentTemp); +}; +// Font changes for temp const changeTempColor = (currentTemp) => { const temperatureCountContainer = document.getElementById("temperatureCount"); let color = 'blue' @@ -28,41 +32,62 @@ const changeTempColor = (currentTemp) => { } else if (currentTemp >= 50) { color = 'green'; } - temperatureCountContainer.classList = color; + temperatureCountContainer.style.color = 'color'; }; +// function to run whenever the Temp button is hit. Takes in the current temp and runs the helper functions above as well as updating the landscape to match the temp +const updateTemp = currentTemp => { + const temperatureCountContainer = document.querySelector("#temperatureCount") + temperatureCountContainer.textContent = `Temperature ${currentTemp}℉`; + changeTempColor(currentTemp); + updateLandscape(currentTemp); +} -const addTemp = (event) => { - currentTemp += 1; - updateTemp(currentTemp); -}; -const subtractTemp = (event) => { - currentTemp -= 1; - updateTemp(currentTemp); -}; -const changeSky = (event) => { +// Function that updates the sky image +const changeSky = () => { let option = document.querySelector('#sky'); let optionValue = option.value; var skyImage = document.createElement("IMG"); skyImage.setAttribute("src", skyImages[optionValue][0]); skyImage.setAttribute("alt", skyImages[optionValue][1]); - skyImageContainer.replaceChild(skyImage, skyImageContainer.childNodes[0]); + skyImageContainer.replaceChild(skyImage, skyImageContainer.childNodes[1]); +}; +// Function that updates the location to match user input +const updateLocation = () => { + const inputLocation = document.getElementById("locationInput").value; + const locationDisplay = document.getElementById("locationDisplay"); + locationDisplay.textContent = inputLocation; +}; +// Function to reset the location on button click +const resetLocation = () => { + const locationInput = document.getElementById("locationInput"); + locationInput.value = "Unceded Coast Salish Land"; + updateLocation(); +}; +// Function to update the background color and landscape text to match the current temp +const updateLandscape = (currentTemp) => { + const landscapeContainer = document.getElementById('landscape-text'); + let landscape = ''; + if (currentTemp >= 80) { + landscape = 'Too hot too function'; + document.body.style.background = 'linear-gradient(to bottom, #ffff99 0%, #cc0000 100%)'; + } else if (currentTemp >= 70) { + landscape= 'Good day to sit by the pool'; + document.body.style.background = 'linear-gradient(to bottom, #ffffcc 0%, #ff6600 100%)'; + } else if (currentTemp >= 60) { + landscape = 'The perfect temperature... it must be near April 25... '; + document.body.style.background = 'linear-gradient(to bottom, #ffffff 0%, #ff9999 100%)'; + } else if (currentTemp >= 50) { + landscape = 'Bundle up!'; + document.body.style.background = 'linear-gradient(to bottom, #99ffcc 0%, #009900 100%)'; + } else if (currentTemp < 49) { + landscape = '❅❆❄ Even my icicles have icicles! ❅❆❄'; + document.body.style.background = 'linear-gradient(to bottom, #ffffff 0%, #33ccff 100%)'; + } + landscapeContainer.textContent = landscape; }; -// NEED HTML -// const updateCityName = () => { -// const inputName = document.getElementById("cityNameInput").value; -// const headerCityName = document.getElementById("headerCityName"); -// headerCityName.textContent = inputName; -// }; - -// NEED HTML -// const resetCityName = () => { -// const cityNameInput = document.getElementById("cityNameInput"); -// cityNameInput.value = "Seattle"; -// updateCityName(); -// }; -const registerEventHandlers = (event) => { +const registerEventHandlers = () => { const addTemperatureButton = document.querySelector("#addTemperatureButton"); addTemperatureButton.addEventListener("click", addTemp); @@ -72,21 +97,12 @@ const registerEventHandlers = (event) => { const skyOptions = document.querySelector("#sky"); skyOptions.addEventListener("change", changeSky); - // CHANGE TO FIT - updateCityName(); - // const cityNameInput = document.getElementById("cityNameInput"); - // cityNameInput.addEventListener("input", updateCityName); - - // CHANGE TO FIT - // const cityNameResetBtn = document.getElementById("cityNameReset"); - // cityNameResetBtn.addEventListener("click", resetCityName); - - - // Figuring out text / temp changes - // const changeTextColor = document.getElementsByClassName("tempButton"); - // changeTextColor.addEventListener("change", changeTempColor); - + updateLocation(); + const locationInput = document.getElementById("locationInput"); + locationInput.addEventListener("input", updateLocation); + const locationResetBtn = document.getElementById("locationReset"); + locationResetBtn.addEventListener("click", resetLocation); }; document.addEventListener("DOMContentLoaded", registerEventHandlers); \ No newline at end of file diff --git a/styles/index.css b/styles/index.css index e69de29bb..daec9c272 100644 --- a/styles/index.css +++ b/styles/index.css @@ -0,0 +1,103 @@ + +/* Header flex-box*/ +header { + display: flex; + flex-direction: column; + overflow: visible; + position: relative; + align-items: flex-start; + justify-content: safe; + min-height: 350px; + margin-top: 3em; +} +ul { + list-style-type: none; + flex: 1 1 auto; + /* justify-content: space-evenly; */ +} +h1 { + text-align: left; + font-size: 3em; + font-variant: small-caps; + font-weight: lighter; + font-style: italic; +} +#sassy-subtitle { + text-align: left; + font-size: 1em; + font-weight: lighter; + font-style: italic; +} +#locationDisplay { + font-size: 2em; + font-weight: lighter; + font-style: italic; +} + +/* Layout for main display area */ +.left-column { + float: inline-start; + position: relative; + text-align: left; + align-items: flex-start; + width: 40%; + padding: 2em; + margin: 1em; +} +.right-column { + display: flex; + flex-flow: row-wrap; + text-align: center; + justify-content: center; + align-content: center; + float: right; + width: 50%; + border-radius: 5px; +} +.weather-display:after { + content: ""; + display: table; + clear: both; +} +@media screen and (max-width:600px) { + .weather-item, .landscape { + width: 100%; + } +} + +/* Landscape flexbox */ +.landscape { + flex: 1 1 auto; + /* justify-self: center; */ + max-height: 80vh; + width: 100%; + position: relative; + object-fit: scale-down; + padding: .2em; + overflow: hidden; +} + +/* Footer */ +footer { + text-align: center; + font-size: .8em; + font-style: italic; + margin-top: 1em; + line-height: 150%; +} + +/* General styling */ +body { + font-family: Verdana, Geneva, + Tahoma, sans-serif; + background: linear-gradient(to bottom, #ff66ff 0%, #ccffff 100%); +} + + +/* label */ +label { + text-align: left; + font-size: 1.5em; + font-weight: lighter; +} + From e0af56a378d24ca87556f9725c079618ed52df78 Mon Sep 17 00:00:00 2001 From: Marisa Date: Wed, 16 Jun 2021 14:35:54 -0700 Subject: [PATCH 6/6] Makes a small fix to change the font colors in connection with the temp --- index.html | 28 ++++++++++++-------- scripts/index.js | 9 ++++--- styles/index.css | 66 +++++++++++++++++++++++++++++++++--------------- 3 files changed, 69 insertions(+), 34 deletions(-) diff --git a/index.html b/index.html index d6558f3d0..dcab0341d 100644 --- a/index.html +++ b/index.html @@ -28,34 +28,40 @@

Weather Report for

Temperature 65℉

- - + +
- - + + + + +

Enter the weather location below:

-


- +

-
+

Choose a Sky option or change the temperature for a custom weather report!

A gif from Miss Congeniality of a contestant saying: I'd have to say April 25th. Becasue it's not too hot, not too cold. All you need is a light jacket! diff --git a/scripts/index.js b/scripts/index.js index a30b922f8..4086acb77 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -22,7 +22,7 @@ const subtractTemp = () => { // Font changes for temp const changeTempColor = (currentTemp) => { const temperatureCountContainer = document.getElementById("temperatureCount"); - let color = 'blue' + let color = '' if (currentTemp >= 80) { color = 'red'; } else if (currentTemp >= 70) { @@ -31,9 +31,12 @@ const changeTempColor = (currentTemp) => { color = 'yellow'; } else if (currentTemp >= 50) { color = 'green'; - } - temperatureCountContainer.style.color = 'color'; + } else if (currentTemp <= 49) { + color = 'blue' + }; + document.getElementById("temperatureCount").style.color = color; }; + // function to run whenever the Temp button is hit. Takes in the current temp and runs the helper functions above as well as updating the landscape to match the temp const updateTemp = currentTemp => { const temperatureCountContainer = document.querySelector("#temperatureCount") diff --git a/styles/index.css b/styles/index.css index daec9c272..e5919b866 100644 --- a/styles/index.css +++ b/styles/index.css @@ -1,4 +1,36 @@ +/* General styling */ +body { + font-family: Verdana, Geneva, + Tahoma, sans-serif; + background: linear-gradient(to bottom, #ff66ff 0%, #ccffff 100%); +} +h3 { + text-align: left; + font-size: 1.3em; + font-weight: normal; +} +/* label */ +label { + text-align: left; + font-size: 1.3em; +} +.button { + background-color: #ffe6e6; + color: navy; + padding: .3em 1em; + text-align: center; + display: inline-block; + font-size: 1em; +} +#locationInput { + width: 20vw; + height: 2em; + background-color: #ffe6e6; + color: navy; + font-size: 1em; +} + /* Header flex-box*/ header { display: flex; @@ -10,6 +42,7 @@ header { min-height: 350px; margin-top: 3em; } +/* Flex organizing */ ul { list-style-type: none; flex: 1 1 auto; @@ -39,10 +72,13 @@ h1 { float: inline-start; position: relative; text-align: left; - align-items: flex-start; width: 40%; - padding: 2em; - margin: 1em; + padding-left: 1em; + margin-top: 0; + margin-left: 2em; +} +.weather-item { + padding-bottom: 1.5em; } .right-column { display: flex; @@ -51,8 +87,8 @@ h1 { justify-content: center; align-content: center; float: right; - width: 50%; - border-radius: 5px; + width: 45%; + padding: .5em; } .weather-display:after { content: ""; @@ -74,9 +110,12 @@ h1 { position: relative; object-fit: scale-down; padding: .2em; - overflow: hidden; + overflow: scroll; +} +/* Temperature count colors */ +#temperatureCount { + color: black; } - /* Footer */ footer { text-align: center; @@ -86,18 +125,5 @@ footer { line-height: 150%; } -/* General styling */ -body { - font-family: Verdana, Geneva, - Tahoma, sans-serif; - background: linear-gradient(to bottom, #ff66ff 0%, #ccffff 100%); -} -/* label */ -label { - text-align: left; - font-size: 1.5em; - font-weight: lighter; -} -