From 40fff391ca3ff1522e7568414d101c65daa488fb Mon Sep 17 00:00:00 2001 From: Jessica Date: Wed, 8 Dec 2021 15:14:09 -0800 Subject: [PATCH 1/8] Update wireframe --- index.html | 33 +++++++++++++++++++++++++ styles/index.css | 64 ++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 97 insertions(+) diff --git a/index.html b/index.html index e69de29bb..6bc0719f8 100644 --- a/index.html +++ b/index.html @@ -0,0 +1,33 @@ + + + + + + + Weather Report + + + +
+

Weather Report for the city of ________

+
+
+
+

TEMPERATURE

+
+
+

SKY

+
+
+

LOCATION

+
+
+

I'M GOING TO BE A PICTURE

+
+
+ + + \ No newline at end of file diff --git a/styles/index.css b/styles/index.css index e69de29bb..916589c09 100644 --- a/styles/index.css +++ b/styles/index.css @@ -0,0 +1,64 @@ +body { + background-image: linear-gradient(to bottom, #051937, #004d7a, #008793, #00bf72, #a8eb12); + font-family: sans-serif; +} + +#temperature { + grid-area: temperature; +} +#sky { + grid-area: sky; +} +#location { + grid-area: location; +} +#garden { + grid-area: garden; +} + +main { + display: grid; + /* column-gap: 10%; */ + row-gap: 10px; + grid-template-rows: 20%, 20%, 20%, 20%, 20%; + grid-template-columns: 15%, 20%, 5%, 45%, 15%; + grid-template-areas: + ". . . . ." + ". temperature . garden ." + ". sky . garden ." + ". location . garden ." + ". . . . ."; + +} + +main section { + border: solid; + border-radius: 25px +} + +main section #small_box { + border-radius: 15px +} + +header { + font-size: 40px; + font-weight: bolder; + text-align: center; +} + + +.footer-quote { + display: flex; + flex-direction: column; + /* justify-content: center; */ + /* align-content: center; */ + /* max-width: none; */ +} + +.footer-quote figcaption { + margin: 0%; + align-self: center; +} +.footer-quote blockquote { + align-self: center +} \ No newline at end of file From ba0ae1f4fc14039a60baef7f0207de9020fc56c4 Mon Sep 17 00:00:00 2001 From: Jessica Date: Wed, 8 Dec 2021 16:38:29 -0800 Subject: [PATCH 2/8] Updated content --- index.html | 5 +++++ scripts/index.js | 4 ++++ styles/index.css | 14 +++++--------- 3 files changed, 14 insertions(+), 9 deletions(-) diff --git a/index.html b/index.html index 6bc0719f8..4dc3638ae 100644 --- a/index.html +++ b/index.html @@ -14,6 +14,8 @@

TEMPERATURE

+

32

+

SKY

@@ -29,5 +31,8 @@

I'M GOING TO BE A PICTURE

When life throws you a rainy day, jump in the puddles.
Winnie the Pooh
+ \ No newline at end of file diff --git a/scripts/index.js b/scripts/index.js index e69de29bb..5a7280716 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -0,0 +1,4 @@ +const temperature = document.getElementById("temperature"); +let currentTemp = 32; + +const upButton = document.createElement("button"); diff --git a/styles/index.css b/styles/index.css index 916589c09..68103ab96 100644 --- a/styles/index.css +++ b/styles/index.css @@ -18,7 +18,6 @@ body { main { display: grid; - /* column-gap: 10%; */ row-gap: 10px; grid-template-rows: 20%, 20%, 20%, 20%, 20%; grid-template-columns: 15%, 20%, 5%, 45%, 15%; @@ -28,16 +27,16 @@ main { ". sky . garden ." ". location . garden ." ". . . . ."; - } main section { border: solid; - border-radius: 25px + border-radius: 15px } -main section #small_box { - border-radius: 15px +.small_box { + background-color: #00A383; + background-color: #004D7A; } header { @@ -46,19 +45,16 @@ header { text-align: center; } - .footer-quote { display: flex; flex-direction: column; - /* justify-content: center; */ - /* align-content: center; */ - /* max-width: none; */ } .footer-quote figcaption { margin: 0%; align-self: center; } + .footer-quote blockquote { align-self: center } \ No newline at end of file From c43ed81aebc0c4bd88c38a0e2d094a86f70ef763 Mon Sep 17 00:00:00 2001 From: Jessica Date: Wed, 8 Dec 2021 23:02:28 -0800 Subject: [PATCH 3/8] Add temp control buttons --- index.html | 10 +++++++--- scripts/index.js | 12 +++++++++++- styles/index.css | 34 +++++++++++++++++++++++++++++++++- 3 files changed, 51 insertions(+), 5 deletions(-) diff --git a/index.html b/index.html index 4dc3638ae..c8d861056 100644 --- a/index.html +++ b/index.html @@ -12,9 +12,13 @@

Weather Report for the city of ________

-
-

TEMPERATURE

-

32

+
+

TEMPERATURE

+
+ + +
+
32
diff --git a/scripts/index.js b/scripts/index.js index 5a7280716..fadd71929 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -1,4 +1,14 @@ -const temperature = document.getElementById("temperature"); +const increaseTempButton = document.getElementById("upButton"); +const decreaseTempButton = document.getElementById("downButton"); + +const deltaTemp = function (delta) { + const temperature = document.getElementById("tempValue"); + temperature.textContent = parseInt(temperature.textContent) + delta; +}; + +increaseTempButton.addEventListener("click", () => deltaTemp(1)); +decreaseTempButton.addEventListener("click", () => deltaTemp(-1)); + let currentTemp = 32; const upButton = document.createElement("button"); diff --git a/styles/index.css b/styles/index.css index 68103ab96..c7c687f8c 100644 --- a/styles/index.css +++ b/styles/index.css @@ -57,4 +57,36 @@ header { .footer-quote blockquote { align-self: center -} \ No newline at end of file +} + +#tempTitle { + grid-area: tempTitle; +} + +#tempButtons { + grid-area: tempButtons; +} + +#tempValue { + grid-area: tempValue; +} + +#temperature { + display: grid; + grid-template-rows: 50%, 50%; + grid-template-columns: 50%, 50%; + /* grid-template-areas: + ". . . ." + "tempTitle tempTitle tempTitle tempTitle" + ". tempButtons . tempValue ." + ". tempButtons . tempValue ."; */ + grid-template-areas: + "tempTitle tempTitle" + "tempButtons tempValue"; +} + +#tempButtons { + display: flex; + flex-direction: column; +} + From 20b6d4128ae1c8fd3f4dac22063d9de76d5722b0 Mon Sep 17 00:00:00 2001 From: Jessica Date: Fri, 10 Dec 2021 14:34:04 -0800 Subject: [PATCH 4/8] Add sky dropdown and options --- index.html | 15 +++++++++++-- scripts/index.js | 57 ++++++++++++++++++++++++++++++++++++++++++++++-- styles/index.css | 4 ++++ 3 files changed, 72 insertions(+), 4 deletions(-) diff --git a/index.html b/index.html index c8d861056..99daf621e 100644 --- a/index.html +++ b/index.html @@ -18,18 +18,29 @@

TEMPERATURE

-
32
+
69
+
+ +

SKY

LOCATION

-

I'M GOING TO BE A PICTURE

+
☁️☁️ ☁️ ☁️☁️ ☁️ 🌤 ☁️ ☁️☁️
+

Weather Garden

+
🌲🌲⛄️🌲⛄️🍂🌲🍁🌲🌲⛄️🍂🌲
+