From 73f986e12b71f2b8ecd5532b49a68b8dc1f5a60e Mon Sep 17 00:00:00 2001 From: Laurel S Date: Tue, 7 Dec 2021 16:22:28 -0800 Subject: [PATCH 1/9] Set up index.html and index.css files --- index.html | 7 ++++++- styles/index.css | 4 ++++ 2 files changed, 10 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 68b320b9a..308de6eb6 100644 --- a/index.html +++ b/index.html @@ -5,8 +5,13 @@ Weather Report + - +
+
+ + + \ No newline at end of file diff --git a/styles/index.css b/styles/index.css index e69de29bb..412c5744b 100644 --- a/styles/index.css +++ b/styles/index.css @@ -0,0 +1,4 @@ +#temp-box { + background-color: blueviolet; + font-size: 80pt; +} \ No newline at end of file From 3d20e47434ce1afdcf5cf20e9f91ebb57091fc9a Mon Sep 17 00:00:00 2001 From: Laurel S Date: Tue, 7 Dec 2021 16:23:26 -0800 Subject: [PATCH 2/9] Adds displayTemp func with buttons to adjust temp --- src/index.js | 28 ++++++++++++++++++++++++++++ 1 file changed, 28 insertions(+) diff --git a/src/index.js b/src/index.js index e69de29bb..bf99abc5a 100644 --- a/src/index.js +++ b/src/index.js @@ -0,0 +1,28 @@ +let temp = 55; + +// select temp box +const displayTemp = () => { + // display initial temp value + const tempBox = document.getElementById('temp-box'); + tempBox.textContent = temp; + // add event listener to increase temp button + const increaseButton = document.querySelector('#increase'); + // console.log(`starting temp: ${temp}`) + increaseButton.addEventListener('click', () => { + temp += 1; + tempBox.textContent = temp; + }); + // add event listener to decrease temp button + const decreaseButton = document.querySelector('#decrease'); + decreaseButton.addEventListener('click', () => { + temp -= 1; + tempBox.textContent = temp; + }) +} + + +if (document.readyState !== 'loading') { + displayTemp(); +} else { + document.addEventListener('DOMContentLoaded', displayTemp); +} \ No newline at end of file From aea2e200c49f12d2243199a3a20a7f300c66280d Mon Sep 17 00:00:00 2001 From: Laurel S Date: Tue, 7 Dec 2021 17:23:13 -0800 Subject: [PATCH 3/9] tempStyle func changes color based on temp range --- src/index.js | 32 ++++++++++++++++++++++++++++++++ styles/index.css | 27 ++++++++++++++++++++++++++- 2 files changed, 58 insertions(+), 1 deletion(-) diff --git a/src/index.js b/src/index.js index bf99abc5a..91800af7b 100644 --- a/src/index.js +++ b/src/index.js @@ -11,15 +11,47 @@ const displayTemp = () => { increaseButton.addEventListener('click', () => { temp += 1; tempBox.textContent = temp; + // console.log('to temp style') + tempStyle(temp, tempBox); }); // add event listener to decrease temp button const decreaseButton = document.querySelector('#decrease'); decreaseButton.addEventListener('click', () => { temp -= 1; tempBox.textContent = temp; + // console.log('to temp style') + tempStyle(temp, tempBox); }) } +const tempStyle = (temp, tempBox) => { + // const tempBox = document.getElementById('temp-box') + tempBox.removeAttribute('class'); + if (temp >=80) { + // const tempBox = document.getElementById('temp-box'); + // tempBox.classList.remove('seventy-degrees', 'hi') + // tempBox.removeAttribute('class'); + tempBox.classList.add('eighty-degrees'); + } else if (temp >= 70) { + // const tempBox = document.getElementById('temp-box'); + // tempBox.classList.remove('eighty-degrees', 'seventy-degrees', 'sixty-degrees', 'fifty-degrees') + // tempBox.removeAttribute('class'); + tempBox.classList.add('seventy-degrees'); + } else if (temp >= 60) { + // const tempBox = document.getElementById('temp-box'); + // tempBox.removeAttribute('class'); + tempBox.classList.add('sixty-degrees'); + } else if (temp >= 50) { + // const tempBox = document.getElementById('temp-box'); + // tempBox.removeAttribute('class'); + tempBox.classList.add('fifty-degrees'); + } else { + // const tempBox = document.getElementById('temp-box') + // tempBox.removeAttribute('class'); + tempBox.classList.add('forty-degrees') + } +} + if (document.readyState !== 'loading') { displayTemp(); diff --git a/styles/index.css b/styles/index.css index 412c5744b..e225be10f 100644 --- a/styles/index.css +++ b/styles/index.css @@ -1,4 +1,29 @@ -#temp-box { +/* #temp-box { background-color: blueviolet; font-size: 80pt; +} */ + +div { + background-color: blueviolet; + font-size: 80pt; +} + +.eighty-degrees { + background-color: red; +} + +.seventy-degrees { + background-color: orange; +} + +.sixty-degrees { + background-color: yellow; +} + +.fifty-degrees { + background-color: green; +} + +.forty-degrees { + background-color: teal; } \ No newline at end of file From 51c01548d7ba3eb4e110ceaa1e3f9ed3dc816d7d Mon Sep 17 00:00:00 2001 From: Laurel S Date: Tue, 7 Dec 2021 17:30:52 -0800 Subject: [PATCH 4/9] Changes landscapes dependent on temp --- index.html | 3 ++- src/index.js | 7 +++++++ 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 308de6eb6..b021823e6 100644 --- a/index.html +++ b/index.html @@ -8,7 +8,8 @@ -
+
πŸŒ²πŸŒ²β›„οΈπŸŒ²β›„οΈπŸ‚πŸŒ²πŸπŸŒ²πŸŒ²β›„οΈπŸ‚πŸŒ²
+
diff --git a/src/index.js b/src/index.js index 91800af7b..7bf1bfdd1 100644 --- a/src/index.js +++ b/src/index.js @@ -1,3 +1,4 @@ +// set initial temp let temp = 55; // select temp box @@ -26,29 +27,35 @@ const displayTemp = () => { const tempStyle = (temp, tempBox) => { // const tempBox = document.getElementById('temp-box') + const landscape = document.getElementById('landscape') tempBox.removeAttribute('class'); if (temp >=80) { // const tempBox = document.getElementById('temp-box'); // tempBox.classList.remove('seventy-degrees', 'hi') // tempBox.removeAttribute('class'); tempBox.classList.add('eighty-degrees'); + landscape.textContent = '🌡__🐍_πŸ¦‚_🌡🌡__🐍_🏜_πŸ¦‚' } else if (temp >= 70) { // const tempBox = document.getElementById('temp-box'); // tempBox.classList.remove('eighty-degrees', 'seventy-degrees', 'sixty-degrees', 'fifty-degrees') // tempBox.removeAttribute('class'); tempBox.classList.add('seventy-degrees'); + landscape.textContent = '🌸🌿🌼__🌷🌻🌿_☘️🌱_🌻🌷' } else if (temp >= 60) { // const tempBox = document.getElementById('temp-box'); // tempBox.removeAttribute('class'); tempBox.classList.add('sixty-degrees'); + landscape.textContent = '🌾🌾_πŸƒ_πŸͺ¨__πŸ›€_🌾🌾🌾_πŸƒ' } else if (temp >= 50) { // const tempBox = document.getElementById('temp-box'); // tempBox.removeAttribute('class'); tempBox.classList.add('fifty-degrees'); + landscape.textContent = 'πŸŒ²πŸŒ²β›„οΈπŸŒ²β›„οΈπŸ‚πŸŒ²πŸπŸŒ²πŸŒ²β›„οΈπŸ‚πŸŒ²' } else { // const tempBox = document.getElementById('temp-box') // tempBox.removeAttribute('class'); tempBox.classList.add('forty-degrees') + landscape.textContent = '🌬🌨 οΈβ›„πŸŒ¬πŸŒ¨ οΈβ›„πŸŒ¬πŸŒ¨ οΈβ›„πŸŒ¬πŸŒ¨ ️⛄' } } From b10767d38e907222821c571fe4b7ae70be02bd31 Mon Sep 17 00:00:00 2001 From: Laurel S Date: Tue, 7 Dec 2021 17:56:08 -0800 Subject: [PATCH 5/9] adds select tag as sky, responsive to user --- index.html | 10 ++++++++-- src/index.js | 20 ++++++++++++++++++++ styles/index.css | 2 +- 3 files changed, 29 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index b021823e6..677531e79 100644 --- a/index.html +++ b/index.html @@ -8,11 +8,17 @@ +
☁️ ☁️ ☁️ β˜€οΈ ☁️ ☁️
πŸŒ²πŸŒ²β›„οΈπŸŒ²β›„οΈπŸ‚πŸŒ²πŸπŸŒ²πŸŒ²β›„οΈπŸ‚πŸŒ²
-
-
+
+ \ No newline at end of file diff --git a/src/index.js b/src/index.js index 7bf1bfdd1..8c5365e20 100644 --- a/src/index.js +++ b/src/index.js @@ -23,6 +23,8 @@ const displayTemp = () => { // console.log('to temp style') tempStyle(temp, tempBox); }) + + setSky(); } const tempStyle = (temp, tempBox) => { @@ -59,6 +61,24 @@ const tempStyle = (temp, tempBox) => { } } +const setSky = () => { + console.log('firing setSky func') + const sky = document.getElementById('sky') + const skyMenu = document.getElementById('sky-select'); + skyMenu.addEventListener('change', () => { + console.log(skyMenu.value) + if (skyMenu.value == 'sunny') { + sky.textContent = "☁️ ☁️ ☁️ β˜€οΈ ☁️ ☁️" + } else if (skyMenu.value == 'cloudy') { + sky.textContent = "☁️☁️ ☁️ ☁️☁️ ☁️ 🌀 ☁️ ☁️☁️" + } else if (skyMenu.value == 'rainy') { + sky.textContent = "πŸŒ§πŸŒˆβ›ˆπŸŒ§πŸŒ§πŸ’§β›ˆπŸŒ§πŸŒ¦πŸŒ§πŸ’§πŸŒ§πŸŒ§" + } else { + sky.textContent = "πŸŒ¨β„οΈπŸŒ¨πŸŒ¨β„οΈβ„οΈπŸŒ¨β„οΈπŸŒ¨β„οΈβ„οΈπŸŒ¨πŸŒ¨" + } + } +)}; + if (document.readyState !== 'loading') { displayTemp(); diff --git a/styles/index.css b/styles/index.css index e225be10f..e219a099c 100644 --- a/styles/index.css +++ b/styles/index.css @@ -4,7 +4,7 @@ } */ div { - background-color: blueviolet; + /* background-color: blueviolet; */ font-size: 80pt; } From cb0a091be7907cffd8bc516f3a0155199baf2c1c Mon Sep 17 00:00:00 2001 From: Laurel S Date: Tue, 7 Dec 2021 18:04:21 -0800 Subject: [PATCH 6/9] changes city name from text input. passes wave 4. --- index.html | 2 ++ src/index.js | 10 ++++++++++ styles/index.css | 3 +++ 3 files changed, 15 insertions(+) diff --git a/index.html b/index.html index 677531e79..dd918e5ee 100644 --- a/index.html +++ b/index.html @@ -8,6 +8,7 @@ +

Seattle

☁️ ☁️ ☁️ β˜€οΈ ☁️ ☁️
πŸŒ²πŸŒ²β›„οΈπŸŒ²β›„οΈπŸ‚πŸŒ²πŸπŸŒ²πŸŒ²β›„οΈπŸ‚πŸŒ²
@@ -19,6 +20,7 @@ + \ No newline at end of file diff --git a/src/index.js b/src/index.js index 8c5365e20..b7dbbc41d 100644 --- a/src/index.js +++ b/src/index.js @@ -25,6 +25,8 @@ const displayTemp = () => { }) setSky(); + + setCityName(); } const tempStyle = (temp, tempBox) => { @@ -79,6 +81,14 @@ const setSky = () => { } )}; +const setCityName = () => { + const cityHeader = document.getElementById('display-city') + const cityInput= document.getElementById('city-name') + cityInput.addEventListener('input', () => { + cityHeader.innerHTML = cityInput.value + }) +} + if (document.readyState !== 'loading') { displayTemp(); diff --git a/styles/index.css b/styles/index.css index e219a099c..4b3839818 100644 --- a/styles/index.css +++ b/styles/index.css @@ -3,6 +3,9 @@ font-size: 80pt; } */ +h1 { + font-size: 100pt; +} div { /* background-color: blueviolet; */ font-size: 80pt; From 97d309fa2d9a81bbed197f25fa406757109d7f14 Mon Sep 17 00:00:00 2001 From: Laurel S Date: Tue, 7 Dec 2021 18:10:32 -0800 Subject: [PATCH 7/9] adds city reset button. passes wave 5. --- index.html | 1 + src/index.js | 5 +++++ 2 files changed, 6 insertions(+) diff --git a/index.html b/index.html index dd918e5ee..c8e1da50b 100644 --- a/index.html +++ b/index.html @@ -21,6 +21,7 @@

Seattle

+ \ No newline at end of file diff --git a/src/index.js b/src/index.js index b7dbbc41d..d4b02e3c9 100644 --- a/src/index.js +++ b/src/index.js @@ -82,11 +82,16 @@ const setSky = () => { )}; const setCityName = () => { + const resetButton = document.getElementById('reset') const cityHeader = document.getElementById('display-city') const cityInput= document.getElementById('city-name') cityInput.addEventListener('input', () => { cityHeader.innerHTML = cityInput.value }) + resetButton.addEventListener('click', () => { + cityHeader.innerHTML = 'Seattle' + cityInput.value = 'Seattle' + }) } From 420ae4ef72efc7ce9a98d691f60142108981a5c0 Mon Sep 17 00:00:00 2001 From: Laurel S Date: Sun, 12 Dec 2021 18:59:53 -0800 Subject: [PATCH 8/9] Reorganizes everything in a major way --- index.html | 38 ++++--- src/index.js | 286 ++++++++++++++++++++++++++++++++++------------- styles/index.css | 73 ++++++++++-- 3 files changed, 297 insertions(+), 100 deletions(-) diff --git a/index.html b/index.html index c8e1da50b..7772502f4 100644 --- a/index.html +++ b/index.html @@ -5,23 +5,35 @@ Weather Report + + +

