From bd2d9556d187a1b4165c74b8e42519b942ac5936 Mon Sep 17 00:00:00 2001 From: Kbhlee2121 Date: Mon, 6 Dec 2021 14:01:52 -0800 Subject: [PATCH 1/6] Set up index.html --- index.html | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/index.html b/index.html index 68b320b9a..efbf58ce5 100644 --- a/index.html +++ b/index.html @@ -5,8 +5,18 @@ Weather Report + +
+
+

Kristin's Weather Report

+

For the lovely city of

+
+
+ \ No newline at end of file From 3783f53320528ff9bae8a6ee263ed115844b64fc Mon Sep 17 00:00:00 2001 From: Kbhlee2121 Date: Wed, 8 Dec 2021 22:44:43 -0800 Subject: [PATCH 2/6] Update so temp and landscape change accordingly --- index.html | 41 +++++++++++++++++++++++++--- src/index.js | 69 ++++++++++++++++++++++++++++++++++++++++++++++++ styles/index.css | 42 +++++++++++++++++++++++++++++ 3 files changed, 149 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index efbf58ce5..8426af6f7 100644 --- a/index.html +++ b/index.html @@ -11,12 +11,47 @@

Kristin's Weather Report

-

For the lovely city of

+ For the lovely city of city_name
+
+
+

Temperature

+

+
+ + +
+ +
+

City Name

+
+ +
+

Sky

+ + +
+ +
+

Weather Garden

+ + +
+
- +
+

Copyright 2021 Kristin Lee. All rights reserved.

+
+ - \ No newline at end of file + diff --git a/src/index.js b/src/index.js index e69de29bb..47e0279c9 100644 --- a/src/index.js +++ b/src/index.js @@ -0,0 +1,69 @@ +// import '../styles/index.css'; + +const tempDegree = document.querySelector('#temperatureDegree'); +const landscape = document.querySelector('#landscape'); +const state = { + tempNumber: 80, +}; + +// Temperature up and down buttons +const increaseTemperature = (event) => { + console.log(event); + state.tempNumber += 1; + // const temperatureChangeContainer = + // document.querySelector('#temperatureDegree'); + tempDegree.textContent = `${state.tempNumber}`; + changeTheme(); +}; + +const decreaseTemperature = (event) => { + console.log(event); + state.tempNumber -= 1; + // const temperatureChangeContainer = + // document.querySelector('#temperatureDegree'); + tempDegree.textContent = `${state.tempNumber}`; + changeTheme(); +}; + +//Issue: needs to have colors c +const changeTheme = () => { + // if different ranges, change color + if (state.tempNumber >= 80) { + tempDegree.style.color = 'red'; + landscape.textContent = '🌡__🐍_πŸ¦‚_🌡🌡__🐍_🏜_πŸ¦‚'; + } else if (state.tempNumber >= 70 && state.tempNumber <= 79) { + tempDegree.style.color = 'orange'; + landscape.textContent = '🌸🌿🌼__🌷🌻🌿_☘️🌱_🌻🌷'; + } else if (state.tempNumber >= 60 && state.tempNumber <= 69) { + tempDegree.style.color = 'yellow'; + landscape.textContent = '🌾🌾_πŸƒ_πŸͺ¨__πŸ›€_🌾🌾🌾_πŸƒ'; + } else if (state.tempNumber >= 50 && state.tempNumber <= 59) { + tempDegree.style.color = 'green'; + landscape.textContent = 'πŸŒ²πŸŒ²β›„οΈπŸŒ²β›„οΈπŸ‚πŸŒ²πŸπŸŒ²πŸŒ²β›„οΈπŸ‚πŸŒ²'; + } else { + tempDegree.style.color = 'teal'; + landscape.textContent = 'β›„οΈβ›„οΈβ›„οΈβ›„οΈβ›„οΈπŸŒ²β›„οΈβ›„οΈπŸŒ²β›„οΈπŸŒ²β›„οΈπŸŒ²'; + } +}; + +//register event handlers + +const registerEventHandlers = () => { + //up button + const tempUpButton = document.querySelector('#tempButtonUp'); + tempUpButton.addEventListener('click', increaseTemperature); + //down button + const tempDownButton = document.querySelector('#tempButtonDown'); + tempDownButton.addEventListener('click', decreaseTemperature); + + //wave 4: onchangehandler +}; + +const setUp = () => { + tempDegree.textContent = `${state.tempNumber}`; + registerEventHandlers(); + changeTheme(); +}; +//execute registerEventHandlers +//runs code once DOM is ready. DOM isn't fully loaded, eventhandlers might not exist yet. Ex: buttoon on line 35 +document.addEventListener('DOMContentLoaded', setUp); diff --git a/styles/index.css b/styles/index.css index e69de29bb..61e3fd9e5 100644 --- a/styles/index.css +++ b/styles/index.css @@ -0,0 +1,42 @@ +.arrow { + border: solid black; + border-width: 0 3px 3px 0; + display: inline-block; + padding: 3px; + } + + .up { + transform: rotate(-135deg); + -webkit-transform: rotate(-135deg); + } + + .down { + transform: rotate(45deg); + -webkit-transform: rotate(45deg); + } + + //Change Temperature color + .red { + color: red; + } + + .orange { + color: orange; + } + + .yellow { + color: yellow; + } + + .green { + color: green; + } + + .teal { + color: teal; + } + //default + #temperatureDegree { + color: teal; + } + From d5c195445b4dd72461074d0440c95580ac7eabd1 Mon Sep 17 00:00:00 2001 From: Kbhlee2121 Date: Thu, 9 Dec 2021 01:50:41 -0800 Subject: [PATCH 3/6] Add city input and sky dropdown functionality --- index.html | 13 +++++++----- src/index.js | 53 +++++++++++++++++++++++++++++++++++------------- styles/index.css | 23 ++------------------- 3 files changed, 49 insertions(+), 40 deletions(-) diff --git a/index.html b/index.html index 8426af6f7..c9764f38c 100644 --- a/index.html +++ b/index.html @@ -11,7 +11,7 @@

