From 90a1f1f10ad3f2faf56630cff8e3ff9e0bb65980 Mon Sep 17 00:00:00 2001 From: Lacy Draper Date: Tue, 15 Jun 2021 08:41:08 -0700 Subject: [PATCH 1/8] created 3 main sections for sky/city name, weather garden, temp display --- index.html | 41 +++++++++++++++++++++++++++++++++++++++++ 1 file changed, 41 insertions(+) diff --git a/index.html b/index.html index e69de29bb..1ed31255c 100644 --- a/index.html +++ b/index.html @@ -0,0 +1,41 @@ + + + + + + + + +
+
+

SKY

+

Hey, what type of sky is happening out there?

+ + +
+

CITY NAME

+

Content

+
+
+
+

WEATHER GARDEN

+

Content

+
+
+
+ +
+
+
+ +
+ + + \ No newline at end of file From fbf37dac25400b0d91c6d17dc2f54df736e152c7 Mon Sep 17 00:00:00 2001 From: Lacy Draper Date: Tue, 15 Jun 2021 09:10:47 -0700 Subject: [PATCH 2/8] added drop down menus and user input tags to sky container and city-name container --- index.html | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/index.html b/index.html index 1ed31255c..f7f089618 100644 --- a/index.html +++ b/index.html @@ -1,5 +1,5 @@ - + @@ -8,11 +8,12 @@ +

WEATHER REPORT

SKY

Hey, what type of sky is happening out there?

- @@ -21,9 +22,11 @@

SKY

CITY NAME

-

Content

+

Which city are you looking for?

+ +
-
+

WEATHER GARDEN

Content

From 9b7db030facf6cc8066c33fb81f3310ddd27090e Mon Sep 17 00:00:00 2001 From: Lacy Draper Date: Tue, 15 Jun 2021 20:26:19 -0700 Subject: [PATCH 3/8] created temp increase and decrease function in temp-container --- index.html | 60 ++++++++++++++++++++++++++---------------------- scripts/index.js | 44 +++++++++++++++++++++++++++++++++++ 2 files changed, 77 insertions(+), 27 deletions(-) diff --git a/index.html b/index.html index f7f089618..da806c695 100644 --- a/index.html +++ b/index.html @@ -1,44 +1,50 @@ - + -

WEATHER REPORT

-
-
-

SKY

-

Hey, what type of sky is happening out there?

- -
-
-

CITY NAME

-

Which city are you looking for?

- - -
+
+

WEATHER REPORT

+ Weather for + + + +
+

SKY

+

Hey, what type of sky is happening out there?

+ + +
+

CITY NAME

+ + +
-
+

WEATHER GARDEN

-

Content

-
-
-
- -
+

lists of emojos go here that depend on the temperature

+
-
+
+

TEMPERATURE

+ + 70 +
+ + \ No newline at end of file diff --git a/scripts/index.js b/scripts/index.js index e69de29bb..479deb0a7 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -0,0 +1,44 @@ + +const state = { + temperature : 70 +}; + +const increaseTemp = (event) => { + state.temperature += 1; + temperature.textContent = `${state.temperature}` +}; + +const decreaseTemp = () => { + state.temperature -= 1; + temperature.textContent = `${state.temperature}` +} + +const changeWeatherEmojis = () => { + if (state.temperature >= 80); + console.log("🌵__🐍_🦂_🌵🌵__🐍_🏜_🦂"); + if (state.temperature < 80 && state.temperature >=70); + console.log("🌸🌿🌼__🌷🌻🌿_☘️🌱_🌻🌷"); + if (state.temperature < 70 && state.temperature >= 60); + console.log("🌾🌾_🍃_🪨__🛤_🌾🌾🌾_🍃"); + if (state.temperature < 60); + console.log("🌲🌲⛄️🌲⛄️🍂🌲🍁🌲🌲⛄️🍂🌲") +}; + + +const skySelectChanger = () => { + const result = document.querySelector('.result'); + result.textContent = `You like ${event.target.value}`; +}; + + +const registerEventHandlers = () => { + const increaseTemp = document.querySelector("#increaseTemp"); + increaseTemp.addEventListener("click",increaseTemp); + + const decreaseTemp = document.querySelector("#decreaseTemp"); + decreaseTemp.addEventListener("click", decreaseTemp); + + const skySelecter = document.querySelector('#changeSkyColor'); + skySelectorChange.addEventListener("change",skySelectChanger ) + +} \ No newline at end of file From 3fbafb0936cc89864bdb8c83812c5336f9b30755 Mon Sep 17 00:00:00 2001 From: Lacy Draper Date: Wed, 16 Jun 2021 08:49:51 -0700 Subject: [PATCH 4/8] created gardenWeatherEmoji to update garden container on HTML --- index.html | 24 ++++++++++------- scripts/index.js | 67 ++++++++++++++++++++++++++++++++++-------------- styles/index.css | 19 ++++++++++++++ 3 files changed, 82 insertions(+), 28 deletions(-) diff --git a/index.html b/index.html index da806c695..d92ca9b20 100644 --- a/index.html +++ b/index.html @@ -2,7 +2,7 @@ - + @@ -25,12 +25,14 @@