Seattle

-
☁️ ☁️ ☁️ β˜€οΈ ☁️ ☁️
-
πŸŒ²πŸŒ²β›„οΈπŸŒ²β›„οΈπŸ‚πŸŒ²πŸπŸŒ²πŸŒ²β›„οΈπŸ‚πŸŒ²
-
- - - - - +
+
☁️ β˜€οΈ ☁️ ☁️ ☁️
+
πŸŒ¨β„οΈπŸŒ¨πŸŒ¨β„οΈβ„οΈπŸŒ¨β„οΈπŸŒ¨β„οΈβ„οΈπŸŒ¨πŸŒ¨
+
+
+
+ + +
+
+ + +
+
+ + +
\ No newline at end of file diff --git a/src/index.js b/src/index.js index d4b02e3c9..034833ef5 100644 --- a/src/index.js +++ b/src/index.js @@ -1,102 +1,236 @@ -// set initial temp -let temp = 55; - -// select temp box -const displayTemp = () => { - // display initial temp value - const tempBox = document.getElementById('temp-box'); - tempBox.textContent = temp; - // add event listener to increase temp button - const increaseButton = document.querySelector('#increase'); - // console.log(`starting temp: ${temp}`) - increaseButton.addEventListener('click', () => { - temp += 1; - tempBox.textContent = temp; - // console.log('to temp style') - tempStyle(temp, tempBox); - }); - // add event listener to decrease temp button - const decreaseButton = document.querySelector('#decrease'); - decreaseButton.addEventListener('click', () => { - temp -= 1; - tempBox.textContent = temp; - // console.log('to temp style') - tempStyle(temp, tempBox); - }) +const state = { + temp: 48, + initTempColorClass: 'forty-degrees', + tempBox: document.getElementById('temp-box'), // NOT SURE IF THIS IS OK + landscapes_map: { + '80+': '🌡__🐍_πŸ¦‚_🌡🌡__🐍_🏜_πŸ¦‚', + '70+': '🌸🌿🌼__🌷🌻🌿_☘️🌱_🌻🌷', + '60+': '🌾🌾_πŸƒ_πŸͺ¨__πŸ›€_🌾🌾🌾_πŸƒ', + '50+': 'πŸŒ²πŸŒ²β›„οΈπŸŒ²β›„οΈπŸ‚πŸŒ²πŸπŸŒ²πŸŒ²β›„οΈπŸ‚πŸŒ²', + '40+': '🌬🌨 οΈβ›„πŸŒ¬πŸŒ¨ οΈβ›„πŸŒ¬πŸŒ¨ οΈβ›„πŸŒ¬πŸŒ¨ ️', + }, + sky_map: { + sunny: ' ☁️ β˜€οΈ ☁️ ☁️ ☁️', + cloudy: '☁️☁️ ☁️ ☁️☁️ ☁️ 🌀 ☁️ ☁️☁️', + rainy: 'πŸŒ§πŸŒˆβ›ˆπŸŒ§πŸŒ§πŸ’§β›ˆπŸŒ§πŸŒ¦πŸŒ§πŸ’§πŸŒ§', + snowy: 'πŸŒ¨β„οΈπŸŒ¨πŸŒ¨β„οΈβ„οΈπŸŒ¨β„οΈπŸŒ¨β„οΈβ„οΈπŸŒ¨πŸŒ¨', + } +} + +// does it make sense to use state this way? + +// set initial temp and display it +// should these be defined globally? in a function? + +// let temp = 55; +// const tempBox = document.getElementById('temp-box'); +// tempBox.textContent = temp; + +// setting initial temp and color +state.tempBox.classList.add(state.initTempColorClass); +state.tempBox.textContent = `${state.temp} Β°F`; + + +// console.log(state.tempBox.textContent) + + +// this function is responsible for changing two things in one function... + +// const tempStyle = () => { +// // console.log('running tempStyle') +// temp = state.temp; +// tempBox = state.tempBox; +// const landscape = document.getElementById('landscape') + +// tempBox.removeAttribute('class'); + +// if (temp >=80) { +// tempBox.classList.add('eighty-degrees'); +// landscape.textContent = state.landscapes_map['80+'] +// } else if (temp >= 70) { +// tempBox.classList.add('seventy-degrees'); +// landscape.textContent = state.landscapes_map['70+'] +// } else if (temp >= 60) { +// state.tempBox.classList.add('sixty-degrees'); +// landscape.textContent = state.landscapes_map['60+'] +// } else if (temp >= 50) { +// state.tempBox.classList.add('fifty-degrees'); +// landscape.textContent = state.landscapes_map['50+'] +// } else { +// tempBox.classList.add('forty-degrees'); +// landscape.textContent = state.landscapes_map['40+'] +// } +// } - setSky(); +// HELPER FUNCTIONS? - setCityName(); + +// HOW CAN I ELIMINATE THESE REPEATED CONDITIONALS +// const setTempColor = () => { + +// state.tempBox.removeAttribute('class'); + +// if (state.temp >=80) { +// state.tempBox.classList.add('eighty-degrees'); +// } else if (state.temp >= 70) { +// state.tempBox.classList.add('seventy-degrees'); +// } else if (state.temp >= 60) { +// state.tempBox.classList.add('sixty-degrees'); +// } else if (state.temp >= 50) { +// state.tempBox.classList.add('fifty-degrees'); +// } else { +// state.tempBox.classList.add('forty-degrees'); +// } +// } + +// const setTempLandscape = () => { + +// const landscape = document.getElementById('landscape') + +// if (state.temp >=80) { +// landscape.textContent = state.landscapes_map['80+'] +// } else if (state.temp >= 70) { +// landscape.textContent = state.landscapes_map['70+'] +// } else if (state.temp >= 60) { +// landscape.textContent = state.landscapes_map['60+'] +// } else if (state.temp >= 50) { +// landscape.textContent = state.landscapes_map['50+'] +// } else { +// landscape.textContent = state.landscapes_map['40+'] +// } +// } + +// const setTempColor = () => { + +// state.tempBox.removeAttribute('class'); + +// state.tempBox.classList.add(); +// // if (state.temp >=80) { +// // state.tempBox.classList.add('eighty-degrees'); +// // } else if (state.temp >= 70) { +// // state.tempBox.classList.add('seventy-degrees'); +// // } else if (state.temp >= 60) { +// // state.tempBox.classList.add('sixty-degrees'); +// // } else if (state.temp >= 50) { +// // state.tempBox.classList.add('fifty-degrees'); +// // } else { +// // state.tempBox.classList.add('forty-degrees'); +// // } +// } + + +// MAYBE THIS IS BAD BECAUSE I'M RESTYLING EVERY SINGLE TIME TEMP CHANGES + +// HELPER FUNCTIONS + +const styleColorAndLandscape = () => { + results = determineTempRange(); + setTempColor(results.tempColorClass); + setTempLandscape(results.tempLandscape); } -const tempStyle = (temp, tempBox) => { - // const tempBox = document.getElementById('temp-box') - const landscape = document.getElementById('landscape') - tempBox.removeAttribute('class'); +const determineTempRange = () => { + temp = state.temp; + landscapes_map = state.landscapes_map; if (temp >=80) { - // const tempBox = document.getElementById('temp-box'); - // tempBox.classList.remove('seventy-degrees', 'hi') - // tempBox.removeAttribute('class'); - tempBox.classList.add('eighty-degrees'); - landscape.textContent = '🌡__🐍_πŸ¦‚_🌡🌡__🐍_🏜_πŸ¦‚' + tempColorClass = 'eighty-degrees'; + tempLandscape = landscapes_map['80+'] } else if (temp >= 70) { - // const tempBox = document.getElementById('temp-box'); - // tempBox.classList.remove('eighty-degrees', 'seventy-degrees', 'sixty-degrees', 'fifty-degrees') - // tempBox.removeAttribute('class'); - tempBox.classList.add('seventy-degrees'); - landscape.textContent = '🌸🌿🌼__🌷🌻🌿_☘️🌱_🌻🌷' + tempColorClass = 'seventy-degrees'; + tempLandscape = landscapes_map['70+'] } else if (temp >= 60) { - // const tempBox = document.getElementById('temp-box'); - // tempBox.removeAttribute('class'); - tempBox.classList.add('sixty-degrees'); - landscape.textContent = '🌾🌾_πŸƒ_πŸͺ¨__πŸ›€_🌾🌾🌾_πŸƒ' + tempColorClass = 'sixty-degrees'; + tempLandscape = landscapes_map['60+'] } else if (temp >= 50) { - // const tempBox = document.getElementById('temp-box'); - // tempBox.removeAttribute('class'); - tempBox.classList.add('fifty-degrees'); - landscape.textContent = 'πŸŒ²πŸŒ²β›„οΈπŸŒ²β›„οΈπŸ‚πŸŒ²πŸπŸŒ²πŸŒ²β›„οΈπŸ‚πŸŒ²' + tempColorClass = 'fifty-degrees'; + tempLandscape = landscapes_map['50+'] } else { - // const tempBox = document.getElementById('temp-box') - // tempBox.removeAttribute('class'); - tempBox.classList.add('forty-degrees') - landscape.textContent = '🌬🌨 οΈβ›„πŸŒ¬πŸŒ¨ οΈβ›„πŸŒ¬πŸŒ¨ οΈβ›„πŸŒ¬πŸŒ¨ ️⛄' + tempColorClass = 'forty-degrees'; + tempLandscape = landscapes_map['40+'] + } + return { + tempColorClass, + tempLandscape } } -const setSky = () => { - console.log('firing setSky func') +const setTempColor = (className) => { + state.tempBox.removeAttribute('class'); + state.tempBox.classList.add(className); +} + +const setTempLandscape = (landscapeType) => { + const landscape = document.getElementById('landscape'); + landscape.textContent = landscapeType; +} + + +// FUNCTIONS FOR EACH ELEMENT'S EVENT HANDLER + +const registerIncreaseButton = () => { + const increaseButton = document.querySelector('#increase'); + increaseButton.addEventListener('click', () => { + state.temp += 1 + state.tempBox.textContent = `${state.temp} Β°F`; + styleColorAndLandscape(); + }); +} + +const registerDecreaseButton = () => { + const decreaseButton = document.querySelector('#decrease'); + decreaseButton.addEventListener('click', () => { + state.temp -= 1; + state.tempBox.textContent = `${state.temp} Β°F`; + styleColorAndLandscape(); + }) +} + +const registerCityInput = () => { + const cityHeader = document.getElementById('display-city') + const cityInput= document.getElementById('city-name') + cityInput.addEventListener('input', () => { + cityHeader.innerHTML = cityInput.value + }) +} + +const registerCityResetButton = () => { + const resetButton = document.getElementById('reset'); + const cityHeader = document.getElementById('display-city') + const cityInput= document.getElementById('city-name') + resetButton.addEventListener('click', () => { + cityHeader.innerHTML = 'Seattle'; + cityInput.value = 'Seattle'; + }); +} + +const registerSkySelect = () => { const sky = document.getElementById('sky') const skyMenu = document.getElementById('sky-select'); skyMenu.addEventListener('change', () => { - console.log(skyMenu.value) if (skyMenu.value == 'sunny') { - sky.textContent = "☁️ ☁️ ☁️ β˜€οΈ ☁️ ☁️" + sky.textContent = state.sky_map.sunny; } else if (skyMenu.value == 'cloudy') { - sky.textContent = "☁️☁️ ☁️ ☁️☁️ ☁️ 🌀 ☁️ ☁️☁️" + sky.textContent = state.sky_map.cloudy; } else if (skyMenu.value == 'rainy') { - sky.textContent = "πŸŒ§πŸŒˆβ›ˆπŸŒ§πŸŒ§πŸ’§β›ˆπŸŒ§πŸŒ¦πŸŒ§πŸ’§πŸŒ§πŸŒ§" + sky.textContent = state.sky_map.rainy; } else { - sky.textContent = "πŸŒ¨β„οΈπŸŒ¨πŸŒ¨β„οΈβ„οΈπŸŒ¨β„οΈπŸŒ¨β„οΈβ„οΈπŸŒ¨πŸŒ¨" + sky.textContent = state.sky_map.snowy; } - } -)}; - -const setCityName = () => { - const resetButton = document.getElementById('reset') - const cityHeader = document.getElementById('display-city') - const cityInput= document.getElementById('city-name') - cityInput.addEventListener('input', () => { - cityHeader.innerHTML = cityInput.value }) - resetButton.addEventListener('click', () => { - cityHeader.innerHTML = 'Seattle' - cityInput.value = 'Seattle' - }) -} +}; +// REGISTER ALL EVENT HANDLERS +const registerEventHandlers = () => { + registerIncreaseButton(); + registerDecreaseButton(); + registerCityInput(); + registerCityResetButton(); + registerSkySelect(); +} +// RUN ON LOAD if (document.readyState !== 'loading') { - displayTemp(); + registerEventHandlers(); } else { - document.addEventListener('DOMContentLoaded', displayTemp); + document.addEventListener('DOMContentLoaded', registerEventHandlers); } \ No newline at end of file diff --git a/styles/index.css b/styles/index.css index 4b3839818..9db81ebde 100644 --- a/styles/index.css +++ b/styles/index.css @@ -1,32 +1,83 @@ -/* #temp-box { - background-color: blueviolet; - font-size: 80pt; -} */ +body { + background-image: url('https://images.pexels.com/photos/255379/pexels-photo-255379.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1'); + -webkit-background-size: cover; + -moz-background-size: cover; + -o-background-size: cover; + background-size: cover; + font-family: 'Ruda'; +} h1 { + margin-top: 5%; font-size: 100pt; + text-align: center; } + div { - /* background-color: blueviolet; */ + text-align: center; +} + +#temp-box { font-size: 80pt; + margin-top: 15mm; +} + +#pretty-picture { + display: block; + width: 50%; + margin: 0 auto; + background-color:rgb(178, 185, 254); + font-size: 50pt; + border-radius: 25px; + border: 10px double #ffffffe2; +} + +button { + border-radius: 15px; + font-size: 20pt; + background-color: cornsilk; + padding: 10pt; +} + +#select-bar { + font-size: 20pt; + position: relative; + margin-bottom: 15pt; } +input { + font-size: 20pt; + padding: 8pt; +} + +#temp-buttons { + position: relative; + margin-bottom: 15pt; +} + + + +/* Temperature range colors */ + .eighty-degrees { - background-color: red; + color: red; } .seventy-degrees { - background-color: orange; + color: rgb(255, 132, 0); } .sixty-degrees { - background-color: yellow; + color: rgb(255, 247, 0); } .fifty-degrees { - background-color: green; + color: green; } .forty-degrees { - background-color: teal; -} \ No newline at end of file + color: teal; +} + + + From 427899f6e51a11f33cfd30b7a4464181a6dfdd76 Mon Sep 17 00:00:00 2001 From: Laurel S Date: Sun, 12 Dec 2021 20:08:29 -0800 Subject: [PATCH 9/9] Moves comments to end of file --- src/index.js | 182 ++++++++++++++++++++++++++------------------------- 1 file changed, 93 insertions(+), 89 deletions(-) diff --git a/src/index.js b/src/index.js index 034833ef5..74601b01a 100644 --- a/src/index.js +++ b/src/index.js @@ -31,94 +31,6 @@ state.tempBox.classList.add(state.initTempColorClass); state.tempBox.textContent = `${state.temp} Β°F`; -// console.log(state.tempBox.textContent) - - -// this function is responsible for changing two things in one function... - -// const tempStyle = () => { -// // console.log('running tempStyle') -// temp = state.temp; -// tempBox = state.tempBox; -// const landscape = document.getElementById('landscape') - -// tempBox.removeAttribute('class'); - -// if (temp >=80) { -// tempBox.classList.add('eighty-degrees'); -// landscape.textContent = state.landscapes_map['80+'] -// } else if (temp >= 70) { -// tempBox.classList.add('seventy-degrees'); -// landscape.textContent = state.landscapes_map['70+'] -// } else if (temp >= 60) { -// state.tempBox.classList.add('sixty-degrees'); -// landscape.textContent = state.landscapes_map['60+'] -// } else if (temp >= 50) { -// state.tempBox.classList.add('fifty-degrees'); -// landscape.textContent = state.landscapes_map['50+'] -// } else { -// tempBox.classList.add('forty-degrees'); -// landscape.textContent = state.landscapes_map['40+'] -// } -// } - -// HELPER FUNCTIONS? - - -// HOW CAN I ELIMINATE THESE REPEATED CONDITIONALS -// const setTempColor = () => { - -// state.tempBox.removeAttribute('class'); - -// if (state.temp >=80) { -// state.tempBox.classList.add('eighty-degrees'); -// } else if (state.temp >= 70) { -// state.tempBox.classList.add('seventy-degrees'); -// } else if (state.temp >= 60) { -// state.tempBox.classList.add('sixty-degrees'); -// } else if (state.temp >= 50) { -// state.tempBox.classList.add('fifty-degrees'); -// } else { -// state.tempBox.classList.add('forty-degrees'); -// } -// } - -// const setTempLandscape = () => { - -// const landscape = document.getElementById('landscape') - -// if (state.temp >=80) { -// landscape.textContent = state.landscapes_map['80+'] -// } else if (state.temp >= 70) { -// landscape.textContent = state.landscapes_map['70+'] -// } else if (state.temp >= 60) { -// landscape.textContent = state.landscapes_map['60+'] -// } else if (state.temp >= 50) { -// landscape.textContent = state.landscapes_map['50+'] -// } else { -// landscape.textContent = state.landscapes_map['40+'] -// } -// } - -// const setTempColor = () => { - -// state.tempBox.removeAttribute('class'); - -// state.tempBox.classList.add(); -// // if (state.temp >=80) { -// // state.tempBox.classList.add('eighty-degrees'); -// // } else if (state.temp >= 70) { -// // state.tempBox.classList.add('seventy-degrees'); -// // } else if (state.temp >= 60) { -// // state.tempBox.classList.add('sixty-degrees'); -// // } else if (state.temp >= 50) { -// // state.tempBox.classList.add('fifty-degrees'); -// // } else { -// // state.tempBox.classList.add('forty-degrees'); -// // } -// } - - // MAYBE THIS IS BAD BECAUSE I'M RESTYLING EVERY SINGLE TIME TEMP CHANGES // HELPER FUNCTIONS @@ -233,4 +145,96 @@ if (document.readyState !== 'loading') { registerEventHandlers(); } else { document.addEventListener('DOMContentLoaded', registerEventHandlers); -} \ No newline at end of file +} + + + + + + + + + +// this function is responsible for changing two things in one function... + +// const tempStyle = () => { +// // console.log('running tempStyle') +// temp = state.temp; +// tempBox = state.tempBox; +// const landscape = document.getElementById('landscape') + +// tempBox.removeAttribute('class'); + +// if (temp >=80) { +// tempBox.classList.add('eighty-degrees'); +// landscape.textContent = state.landscapes_map['80+'] +// } else if (temp >= 70) { +// tempBox.classList.add('seventy-degrees'); +// landscape.textContent = state.landscapes_map['70+'] +// } else if (temp >= 60) { +// state.tempBox.classList.add('sixty-degrees'); +// landscape.textContent = state.landscapes_map['60+'] +// } else if (temp >= 50) { +// state.tempBox.classList.add('fifty-degrees'); +// landscape.textContent = state.landscapes_map['50+'] +// } else { +// tempBox.classList.add('forty-degrees'); +// landscape.textContent = state.landscapes_map['40+'] +// } +// } + +// HELPER FUNCTIONS? + + +// HOW CAN I ELIMINATE THESE REPEATED CONDITIONALS +// const setTempColor = () => { + +// state.tempBox.removeAttribute('class'); + +// if (state.temp >=80) { +// state.tempBox.classList.add('eighty-degrees'); +// } else if (state.temp >= 70) { +// state.tempBox.classList.add('seventy-degrees'); +// } else if (state.temp >= 60) { +// state.tempBox.classList.add('sixty-degrees'); +// } else if (state.temp >= 50) { +// state.tempBox.classList.add('fifty-degrees'); +// } else { +// state.tempBox.classList.add('forty-degrees'); +// } +// } + +// const setTempLandscape = () => { + +// const landscape = document.getElementById('landscape') + +// if (state.temp >=80) { +// landscape.textContent = state.landscapes_map['80+'] +// } else if (state.temp >= 70) { +// landscape.textContent = state.landscapes_map['70+'] +// } else if (state.temp >= 60) { +// landscape.textContent = state.landscapes_map['60+'] +// } else if (state.temp >= 50) { +// landscape.textContent = state.landscapes_map['50+'] +// } else { +// landscape.textContent = state.landscapes_map['40+'] +// } +// } + +// const setTempColor = () => { + +// state.tempBox.removeAttribute('class'); + +// state.tempBox.classList.add(); +// // if (state.temp >=80) { +// // state.tempBox.classList.add('eighty-degrees'); +// // } else if (state.temp >= 70) { +// // state.tempBox.classList.add('seventy-degrees'); +// // } else if (state.temp >= 60) { +// // state.tempBox.classList.add('sixty-degrees'); +// // } else if (state.temp >= 50) { +// // state.tempBox.classList.add('fifty-degrees'); +// // } else { +// // state.tempBox.classList.add('forty-degrees'); +// // } +// } \ No newline at end of file