Kristin's Weather Report

- For the lovely city of city_name +

For the lovely city of Seattle

@@ -25,24 +25,27 @@

City Name

+ + +

Sky

- + - +

Weather Garden

- +
diff --git a/src/index.js b/src/index.js index 47e0279c9..c2b608fae 100644 --- a/src/index.js +++ b/src/index.js @@ -2,25 +2,25 @@ const tempDegree = document.querySelector('#temperatureDegree'); const landscape = document.querySelector('#landscape'); +const selectedSky = document.querySelector('#skyEmojis'); +const gardenBackground = document.querySelector('#weatherGardenContainer'); +const inputCity = document.querySelector('#inputCity'); +const displayCity = document.getElementById('#cityNameDisplay'); const state = { tempNumber: 80, + skyState: ' ☁️ ☁️ β˜€οΈ ☁️ ☁️ β˜€οΈ β˜€οΈ β˜€οΈ ☁️ β˜€οΈ', + gardenColor: '#D6FFFF', }; // Temperature up and down buttons -const increaseTemperature = (event) => { - console.log(event); +const increaseTemperature = () => { state.tempNumber += 1; - // const temperatureChangeContainer = - // document.querySelector('#temperatureDegree'); tempDegree.textContent = `${state.tempNumber}`; changeTheme(); }; -const decreaseTemperature = (event) => { - console.log(event); +const decreaseTemperature = () => { state.tempNumber -= 1; - // const temperatureChangeContainer = - // document.querySelector('#temperatureDegree'); tempDegree.textContent = `${state.tempNumber}`; changeTheme(); }; @@ -29,23 +29,27 @@ const decreaseTemperature = (event) => { const changeTheme = () => { // if different ranges, change color if (state.tempNumber >= 80) { - tempDegree.style.color = 'red'; + tempDegree.style.color = '#EA0009'; landscape.textContent = '🌡__🐍_πŸ¦‚_🌡🌡__🐍_🏜_πŸ¦‚'; } else if (state.tempNumber >= 70 && state.tempNumber <= 79) { - tempDegree.style.color = 'orange'; + tempDegree.style.color = '#F0940A'; landscape.textContent = '🌸🌿🌼__🌷🌻🌿_☘️🌱_🌻🌷'; } else if (state.tempNumber >= 60 && state.tempNumber <= 69) { - tempDegree.style.color = 'yellow'; + tempDegree.style.color = '#F4D10A'; landscape.textContent = '🌾🌾_πŸƒ_πŸͺ¨__πŸ›€_🌾🌾🌾_πŸƒ'; } else if (state.tempNumber >= 50 && state.tempNumber <= 59) { - tempDegree.style.color = 'green'; + tempDegree.style.color = '#1F7001'; landscape.textContent = 'πŸŒ²πŸŒ²β›„οΈπŸŒ²β›„οΈπŸ‚πŸŒ²πŸπŸŒ²πŸŒ²β›„οΈπŸ‚πŸŒ²'; } else { - tempDegree.style.color = 'teal'; + tempDegree.style.color = '#256D6C'; landscape.textContent = 'β›„οΈβ›„οΈβ›„οΈβ›„οΈβ›„οΈπŸŒ²β›„οΈβ›„οΈπŸŒ²β›„οΈπŸŒ²β›„οΈπŸŒ²'; } }; +const updateCity = (event) => { + displayCity.textContent = event.target.value; +}; + //register event handlers const registerEventHandlers = () => { @@ -56,11 +60,32 @@ const registerEventHandlers = () => { const tempDownButton = document.querySelector('#tempButtonDown'); tempDownButton.addEventListener('click', decreaseTemperature); - //wave 4: onchangehandler + //City input + inputCity.addEventListener('change', updateCity); + + //wave 3: onchangehandler + const skyDropdown = document.querySelector('.sky'); + skyDropdown.addEventListener('change', (event) => { + if (event.target.value === 'sunny') { + selectedSky.textContent = ' ☁️ ☁️ β˜€οΈ ☁️ ☁️ β˜€οΈ β˜€οΈ β˜€οΈ ☁️ β˜€οΈ'; + gardenBackground.style.backgroundColor = '#D6FFFF'; + } else if (event.target.value === 'cloudy') { + selectedSky.textContent = '☁️☁️ ☁️ ☁️☁️ ☁️ 🌀 ☁️ ☁️☁️'; + gardenBackground.style.backgroundColor = '#C9C9C9'; + } else if (event.target.value === 'rainy') { + selectedSky.textContent = 'πŸŒ§πŸŒˆβ›ˆπŸŒ§πŸŒ§πŸ’§β›ˆπŸŒ§πŸŒ¦πŸŒ§πŸ’§πŸŒ§πŸŒ§'; + gardenBackground.style.backgroundColor = '#9FCFE0'; + } else if (event.target.value === 'snowy') { + selectedSky.textContent = 'πŸŒ¨β„οΈπŸŒ¨πŸŒ¨β„οΈβ„οΈπŸŒ¨β„οΈπŸŒ¨β„οΈβ„οΈπŸŒ¨πŸŒ¨'; + gardenBackground.style.backgroundColor = '#A1B6D6'; + } + }); }; const setUp = () => { tempDegree.textContent = `${state.tempNumber}`; + selectedSky.textContent = `${state.skyState}`; + gardenBackground.style.backgroundColor = `${state.gardenColor}`; registerEventHandlers(); changeTheme(); }; diff --git a/styles/index.css b/styles/index.css index 61e3fd9e5..dca66f125 100644 --- a/styles/index.css +++ b/styles/index.css @@ -15,28 +15,9 @@ -webkit-transform: rotate(45deg); } - //Change Temperature color - .red { - color: red; + #cityNameDisplay { + color:rebeccapurple; } - .orange { - color: orange; - } - - .yellow { - color: yellow; - } - .green { - color: green; - } - - .teal { - color: teal; - } - //default - #temperatureDegree { - color: teal; - } From 2289eb4222b5c2a27e86e8b3187c7d9e23e3a4f1 Mon Sep 17 00:00:00 2001 From: Kbhlee2121 Date: Thu, 9 Dec 2021 02:07:26 -0800 Subject: [PATCH 4/6] Add reset button --- index.html | 7 +++---- src/index.js | 14 +++++++++++++- 2 files changed, 16 insertions(+), 5 deletions(-) diff --git a/index.html b/index.html index c9764f38c..55595e2d8 100644 --- a/index.html +++ b/index.html @@ -11,7 +11,7 @@