SKY

+

CITY NAME

+

WEATHER GARDEN

@@ -39,15 +41,12 @@

WEATHER GARDEN

- -

TEMPERATURE

70 - -
+
diff --git a/scripts/index.js b/scripts/index.js index 9720462bd..d5a2cc12c 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -3,34 +3,39 @@ const state = { temperature : 70 }; +const gardenWeatherEmojis = () => { + const gardenLandscape = document.querySelector("#landscape"); + + if (state.temperature >= 80) { + gardenLandscape.textContent = "🌵__🐍_🦂_🌵🌵__🐍_🏜_🦂"; + } else if (state.temperature < 80 && state.temperature >=70) { + gardenLandscape.textContent = "🌸🌿🌼__🌷🌻🌿_☘️🌱_🌻🌷"; + } else if (state.temperature < 70 && state.temperature >= 60) { + gardenLandscape.textContent= "🌾🌾_🍃_🪨__🛤_🌾🌾🌾_🍃"; + } else if (state.temperature < 60) { + gardenLandscape.textContent= "🌲🌲⛄️🌲⛄️🍂🌲🍁🌲🌲⛄️🍂🌲"; + } +}; +// not working +// function to update id=temperature in tempContainer const increaseTemp = () => { console.log("increaseTemp called") const temperature = document.querySelector("#temperature") state.temperature += 1; temperature.textContent = `${state.temperature}` + gardenWeatherEmojis() }; - +// not working +// function to update id=temperature in tempContainer const decreaseTemp = () => { console.log("decreaseTemp called") const temperature = document.querySelector("#temperature") state.temperature -= 1; temperature.textContent = `${state.temperature}` }; +// not working +// function to update emojis in weatherGardenContainer by id=landscape -const gardenWeatherEmojis = () => { - const gardenLandscape = document.querySelector("#landscape"); - const temperature = document.querySelector("#temperature") - - if (temperature >= 80) { - gardenLandscape.textContent = "🌵__🐍_🦂_🌵🌵__🐍_🏜_🦂"; - } else if (temperature < 80 && state.temperature >=70) { - gardenLandscape.textContent = "🌸🌿🌼__🌷🌻🌿_☘️🌱_🌻🌷"; - } else if (temperature < 70 && state.temperature >= 60) { - gardenLandscape.textContent= "🌾🌾_🍃_🪨__🛤_🌾🌾🌾_🍃"; - } else if (temperature < 60){ - gardenLandscape.textContent= "🌲🌲⛄️🌲⛄️🍂🌲🍁🌲🌲⛄️🍂🌲"; - } -}; // const updateSky = () => { // console.log("updateSkyCalled") // const inputSky = document.querySelector("#skySelect").value; @@ -55,13 +60,14 @@ const gardenWeatherEmojis = () => { // }; +//function that registers all event handlers when called const registerEventHandlers = () => { console.log("registerEventHandlers called") - const increaseTemp = document.querySelector("#increaseTemp"); - increaseTemp.addEventListener("click",increaseTemp); + const increaseTempButton = document.querySelector("#increaseTemp"); + increaseTempButton.addEventListener("click",increaseTemp); - const decreaseTemp = document.querySelector("#decreaseTemp"); - decreaseTemp.addEventListener("click", decreaseTemp); + const decreaseTempButton = document.querySelector("#decreaseTemp"); + decreaseTempButton.addEventListener("click", decreaseTemp); From 9e8ee2e6dfa6816caf14dda5656b92905409aaef Mon Sep 17 00:00:00 2001 From: Lacy Draper Date: Wed, 16 Jun 2021 11:53:04 -0700 Subject: [PATCH 6/8] created event handler function to update sky emojis responding to user drop down menu in sky container --- index.html | 3 ++- scripts/index.js | 59 ++++++++++++++++++++++++++++-------------------- 2 files changed, 36 insertions(+), 26 deletions(-) diff --git a/index.html b/index.html index 62c5d74a1..2db5b0eea 100644 --- a/index.html +++ b/index.html @@ -14,7 +14,6 @@

