From 6ecc5bdc1830a35fd2c0f9705c0aaa3e56f52e95 Mon Sep 17 00:00:00 2001 From: Maria Magana Date: Tue, 15 Jun 2021 20:27:53 -0700 Subject: [PATCH 1/7] created html outline --- index.html | 28 ++++++++++++++++++++++++++++ 1 file changed, 28 insertions(+) diff --git a/index.html b/index.html index e69de29bb..9d3005db3 100644 --- a/index.html +++ b/index.html @@ -0,0 +1,28 @@ + + + + + + Weather Report + + + +
+

Weather Report

+

add more info here

+
+

add sub header

+
+
+

add temp section

+ + +
+
+

add sky section

+ +
+
+ + + From 631b3b046f60784e33cb1c2347a14c3ad0022803 Mon Sep 17 00:00:00 2001 From: Maria Magana Date: Tue, 15 Jun 2021 20:44:58 -0700 Subject: [PATCH 2/7] added to background and font colors --- styles/index.css | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/styles/index.css b/styles/index.css index e69de29bb..6a40c3f7e 100644 --- a/styles/index.css +++ b/styles/index.css @@ -0,0 +1,6 @@ +body { + color: rgb(245, 219, 212); + font-family: Gill Sans, sans-serif, Trebuchet MS, sans-serif; + height: 100vh; + background: linear-gradient(#21265c,#cc5721); +} \ No newline at end of file From 89493e6334e910dc3f00904732acfdcb2f5c37ae Mon Sep 17 00:00:00 2001 From: Maria Magana Date: Tue, 15 Jun 2021 22:02:25 -0700 Subject: [PATCH 3/7] added more styling and sections --- index.html | 21 ++++++++++++--------- styles/index.css | 24 ++++++++++++++++++++++-- 2 files changed, 34 insertions(+), 11 deletions(-) diff --git a/index.html b/index.html index 9d3005db3..07733439b 100644 --- a/index.html +++ b/index.html @@ -1,27 +1,30 @@ - + - Weather Report + Weather Report
-

Weather Report

-

add more info here

+

Weather Report

-

add sub header

+

For the City of

-
-

add temp section

+
+


Change the Temperature!

-
-

add sky section

+
+


Sky View!

+
+


City Name!

+ +
diff --git a/styles/index.css b/styles/index.css index 6a40c3f7e..f47a56335 100644 --- a/styles/index.css +++ b/styles/index.css @@ -1,6 +1,26 @@ body { - color: rgb(245, 219, 212); + color: rgb(252, 245, 243); font-family: Gill Sans, sans-serif, Trebuchet MS, sans-serif; height: 100vh; + text-align: center; background: linear-gradient(#21265c,#cc5721); -} \ No newline at end of file +} + +h1 { + display: block; + margin-left: auto; + margin-right: auto; + width: 40%; + flex-wrap: nowrap; + font-size: 30px; +} + +#city-section, #temp-section, #sky-section{ + text-align: center; + width: 250px; + height: 175px; + border-radius: 14px; + box-sizing: border-box; + background-color: rgb(228, 184, 163); +} + From 0f61f1f62e280e72e00351e94cf05d0221028305 Mon Sep 17 00:00:00 2001 From: Maria Date: Wed, 16 Jun 2021 11:18:05 -0700 Subject: [PATCH 4/7] added drop down button on sky view --- index.html | 9 ++++++++- scripts/index.js | 3 +++ styles/index.css | 13 +++++++++++++ 3 files changed, 24 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 07733439b..be80468f2 100644 --- a/index.html +++ b/index.html @@ -19,7 +19,13 @@


Change the Temperature!


Sky View!

- +

Change the sky view!

+


City Name!

@@ -29,3 +35,4 @@


City Name!

+ diff --git a/scripts/index.js b/scripts/index.js index e69de29bb..2f2bd82ca 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -0,0 +1,3 @@ +const registerEventHandlers = () => { + +} \ No newline at end of file diff --git a/styles/index.css b/styles/index.css index f47a56335..c08da6e24 100644 --- a/styles/index.css +++ b/styles/index.css @@ -24,3 +24,16 @@ h1 { background-color: rgb(228, 184, 163); } +.coldTemp { + color: rgb(72, 38, 110); + background: none; + background-color: rgb(34, 29, 37); +} + +.hotTemp { + color: rgb(72, 38, 110); + background: none; + background-color: rgb(34, 29, 37); +} + + From f8c85fd96bcb35b414d90dc5959940716c314f1f Mon Sep 17 00:00:00 2001 From: Maria Date: Wed, 16 Jun 2021 12:20:50 -0700 Subject: [PATCH 5/7] added change city section --- index.html | 22 +++++++++++++++------- scripts/index.js | 3 --- styles/index.css | 15 +++++++++++++-- 3 files changed, 28 insertions(+), 12 deletions(-) diff --git a/index.html b/index.html index be80468f2..6ab18fdee 100644 --- a/index.html +++ b/index.html @@ -10,14 +10,14 @@

Weather Report

-

For the City of

+

For the City of Seattle

-
+


Change the Temperature!

- - + +
-
+


Sky View!

Change the sky view!

-
+


City Name!

- + + +
+
+

Landscape View

+
+

☁️☁️☁️☁️☁️☁️☁️☁️

+



🌲🪨🌳🌲🪨🌳🌲🪨🌳

+
diff --git a/scripts/index.js b/scripts/index.js index 2f2bd82ca..e69de29bb 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -1,3 +0,0 @@ -const registerEventHandlers = () => { - -} \ No newline at end of file diff --git a/styles/index.css b/styles/index.css index c08da6e24..d23098409 100644 --- a/styles/index.css +++ b/styles/index.css @@ -15,7 +15,7 @@ h1 { font-size: 30px; } -#city-section, #temp-section, #sky-section{ +#citySection, #tempSection, #skySection{ text-align: center; width: 250px; height: 175px; @@ -36,4 +36,15 @@ h1 { background-color: rgb(34, 29, 37); } - +#landscapeView { + text-align: center; + position: absolute; + top: 30%; + left: 50%; + transform: translate(-50%, -50%); + width: 250px; + height: 175px; + border-radius: 14px; + box-sizing:content-box; + background-color: rgb(228, 184, 163); +} From d2e8ffd8b9a2cd45bd2a38f6f113425b0d2ce4af Mon Sep 17 00:00:00 2001 From: Maria Date: Wed, 16 Jun 2021 12:57:08 -0700 Subject: [PATCH 6/7] added some javascript funcs --- index.html | 8 +++++++- scripts/index.js | 39 +++++++++++++++++++++++++++++++++++++++ styles/index.css | 2 +- 3 files changed, 47 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index 6ab18fdee..bb8161c7d 100644 --- a/index.html +++ b/index.html @@ -14,14 +14,19 @@

For the City of Seattle


Change the Temperature!

+

Current Temperature:

+
+ +
+


Sky View!

Change the sky view!

+
diff --git a/scripts/index.js b/scripts/index.js index e69de29bb..9c88ed62a 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -0,0 +1,39 @@ +let currentTemp = 70 + +const changeTemp = () => { + const changeTempUp= document.getElementById("currentTemp"); + state.clickCount += 1; + tempChangeContainer.textContent = state.clickCount + state.name; + console.log(state.clickCount); + + const changeTempDown= document.getElementById("currentTemp"); + state.clickCount += 1; + tempChangeContainer.textContent = state.clickCount + state.name; + console.log(state.clickCount); +} + +const upTemp = () => { + const newTemp = document.createElement("span"); + const tempContainer = document.querySelector("#tempContainer"); + newTemp.textContent = 1 + currentTemp; + tempContainer.appendChild(newTemp); + changeTemp(); +}; + +const downTemp = () => { + const newTemp = document.createElement("span"); + const tempContainer = document.querySelector("#tempContainer"); + newTemp.textContent = currentTemp - 1; + tempContainer.appendChild(newTemp); + changeTemp(); +}; + +const registerEventHandlers = () => { + const upButton = document.querySelector("#tempUpButton"); + upButton.addEventListener("click", upTemp); + const downButton = document.querySelector("#tempDownButton"); + downButton.addEventListener("click", downTemp); + +}; + +document.addEventListener("DOMContentLoaded", registerEventHandlers); \ No newline at end of file diff --git a/styles/index.css b/styles/index.css index d23098409..31694c316 100644 --- a/styles/index.css +++ b/styles/index.css @@ -18,7 +18,7 @@ h1 { #citySection, #tempSection, #skySection{ text-align: center; width: 250px; - height: 175px; + height: 200px; border-radius: 14px; box-sizing: border-box; background-color: rgb(228, 184, 163); From 8a15949871bee16a8e7459830ca29ab69a5b510d Mon Sep 17 00:00:00 2001 From: Maria Magana Date: Sun, 27 Jun 2021 22:45:53 -0700 Subject: [PATCH 7/7] updated to pass all waves --- index.html | 91 ++++++++++++++++++++--------------- scripts/index.js | 123 ++++++++++++++++++++++++++++++++++++----------- styles/index.css | 79 ++++++++++++++++++++++-------- 3 files changed, 207 insertions(+), 86 deletions(-) diff --git a/index.html b/index.html index bb8161c7d..10f816bda 100644 --- a/index.html +++ b/index.html @@ -4,49 +4,62 @@ Weather Report - + -
-

Weather Report

-
-

For the City of Seattle

-
-
-


Change the Temperature!

-

Current Temperature:

-
- - - - -
- -
-


Sky View!

-

Change the sky view!

- -
-
-


City Name!

- -
- -
-
-

Landscape View

-
-

☁️☁️☁️☁️☁️☁️☁️☁️

-



🌲🪨🌳🌲🪨🌳🌲🪨🌳

+
+

Weather Report for Seattle

+
+
+
+
+

Current Temperature:

+ +

65 F

+ +
+
+


Sky View!

+

Change the sky view!

+ + +
+
+

Current City:

+
+ +
+ +
+
+
+
+

Landscape View

+
+

☁️☁️☁️☁️☁️☁️☁️☁️

+
+
+
+

🌲🪨🌳🌲🪨🌳🌲🪨🌳

-
- + + + + + + + + + + + + diff --git a/scripts/index.js b/scripts/index.js index 9c88ed62a..3430ff391 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -1,39 +1,108 @@ -let currentTemp = 70 - -const changeTemp = () => { - const changeTempUp= document.getElementById("currentTemp"); - state.clickCount += 1; - tempChangeContainer.textContent = state.clickCount + state.name; - console.log(state.clickCount); - - const changeTempDown= document.getElementById("currentTemp"); - state.clickCount += 1; - tempChangeContainer.textContent = state.clickCount + state.name; - console.log(state.clickCount); +// TEMP +const changeTemp = (temp) => { + let tempColor = "yellow" + let garden = "👙🌻🌞🩴🏖👙🌻🌞🩴🏖" + if (temp > 85) { + tempColor = "red"; + garden = "👙🌻🌞🩴🏖👙🌻🌞🩴🏖"; + } else if (temp > 75) { + tempColor = "orange"; + garden = "⛲️⛵️🌤🌺🌳⛲️⛵️🌤🌺🌳"; + } else if (temp > 60){ + tempColor = "yellow"; + garden = "🌳🌲🌷☁️💨🌳🌲🌷☁️💨"; + } else if (temp > 50){ + tempColor = "green"; + garden = "☁️🌫🍂🌲🍃☁️🌫🍂🌲🍃"; + } else if (temp < 50){ + tempColor = "blue"; + garden = "🌬🍁❄️☃️🧥🌬🍁❄️☃️🧥"; + } + + const newGarden = document.querySelector("#garden-landscape"); + newGarden.textContent = garden + return tempColor } -const upTemp = () => { - const newTemp = document.createElement("span"); - const tempContainer = document.querySelector("#tempContainer"); - newTemp.textContent = 1 + currentTemp; - tempContainer.appendChild(newTemp); - changeTemp(); +const increaseTemp = () => { + const newTemp = document.querySelector("#temp"); + const newTempValue = parseFloat(newTemp.textContent) + 1; + tempColor = changeTemp(newTempValue); + newTemp.className = tempColor; + newTemp.textContent = String(newTempValue); }; -const downTemp = () => { - const newTemp = document.createElement("span"); - const tempContainer = document.querySelector("#tempContainer"); - newTemp.textContent = currentTemp - 1; - tempContainer.appendChild(newTemp); - changeTemp(); +const decreaseTemp = () => { + const newTemp = document.querySelector("#temp"); + const newTempValue = parseFloat(newTemp.textContent) - 1; + tempColor = changeTemp(newTempValue); + newTemp.className = tempColor; + newTemp.textContent = String(newTempValue); + }; + +// SKY +const skyView = (option) => { + let currentSky = "☀️☀️☀️☀️☀️☀️" + if (option == "sunny") { + currentSky = "☀️☀️☀️☀️☀️☀️"; + } else if (option=="cloudy") { + currentSky = "☁️☁️☁️☁️☁️"; + } else if (option=="rainy") { + currentSky = "🌧🌧🌧🌧🌧"; + } else if (option=="snowy") { + currentSky = "🌨❄️🌨❄️🌨❄️"; + } + const changeSky = document.querySelector("#garden-sky"); + changeSky.textContent = currentSky +} + +const selectSky = () => { + const sky_selection = document.querySelector("#sky-dropdown") + skyView(sky_selection.value) +} + + +// CITY +const changeCity = (event) => { + let inputCity = document.querySelector("#city-name").value; + let mainHeading = document.getElementById("default-city"); + if (!inputCity == "") { + mainHeading.innerHTML = `Weather Report for: ${inputCity}`; + inputCity.value = ""; + } +}; + +const resetCity = (event) => { + let mainHeading = document.getElementById("default-city"); + mainHeading.innerHTML = "Weather Report for Seattle"; +}; + + +// EVENT HANDLERS const registerEventHandlers = () => { const upButton = document.querySelector("#tempUpButton"); - upButton.addEventListener("click", upTemp); + upButton.addEventListener("click", increaseTemp); + const downButton = document.querySelector("#tempDownButton"); - downButton.addEventListener("click", downTemp); + downButton.addEventListener("click", decreaseTemp); + + const skySelector = document.querySelector("#sky-dropdown") + console.log(skySelector) + skySelector.addEventListener("change", selectSky) + const updateCity = document.querySelector("#change-city") + updateCity.addEventListener("click", changeCity); + + const resetCityName = document.querySelector("#reset-city") + resetCityName.addEventListener("click", resetCity); }; -document.addEventListener("DOMContentLoaded", registerEventHandlers); \ No newline at end of file +document.addEventListener("DOMContentLoaded", registerEventHandlers); + + + + + + diff --git a/styles/index.css b/styles/index.css index 31694c316..b41a0654f 100644 --- a/styles/index.css +++ b/styles/index.css @@ -13,38 +13,77 @@ h1 { width: 40%; flex-wrap: nowrap; font-size: 30px; + text-align: center; +} + +h2 { + color: rgb(238, 231, 231) +} + +.box-content { + display: flex; + flex-direction: row; + justify-content: center; +} + +#city-name { + color: rgb(238, 238, 245); + display: block; + margin-left: auto; + margin-right: auto; + width: 40%; + flex-wrap: nowrap; + font-size: 25px; + text-align: center; } -#citySection, #tempSection, #skySection{ +.garden-box { text-align: center; width: 250px; + margin-top: 150px; + margin-left: 15px; + height: 300px; + border-radius: 14px; + padding: 10px; + box-sizing: border-box; + background-color: rgb(228, 184, 163); +} + +.left-boxes { + text-align: center; + width: 250px; + margin-bottom: 15px; + margin-right: 15px; height: 200px; border-radius: 14px; + padding: 10px; box-sizing: border-box; background-color: rgb(228, 184, 163); } -.coldTemp { - color: rgb(72, 38, 110); - background: none; - background-color: rgb(34, 29, 37); +.section-container { + display: flex; + flex-direction: column; + } -.hotTemp { - color: rgb(72, 38, 110); - background: none; - background-color: rgb(34, 29, 37); +.red { + color: rgb(133, 10, 10); } -#landscapeView { - text-align: center; - position: absolute; - top: 30%; - left: 50%; - transform: translate(-50%, -50%); - width: 250px; - height: 175px; - border-radius: 14px; - box-sizing:content-box; - background-color: rgb(228, 184, 163); +.orange { + color: rgb(241, 111, 3) } + +.yellow { + color: rgb(252, 218, 70); +} + +.green { + color: rgb(19, 184, 19) +} + +.blue { + color: rgb(8, 63, 182) +} +