Kristin's Weather Report

-

For the lovely city of Seattle

+

For thse lovely city of Seattle

@@ -25,9 +25,8 @@

City Name

- - -

+ +
diff --git a/src/index.js b/src/index.js index c2b608fae..4e711b661 100644 --- a/src/index.js +++ b/src/index.js @@ -5,7 +5,8 @@ const landscape = document.querySelector('#landscape'); const selectedSky = document.querySelector('#skyEmojis'); const gardenBackground = document.querySelector('#weatherGardenContainer'); const inputCity = document.querySelector('#inputCity'); -const displayCity = document.getElementById('#cityNameDisplay'); +const displayCity = document.getElementById('cityNameDisplay'); +const resetButton = document.getElementById('resetCity'); const state = { tempNumber: 80, skyState: ' ☁️ ☁️ β˜€οΈ ☁️ ☁️ β˜€οΈ β˜€οΈ β˜€οΈ ☁️ β˜€οΈ', @@ -46,10 +47,18 @@ const changeTheme = () => { } }; +//City name reset button + const updateCity = (event) => { displayCity.textContent = event.target.value; }; +//reset City +const resetCity = (event) => { + event.target.value = 'Seattle'; + displayCity.textContent = event.target.value; +}; + //register event handlers const registerEventHandlers = () => { @@ -63,6 +72,9 @@ const registerEventHandlers = () => { //City input inputCity.addEventListener('change', updateCity); + //reset city + resetButton.addEventListener('click', resetCity); + //wave 3: onchangehandler const skyDropdown = document.querySelector('.sky'); skyDropdown.addEventListener('change', (event) => { From 94659de6b9fec609c07d4e66daf7827bcef871fa Mon Sep 17 00:00:00 2001 From: Kbhlee2121 Date: Sun, 12 Dec 2021 17:52:36 -0800 Subject: [PATCH 5/6] Made final updates to style and cleaned notes --- index.html | 66 ++++++++++++++++++----------------- src/index.js | 32 ++++++++--------- styles/index.css | 91 +++++++++++++++++++++++++++++++++++++++++++++++- 3 files changed, 139 insertions(+), 50 deletions(-) diff --git a/index.html b/index.html index 55595e2d8..b4bd3b3ee 100644 --- a/index.html +++ b/index.html @@ -11,41 +11,43 @@