WEATHER REPORT

Weather for -

SKY

Hey, what type of sky is happening out there?

@@ -23,7 +22,9 @@

SKY

+ +
diff --git a/scripts/index.js b/scripts/index.js index d5a2cc12c..5d58b6f5a 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -2,8 +2,9 @@ const state = { temperature : 70 }; - +//function to update garden emojis const gardenWeatherEmojis = () => { + console.log("gardenWeatherEmojis called") const gardenLandscape = document.querySelector("#landscape"); if (state.temperature >= 80) { @@ -16,7 +17,33 @@ const gardenWeatherEmojis = () => { gardenLandscape.textContent= "🌲🌲⛄️🌲⛄️🍂🌲🍁🌲🌲⛄️🍂🌲"; } }; -// not working + +const updateSky = () => { + console.log("updateSkyCalled") + // gardenSky.value allows us access what the user has chosen in dropdown menu + const gardenSky = document.querySelector("#skySelect"); + let sky = ''; + // skyColor values need to coordinate with CSS file for color values + let skyColor = ''; + if (gardenSky.value === "sun"){ + sky = '🔥🔥🔥🔥☀🔥🔥🔥☀🔥🔥🔥🔥'; + skyColor = 'sunny'; + } else if (gardenSky.value === "clouds"){ + sky = '🌥🌥🌥🌥 🌥🌥🌥🌥 🌥🌥🌥🌥'; + skyColor = "cloudy"; + } else if (gardenSky.value === "clear") { + sky = '🌎🌎🌎 🌎🌎🌎 🌎🌎🌎 🌎🌎🌎'; + skyColor = "clear"; + } else if (gardenSky.value === 'rain') { + sky = "🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊"; + skyColor = "rainy"; + } + console.log(gardenSky,"gardenSky value") + const emojiPlacement = document.querySelector("#emojiSky") + emojiPlacement.textContent = sky; +}; + + // function to update id=temperature in tempContainer const increaseTemp = () => { console.log("increaseTemp called") @@ -25,39 +52,19 @@ const increaseTemp = () => { temperature.textContent = `${state.temperature}` gardenWeatherEmojis() }; -// not working + // function to update id=temperature in tempContainer const decreaseTemp = () => { console.log("decreaseTemp called") const temperature = document.querySelector("#temperature") state.temperature -= 1; temperature.textContent = `${state.temperature}` + gardenWeatherEmojis() }; // not working // function to update emojis in weatherGardenContainer by id=landscape -// const updateSky = () => { -// console.log("updateSkyCalled") -// const inputSky = document.querySelector("#skySelect").value; -// const skyContainer = document.getElementById("sky"); -// let sky = ''; -// let skyColor = ''; -// if (inputSky === "Brilliant Sun"); -// sky = '🔥🔥🔥🔥☀🔥🔥🔥☀🔥🔥🔥🔥'; -// skyColor = 'sunny' -// if(inputSky === "Dashes of Clouds"); -// sky = '🌥🌥🌥🌥 🌥🌥🌥🌥 🌥🌥🌥🌥'; -// skyColor = "cloudy" -// if (inputSky === "Clear"); -// sky = '🌎🌎🌎 🌎🌎🌎 🌎🌎🌎 🌎🌎🌎' -// skyColor = "clear" -// if (inputSky === 'Rain Drops'); -// sky = "🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊" -// skyColor = "rainy" -// skyContainer.textContent = sky; -// const gardenContent = document.querySelector("#gardenContent"); -// gardenContent.classList = `gardenContent ${skyColor}`; -// }; + //function that registers all event handlers when called @@ -69,6 +76,8 @@ const registerEventHandlers = () => { const decreaseTempButton = document.querySelector("#decreaseTemp"); decreaseTempButton.addEventListener("click", decreaseTemp); + const updateSkyDropDown = document.querySelector("#skySelect") + updateSkyDropDown.addEventListener("change",updateSky) // updateSky() From 9791c8c2772963cf5bfc941671a374edff8e3ee3 Mon Sep 17 00:00:00 2001 From: Lacy Draper Date: Wed, 16 Jun 2021 12:42:08 -0700 Subject: [PATCH 7/8] added css file --- index.html | 13 ++++++------- scripts/index.js | 1 + styles/index.css | 35 +++++++++++++++++++++-------------- 3 files changed, 28 insertions(+), 21 deletions(-) diff --git a/index.html b/index.html index 2db5b0eea..bdac4330a 100644 --- a/index.html +++ b/index.html @@ -2,11 +2,10 @@ - + - + +
@@ -14,7 +13,7 @@

WEATHER REPORT

Weather for -
+

SKY

Hey, what type of sky is happening out there?

@@ -42,7 +41,7 @@

WEATHER GARDEN

-
+

TEMPERATURE

70 diff --git a/scripts/index.js b/scripts/index.js index 5d58b6f5a..a14237bca 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -25,6 +25,7 @@ const updateSky = () => { let sky = ''; // skyColor values need to coordinate with CSS file for color values let skyColor = ''; + // gardenSky.value allows us access what the user has chosen in dropdown menu if (gardenSky.value === "sun"){ sky = '🔥🔥🔥🔥☀🔥🔥🔥☀🔥🔥🔥🔥'; skyColor = 'sunny'; diff --git a/styles/index.css b/styles/index.css index b862035f2..4c5ee2cbf 100644 --- a/styles/index.css +++ b/styles/index.css @@ -1,19 +1,26 @@ - - -/* .cloudy { - background-color: lightgrey; +h2 { + color:rgb(60, 115, 160) } - -.sunny { - background-color: palegoldenrod; +h1 { + font-weight: 600; + color:rgba(28, 53, 106, 0.92) } - +body { + display: grid; + grid-template-columns: 1fr 2fr; + grid-template-rows: auto auto auto auto; + grid-gap: 1rem; -.rainy { - background-color: rgb(176, 224, 238); + font-family: "Rubik", sans-serif; + font-size: 18px; + background-color: #bce4eb; + margin: 2rem; } - -.clear { - background-color: rgb(224, 240, 151); +.tempContainer, +.skyContainer, +.cityNameContainer { + + border-radius: 8px; + padding: 2rem; + background-color: rgb(242, 205, 103); } - */ \ No newline at end of file From 9c20f1eacb57a9d64c3c40dc1e3a3ac1b981f19c Mon Sep 17 00:00:00 2001 From: Lacy Draper Date: Wed, 16 Jun 2021 13:55:22 -0700 Subject: [PATCH 8/8] added --- index.html | 4 ++-- styles/index.css | 14 ++++++++++++++ 2 files changed, 16 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index bdac4330a..f3b38728a 100644 --- a/index.html +++ b/index.html @@ -12,6 +12,7 @@

WEATHER REPORT

Weather for +

SKY

@@ -21,7 +22,6 @@

SKY

-
@@ -31,7 +31,7 @@

CITY NAME

- +

WEATHER GARDEN

diff --git a/styles/index.css b/styles/index.css index 4c5ee2cbf..c6d2bea28 100644 --- a/styles/index.css +++ b/styles/index.css @@ -24,3 +24,17 @@ body { padding: 2rem; background-color: rgb(242, 205, 103); } +.mainHeader { + color: rgb(216, 76, 76); + grid-column: span 3; + display: flex; + align-items: center; + margin: 2rem auto 3rem 0; + +} + +.mainHeader > h1 { + margin-right: 2rem; + font-size: 3em; +} + \ No newline at end of file