Kristin's Weather Report

-

For thse lovely city of Seattle

+

For the lovely city of ✨Seattle✨

-
-

Temperature

-

-
- - -
- -
-

City Name

- - -
- -
-

Sky

- - -
- -
-

Weather Garden

-
- +
+
+
+

Temperature

+
+

+
+
+ +
+
+
+
+

City Name

+ + +
+
+

Sky

+ + +
+
+

Weather Garden

+
+ +
+
diff --git a/src/index.js b/src/index.js index 4e711b661..17791e1dd 100644 --- a/src/index.js +++ b/src/index.js @@ -1,5 +1,3 @@ -// import '../styles/index.css'; - const tempDegree = document.querySelector('#temperatureDegree'); const landscape = document.querySelector('#landscape'); const selectedSky = document.querySelector('#skyEmojis'); @@ -7,9 +5,10 @@ const gardenBackground = document.querySelector('#weatherGardenContainer'); const inputCity = document.querySelector('#inputCity'); const displayCity = document.getElementById('cityNameDisplay'); const resetButton = document.getElementById('resetCity'); + const state = { tempNumber: 80, - skyState: ' ☁️ ☁️ β˜€οΈ ☁️ ☁️ β˜€οΈ β˜€οΈ β˜€οΈ ☁️ β˜€οΈ', + skyState: ' ☁️ ☁️ β˜€οΈ ☁️ ☁️ β˜€οΈ β˜€οΈ β˜€οΈ ☁️ β˜€οΈβ˜€οΈ β˜€οΈ ☁️ β˜€οΈ', gardenColor: '#D6FFFF', }; @@ -26,29 +25,29 @@ const decreaseTemperature = () => { changeTheme(); }; -//Issue: needs to have colors c +//Landscape and weather garden background color const changeTheme = () => { // if different ranges, change color if (state.tempNumber >= 80) { tempDegree.style.color = '#EA0009'; - landscape.textContent = '🌡__🐍_πŸ¦‚_🌡🌡__🐍_🏜_πŸ¦‚'; + landscape.textContent = '🌡__🐍_πŸ¦‚_🌡🌡__🐍_🏜_πŸ¦‚πŸŒ΅__🐍_🏜_πŸ¦‚'; } else if (state.tempNumber >= 70 && state.tempNumber <= 79) { tempDegree.style.color = '#F0940A'; - landscape.textContent = '🌸🌿🌼__🌷🌻🌿_☘️🌱_🌻🌷'; + landscape.textContent = '🌸🌿🌼__🌷🌻🌿_☘️🌱_🌻🌷🌿_☘️🌱_🌻🌷'; } else if (state.tempNumber >= 60 && state.tempNumber <= 69) { tempDegree.style.color = '#F4D10A'; - landscape.textContent = '🌾🌾_πŸƒ_πŸͺ¨__πŸ›€_🌾🌾🌾_πŸƒ'; + landscape.textContent = '🌾🌾_πŸƒ_πŸͺ¨__πŸ›€_🌾🌾🌾_πŸƒ__πŸ›€_🌾🌾🌾_πŸƒ'; } else if (state.tempNumber >= 50 && state.tempNumber <= 59) { tempDegree.style.color = '#1F7001'; - landscape.textContent = 'πŸŒ²πŸŒ²β›„οΈπŸŒ²β›„οΈπŸ‚πŸŒ²πŸπŸŒ²πŸŒ²β›„οΈπŸ‚πŸŒ²'; + landscape.textContent = 'πŸŒ²πŸŒ²β›„οΈπŸŒ²β›„οΈπŸ‚πŸŒ²πŸπŸŒ²πŸŒ²β›„οΈπŸ‚πŸŒ²πŸ‚πŸŒ²πŸπŸŒ²πŸŒ²β›„οΈπŸ‚'; } else { tempDegree.style.color = '#256D6C'; - landscape.textContent = 'β›„οΈβ›„οΈβ›„οΈβ›„οΈβ›„οΈπŸŒ²β›„οΈβ›„οΈπŸŒ²β›„οΈπŸŒ²β›„οΈπŸŒ²'; + landscape.textContent = + 'β›„οΈβ›„οΈπŸŒ²β›„οΈβ›„οΈπŸŒ²β›„οΈβ›„οΈπŸŒ²β›„οΈπŸŒ²β›„οΈπŸŒ²β›„οΈπŸŒ²β›„οΈβ›„οΈπŸŒ²β›„οΈπŸŒ²β›„οΈ'; } }; //City name reset button - const updateCity = (event) => { displayCity.textContent = event.target.value; }; @@ -60,7 +59,6 @@ const resetCity = (event) => { }; //register event handlers - const registerEventHandlers = () => { //up button const tempUpButton = document.querySelector('#tempButtonUp'); @@ -79,22 +77,22 @@ const registerEventHandlers = () => { const skyDropdown = document.querySelector('.sky'); skyDropdown.addEventListener('change', (event) => { if (event.target.value === 'sunny') { - selectedSky.textContent = ' ☁️ ☁️ β˜€οΈ ☁️ ☁️ β˜€οΈ β˜€οΈ β˜€οΈ ☁️ β˜€οΈ'; + selectedSky.textContent = ' ☁️ ☁️ β˜€οΈ ☁️ ☁️ β˜€οΈ β˜€οΈ β˜€οΈ ☁️ β˜€οΈβ˜€οΈ β˜€οΈ ☁️ β˜€οΈ'; gardenBackground.style.backgroundColor = '#D6FFFF'; } else if (event.target.value === 'cloudy') { - selectedSky.textContent = '☁️☁️ ☁️ ☁️☁️ ☁️ 🌀 ☁️ ☁️☁️'; + selectedSky.textContent = '☁️☁️ ☁️ ☁️☁️ ☁️ 🌀 ☁️ ☁️☁️🌀 ☁️ ☁️☁️'; gardenBackground.style.backgroundColor = '#C9C9C9'; } else if (event.target.value === 'rainy') { - selectedSky.textContent = 'πŸŒ§πŸŒˆβ›ˆπŸŒ§πŸŒ§πŸ’§β›ˆπŸŒ§πŸŒ¦πŸŒ§πŸ’§πŸŒ§πŸŒ§'; + selectedSky.textContent = 'πŸŒ§πŸŒˆβ›ˆπŸŒ§πŸŒ§πŸ’§β›ˆπŸŒ§πŸŒ¦πŸŒ§πŸ’§πŸŒ§πŸŒ§πŸŒ§πŸŒˆβ›ˆπŸŒ§'; gardenBackground.style.backgroundColor = '#9FCFE0'; } else if (event.target.value === 'snowy') { - selectedSky.textContent = 'πŸŒ¨β„οΈπŸŒ¨πŸŒ¨β„οΈβ„οΈπŸŒ¨β„οΈπŸŒ¨β„οΈβ„οΈπŸŒ¨πŸŒ¨'; + selectedSky.textContent = 'πŸŒ¨β„οΈπŸŒ¨πŸŒ¨β„οΈβ„οΈπŸŒ¨β„οΈπŸŒ¨β„οΈβ„οΈπŸŒ¨πŸŒ¨πŸŒ¨β„οΈβ„οΈπŸŒ¨πŸŒ¨'; gardenBackground.style.backgroundColor = '#A1B6D6'; } }); }; -const setUp = () => { +const defaultSetup = () => { tempDegree.textContent = `${state.tempNumber}`; selectedSky.textContent = `${state.skyState}`; gardenBackground.style.backgroundColor = `${state.gardenColor}`; @@ -103,4 +101,4 @@ const setUp = () => { }; //execute registerEventHandlers //runs code once DOM is ready. DOM isn't fully loaded, eventhandlers might not exist yet. Ex: buttoon on line 35 -document.addEventListener('DOMContentLoaded', setUp); +document.addEventListener('DOMContentLoaded', defaultSetup); diff --git a/styles/index.css b/styles/index.css index dca66f125..016025ae0 100644 --- a/styles/index.css +++ b/styles/index.css @@ -1,3 +1,9 @@ +@import url('https://fonts.googleapis.com/css2?family=Bevan&family=Cinzel+Decorative:wght@700&family=Knewave&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Bevan&family=Cinzel+Decorative:wght@700&family=Goudy+Bookletter+1911&family=Knewave&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Bevan&family=Bungee+Shade&family=Cinzel+Decorative:wght@700&family=Galada&family=Goudy+Bookletter+1911&family=Knewave&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Bevan&family=Bungee+Shade&family=Cinzel+Decorative:wght@700&family=Galada&family=Goudy+Bookletter+1911&family=Knewave&family=Pompiere&display=swap'); + +/* Arrows */ .arrow { border: solid black; border-width: 0 3px 3px 0; @@ -15,9 +21,92 @@ -webkit-transform: rotate(45deg); } + /* Text Styles */ + #cityNameDisplay { - color:rebeccapurple; + color:mediumvioletred; + font-weight: 900; + } + + .title { + font-family: 'Cinzel Decorative', cursive; + color: white; + } + + #subtitle { + font-family: 'Goudy Bookletter 1911', serif; + color: rgb(55, 46, 46) + } + + .item-titles { + font-family: 'Galada', cursive; + color:rgb(85, 71, 71); + } + + header { + text-align: center; + } + + .footer { + text-align: center; + font-family: 'Pompiere', cursive; + font-weight: bold; + } + + body { + background-color: #f6f0c4; + background-image: linear-gradient(315deg, #f6f0c4 0%, #d99ec9 74%); + } + + /* Layout */ + + .content-wrapper { + margin: 5px; + } + + .temp-wrapper { + display: flex; + flex-direction: row; + justify-content: space-evenly; + } + + .button-wrapper { + display: flex; + flex-direction: column; + } + + .items-wrapper { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + align-content: center; + padding: 20px; + margin: 5px; } + .item-wrapper { + position: relative; + text-align: center; + outline: .5px solid grey; + padding: 5px; + margin: 5px 15px; + border-radius: 10%; + box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); + } + + #weatherGardenContainer { + grid-column-start: 1; + grid-column-end: 4; + width: 60%; + border-radius: 10%; + margin: 5px auto; + } + + #skyEmojis { + margin-bottom: 40px; + } + + #landscape { + margin-top: 10px; + } From a94ddef9326c2379b9042806d0cde1ff06156a7c Mon Sep 17 00:00:00 2001 From: Kbhlee2121 Date: Sun, 12 Dec 2021 18:14:37 -0800 Subject: [PATCH 6/6] Fix link to stylesheet and made final touch up --- index.html | 2 +- styles/index.css | 13 ++++++++++++- 2 files changed, 13 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index b4bd3b3ee..982133cac 100644 --- a/index.html +++ b/index.html @@ -5,7 +5,7 @@ Weather Report - +
diff --git a/styles/index.css b/styles/index.css index 016025ae0..30ea59615 100644 --- a/styles/index.css +++ b/styles/index.css @@ -31,16 +31,19 @@ .title { font-family: 'Cinzel Decorative', cursive; color: white; + font-size: 2.1em; } #subtitle { font-family: 'Goudy Bookletter 1911', serif; - color: rgb(55, 46, 46) + color: rgb(55, 46, 46); + font-size: 1.5em; } .item-titles { font-family: 'Galada', cursive; color:rgb(85, 71, 71); + font-size: 1.7em; } header { @@ -73,6 +76,7 @@ .button-wrapper { display: flex; flex-direction: column; + justify-content: space-around; } .items-wrapper { @@ -103,10 +107,17 @@ #skyEmojis { margin-bottom: 40px; + font-size: 1.5em; } #landscape { margin-top: 10px; + font-size: 1.5em; + } + + #temperatureDegree { + font-size: 2em; + margin-bottom: 0 auto; }