From a029f16ca422b2b18cc781595ae22e9b9a59d5eb Mon Sep 17 00:00:00 2001 From: Alie Ibarra Date: Wed, 29 Dec 2021 09:21:38 -0800 Subject: [PATCH 1/5] Prior to Break --- index.html | 34 +++++++++++++++++++ src/index.js | 85 ++++++++++++++++++++++++++++++++++++++++++++++++ styles/index.css | 72 ++++++++++++++++++++++++++++++++++++++++ 3 files changed, 191 insertions(+) diff --git a/index.html b/index.html index 68b320b9a..0a14cdfcc 100644 --- a/index.html +++ b/index.html @@ -5,8 +5,42 @@ Weather Report + +

โ˜€๏ธ๐ŸŒง โ„๏ธ Weather Report โ„๏ธ ๐ŸŒงโ˜€๏ธ

+ +
+ +
+

The Sky in

+
+
+
+ +
+ โ˜„๏ธ ๐Ÿ‰ โ˜€๏ธ ๐Ÿ‰ โ˜„๏ธ + ๐ŸŒˆ โ˜๏ธ โ˜€๏ธ โ˜๏ธ ๐Ÿฆ… + โ˜๏ธ โ˜๏ธ โ›…๏ธ โ˜๏ธ โ˜๏ธ + ๐ŸŒง ๐Ÿ’ฆ ๐ŸŒง ๐Ÿ’ฆ ๐ŸŒง + ๐ŸŒจ โ„๏ธ ๐ŸŒจ โ„๏ธ ๐ŸŒจ +
+
+
+ + +

The Weather in {cityName} is...

+
+ + +
+

โ—๏ธ PENDING DATA โ—๏ธ

+
+ +
+ + + \ No newline at end of file diff --git a/src/index.js b/src/index.js index e69de29bb..d41c8aa3d 100644 --- a/src/index.js +++ b/src/index.js @@ -0,0 +1,85 @@ +//DROP DOWN +/* When the user clicks on the button, +toggle between hiding and showing the dropdown content */ +const skyOptions =()=> { + document.getElementById("myDropdown").classList.toggle("show"); +} + +// Close the dropdown menu if the user clicks outside of it +window.onclick = function(event) { + if (!event.target.matches('.dropbtn')) { + var dropdowns = document.getElementsByClassName("dropdown-content"); + var i; + for (i = 0; i < dropdowns.length; i++) { + var openDropdown = dropdowns[i]; + if (openDropdown.classList.contains('show')) { + openDropdown.classList.remove('show'); + } + } + } +} + + + +//----------TEMPERATURE ELEMENTS +//Temp Adjustment Features +const tempState = { + tempCount: 0 +}; + +const newTemp = document.createElement("span"); + +//function to change the color & image based on tempState.tempCount +const changeColorByTemp = () => { + if (tempState.tempCount >= 10) { + tempCount.style.color = "brown"; + newTemp.textContent = "๐Ÿœ ๐Ÿœ ๐Ÿœ ๐ŸŒต ๐ŸŒต ๐Ÿฆ‚ ๐ŸŒต ๐ŸŒต ๐Ÿฆ‚ ๐ŸŒต ๐ŸŒต ๐Ÿœ ๐Ÿœ ๐Ÿœ" + } else if (tempState.tempCount >= 8){ + tempCount.style.color = "orange"; + newTemp.textContent = "๐ŸŒ‹ ๐ŸŒ‹ ๐ŸŒ‹ ๐Ÿ ๐Ÿ ๐Ÿ›ซ ๐Ÿ ๐Ÿ ๐Ÿ›ฌ ๐Ÿ ๐Ÿ ๐ŸŒ‹ ๐ŸŒ‹ ๐ŸŒ‹" + } else if (tempState.tempCount >= 7){ + tempCount.style.color = "forestgreen"; + newTemp.textContent = "โ›ฐ โ›ฐ โ›ฐ ๐ŸŒณ ๐ŸŒณ ๐Ÿก ๐ŸŒณ ๐ŸŒณ ๐Ÿก ๐ŸŒณ ๐ŸŒณ โ›ฐ โ›ฐ โ›ฐ" + } else if (tempState.tempCount >= 5){ + tempCount.style.color = "maroon"; + newTemp.textContent = "๐Ÿ” ๐Ÿ” ๐Ÿ” ๐ŸŒฒ ๐ŸŒฒ ๐Ÿ  ๐ŸŒฒ ๐ŸŒฒ ๐Ÿ  ๐ŸŒฒ ๐ŸŒฒ ๐Ÿ” ๐Ÿ” ๐Ÿ” " + } else if (tempState.tempCount >= 0) { + tempCount.style.color = "dodgerblue"; + newTemp.textContent = "๐Ÿ—ป ๐Ÿ—ป ๐Ÿ—ป โ˜ƒ๏ธ โ˜ƒ๏ธ ๐Ÿ˜ โ˜ƒ๏ธ โ˜ƒ๏ธ ๐Ÿ˜ โ˜ƒ๏ธ โ˜ƒ๏ธ ๐Ÿ—ป ๐Ÿ—ป ๐Ÿ—ป" + }else { + tempCount.style.color = "rebeccapurple"; + newTemp.textContent = "๐Ÿปโ€โ„๏ธ TOO ๐Ÿง COLD ๐Ÿฅถ FOR ๐Ÿง PEOPLE ๐Ÿปโ€โ„๏ธ" + }; +} + +const updateTempCount = () => { + const tempCountElement = document.querySelector("#tempCount"); + tempCountElement.textContent = `The Temperature is: ${tempState.tempCount} \xB0F` +}; + +//Tempt goes up +const addTempButton = document.querySelector("#addTempButton"); + +const addTemp = () => { + const tempContainer = document.querySelector("#tempContainer"); + tempState.tempCount +=1; + changeColorByTemp(); + tempContainer.appendChild(newTemp); + updateTempCount(); +}; + +//Tempt goes down +const subTempButton = document.querySelector("#subTempButton"); + +const subTemp = () => { + const newTemp = document.createElement("span"); + const tempContainer = document.querySelector("#tempContainer"); + tempState.tempCount-=1; + changeColorByTemp(); + updateTempCount(); +}; +//Temp Event Listeners +addTempButton.addEventListener('click', addTemp) +subTempButton.addEventListener('click', subTemp) + +//----------SKY ELEMENTS diff --git a/styles/index.css b/styles/index.css index e69de29bb..c3441bb8d 100644 --- a/styles/index.css +++ b/styles/index.css @@ -0,0 +1,72 @@ +body { + background: seashell; + text-align: center; + } +h1 { + display: flexbox; + text-align: center; +} + +button { + font-size: 16px; + margin: 10px; + display: flex; + flex-direction: row; + background-color: black; + font-weight: 500; + justify-content: center; + +} +section { + display: flex; + flex-direction: row; + justify-content: center; +} + +.warmer { + color: brown; + ; +} +.colder { + color: dodgerblue;; +} + +.sky { + color: whitesmoke +} + +/* Dropdown Button */ +.dropbtn { + background-color: black; + color: white; + padding: 16px; + font-size: 16px; + border: none; + cursor: pointer; +} + + +/* The container
- needed to position the dropdown content */ +.dropdown { + position: relative; + display: inline-block; +} + +/* Dropdown Content (Hidden by Default) */ +.dropdown-content { + display: none; + position: absolute; + background-color: whitesmoke; + min-width: 160px; + z-index: 1; +} + +/* Inside the dropdown */ +.dropdown-content a { + color: black; + padding: 12px 16px; + display: block; +} + +/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */ + .show {display:block;} \ No newline at end of file From 132d1fd70355da07b797ab3fa0b84de4f0c13f84 Mon Sep 17 00:00:00 2001 From: Alie Ibarra Date: Wed, 29 Dec 2021 09:46:40 -0800 Subject: [PATCH 2/5] Create sky dorp down --- index.html | 25 ++++++++++++------------- src/index.js | 21 --------------------- styles/index.css | 38 +++----------------------------------- 3 files changed, 15 insertions(+), 69 deletions(-) diff --git a/index.html b/index.html index 0a14cdfcc..4f99edf58 100644 --- a/index.html +++ b/index.html @@ -11,21 +11,20 @@

โ˜€๏ธ๐ŸŒง โ„๏ธ Weather Report โ„๏ธ ๐ŸŒงโ˜€๏ธ

- +

NEED USER TO INPUT CITY NAME HERE

-

The Sky in

+

The Sky looks like...

-
-
- -
- โ˜„๏ธ ๐Ÿ‰ โ˜€๏ธ ๐Ÿ‰ โ˜„๏ธ - ๐ŸŒˆ โ˜๏ธ โ˜€๏ธ โ˜๏ธ ๐Ÿฆ… - โ˜๏ธ โ˜๏ธ โ›…๏ธ โ˜๏ธ โ˜๏ธ - ๐ŸŒง ๐Ÿ’ฆ ๐ŸŒง ๐Ÿ’ฆ ๐ŸŒง - ๐ŸŒจ โ„๏ธ ๐ŸŒจ โ„๏ธ ๐ŸŒจ -
+
+
@@ -38,7 +37,7 @@

The Weather in {cityName} is...

โ—๏ธ PENDING DATA โ—๏ธ

-
+
diff --git a/src/index.js b/src/index.js index d41c8aa3d..50a7d603d 100644 --- a/src/index.js +++ b/src/index.js @@ -1,24 +1,3 @@ -//DROP DOWN -/* When the user clicks on the button, -toggle between hiding and showing the dropdown content */ -const skyOptions =()=> { - document.getElementById("myDropdown").classList.toggle("show"); -} - -// Close the dropdown menu if the user clicks outside of it -window.onclick = function(event) { - if (!event.target.matches('.dropbtn')) { - var dropdowns = document.getElementsByClassName("dropdown-content"); - var i; - for (i = 0; i < dropdowns.length; i++) { - var openDropdown = dropdowns[i]; - if (openDropdown.classList.contains('show')) { - openDropdown.classList.remove('show'); - } - } - } -} - //----------TEMPERATURE ELEMENTS diff --git a/styles/index.css b/styles/index.css index c3441bb8d..949af2e68 100644 --- a/styles/index.css +++ b/styles/index.css @@ -35,38 +35,6 @@ section { color: whitesmoke } -/* Dropdown Button */ -.dropbtn { - background-color: black; - color: white; - padding: 16px; - font-size: 16px; - border: none; - cursor: pointer; -} - - -/* The container
- needed to position the dropdown content */ -.dropdown { - position: relative; - display: inline-block; -} - -/* Dropdown Content (Hidden by Default) */ -.dropdown-content { - display: none; - position: absolute; - background-color: whitesmoke; - min-width: 160px; - z-index: 1; -} - -/* Inside the dropdown */ -.dropdown-content a { - color: black; - padding: 12px 16px; - display: block; -} - -/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */ - .show {display:block;} \ No newline at end of file +.result { + font-size: 40px; +} \ No newline at end of file From 898109385d9fc2341ef7ceb451b3f73ec2618867 Mon Sep 17 00:00:00 2001 From: Alie Ibarra Date: Wed, 29 Dec 2021 11:49:03 -0800 Subject: [PATCH 3/5] Display Sky Input --- index.html | 28 ++++++++++++++-------------- src/index.js | 16 ++++++++++------ 2 files changed, 24 insertions(+), 20 deletions(-) diff --git a/index.html b/index.html index 4f99edf58..f129a77fc 100644 --- a/index.html +++ b/index.html @@ -13,30 +13,30 @@

โ˜€๏ธ๐ŸŒง โ„๏ธ Weather Report โ„๏ธ ๐ŸŒงโ˜€๏ธ

NEED USER TO INPUT CITY NAME HERE

- -

The Sky looks like...

+ +

The sky is...

- + + + + + + -
+

- -

The Weather in {cityName} is...

+ + +

The Weather is...

-

โ—๏ธ PENDING DATA โ—๏ธ

-
+

โ—๏ธ PENDING WEATHER DATA โ—๏ธ

diff --git a/src/index.js b/src/index.js index 50a7d603d..bec54a30a 100644 --- a/src/index.js +++ b/src/index.js @@ -1,4 +1,9 @@ +//----------Sky ELEMENTS +const changeSky = () => { + const skyImage = document.getElementById("skyChoice").value; + document.getElementById("skyContainer").innerHTML = skyImage; +} //----------TEMPERATURE ELEMENTS //Temp Adjustment Features @@ -10,16 +15,16 @@ const newTemp = document.createElement("span"); //function to change the color & image based on tempState.tempCount const changeColorByTemp = () => { - if (tempState.tempCount >= 10) { + if (tempState.tempCount >= 32) { tempCount.style.color = "brown"; newTemp.textContent = "๐Ÿœ ๐Ÿœ ๐Ÿœ ๐ŸŒต ๐ŸŒต ๐Ÿฆ‚ ๐ŸŒต ๐ŸŒต ๐Ÿฆ‚ ๐ŸŒต ๐ŸŒต ๐Ÿœ ๐Ÿœ ๐Ÿœ" - } else if (tempState.tempCount >= 8){ + } else if (tempState.tempCount >= 24){ tempCount.style.color = "orange"; newTemp.textContent = "๐ŸŒ‹ ๐ŸŒ‹ ๐ŸŒ‹ ๐Ÿ ๐Ÿ ๐Ÿ›ซ ๐Ÿ ๐Ÿ ๐Ÿ›ฌ ๐Ÿ ๐Ÿ ๐ŸŒ‹ ๐ŸŒ‹ ๐ŸŒ‹" - } else if (tempState.tempCount >= 7){ + } else if (tempState.tempCount >= 18){ tempCount.style.color = "forestgreen"; newTemp.textContent = "โ›ฐ โ›ฐ โ›ฐ ๐ŸŒณ ๐ŸŒณ ๐Ÿก ๐ŸŒณ ๐ŸŒณ ๐Ÿก ๐ŸŒณ ๐ŸŒณ โ›ฐ โ›ฐ โ›ฐ" - } else if (tempState.tempCount >= 5){ + } else if (tempState.tempCount >= 8){ tempCount.style.color = "maroon"; newTemp.textContent = "๐Ÿ” ๐Ÿ” ๐Ÿ” ๐ŸŒฒ ๐ŸŒฒ ๐Ÿ  ๐ŸŒฒ ๐ŸŒฒ ๐Ÿ  ๐ŸŒฒ ๐ŸŒฒ ๐Ÿ” ๐Ÿ” ๐Ÿ” " } else if (tempState.tempCount >= 0) { @@ -33,7 +38,7 @@ const changeColorByTemp = () => { const updateTempCount = () => { const tempCountElement = document.querySelector("#tempCount"); - tempCountElement.textContent = `The Temperature is: ${tempState.tempCount} \xB0F` + tempCountElement.textContent = `The Temperature is: ${tempState.tempCount} \xB0C` }; //Tempt goes up @@ -61,4 +66,3 @@ const subTemp = () => { addTempButton.addEventListener('click', addTemp) subTempButton.addEventListener('click', subTemp) -//----------SKY ELEMENTS From 71161795fec0c10bf6ef5bbcf04322752ac84d55 Mon Sep 17 00:00:00 2001 From: Alie Ibarra Date: Wed, 29 Dec 2021 12:42:55 -0800 Subject: [PATCH 4/5] Enter City- NEEDS TO BE ADJUSTED --- index.html | 41 +++++++++++++++++++++++------------------ src/index.js | 11 ++++++++++- styles/index.css | 14 +++++++++++++- 3 files changed, 46 insertions(+), 20 deletions(-) diff --git a/index.html b/index.html index f129a77fc..49e93e4ac 100644 --- a/index.html +++ b/index.html @@ -8,36 +8,41 @@ -

โ˜€๏ธ๐ŸŒง โ„๏ธ Weather Report โ„๏ธ ๐ŸŒงโ˜€๏ธ

- -
-

NEED USER TO INPUT CITY NAME HERE

-
-
+

โ˜€๏ธ๐ŸŒง โ„๏ธ Weather Report โ„๏ธ ๐ŸŒงโ˜€๏ธ

+
+ + +
+
+

The sky is...

-

- - +

The Weather is...

- -

โ—๏ธ PENDING WEATHER DATA โ—๏ธ

-
+ + +

+
โ—๏ธ PENDING CITY DATA โ—๏ธ
+ +
โ—๏ธ PENDING SKY DATA โ—๏ธ
+ +
โ—๏ธ PENDING WEATHER DATA โ—๏ธ
+
diff --git a/src/index.js b/src/index.js index bec54a30a..af1685fb0 100644 --- a/src/index.js +++ b/src/index.js @@ -1,5 +1,14 @@ -//----------Sky ELEMENTS +//----------City ELEMENT +function showInput() { + document.getElementById('display').innerHTML = + document.getElementById("user_input").value; +} +const changeCity = () => { + const cityName = document.getElementById("city").onsubmit; + document.getElementById("cityContainer").innerHTML = "Today in " + cityName; +} +//----------Sky ELEMENT const changeSky = () => { const skyImage = document.getElementById("skyChoice").value; document.getElementById("skyContainer").innerHTML = skyImage; diff --git a/styles/index.css b/styles/index.css index 949af2e68..61565bb8d 100644 --- a/styles/index.css +++ b/styles/index.css @@ -17,11 +17,20 @@ button { justify-content: center; } + +input { + margin: 10px; +} section { display: flex; flex-direction: row; justify-content: center; } +div { + display: flex; + flex-direction: row; + justify-content: center; +} .warmer { color: brown; @@ -35,6 +44,9 @@ section { color: whitesmoke } -.result { +.result{ font-size: 40px; +} +.padded { + padding: 30px; } \ No newline at end of file From 2e4d53457aa4db40287aad1200b06fcd369c942e Mon Sep 17 00:00:00 2001 From: Alie Ibarra Date: Wed, 29 Dec 2021 15:25:19 -0800 Subject: [PATCH 5/5] Pass all 5 Waves --- index.html | 10 +++++----- src/index.js | 15 +++++++++------ 2 files changed, 14 insertions(+), 11 deletions(-) diff --git a/index.html b/index.html index 49e93e4ac..74629b945 100644 --- a/index.html +++ b/index.html @@ -11,9 +11,10 @@

โ˜€๏ธ๐ŸŒง โ„๏ธ Weather Report โ„๏ธ ๐ŸŒงโ˜€๏ธ

- +
-
+ +

The sky is...

@@ -36,9 +37,8 @@

The Weather is...

-

-
โ—๏ธ PENDING CITY DATA โ—๏ธ
- +

+
โ—๏ธ PENDING SKY DATA โ—๏ธ
โ—๏ธ PENDING WEATHER DATA โ—๏ธ
diff --git a/src/index.js b/src/index.js index af1685fb0..0ee975410 100644 --- a/src/index.js +++ b/src/index.js @@ -1,11 +1,14 @@ //----------City ELEMENT -function showInput() { - document.getElementById('display').innerHTML = - document.getElementById("user_input").value; +const cityChange = () => { + document.getElementById('display').innerHTML = "Today in ... " + + document.getElementById("cityName").value; } -const changeCity = () => { - const cityName = document.getElementById("city").onsubmit; - document.getElementById("cityContainer").innerHTML = "Today in " + cityName; + +// function resetData(){ +// document.getElementById("cityName").reset(); +// } +const resetCity = () => { + document.getElementById('display').innerHTML = "Please Input City"; } //----------Sky ELEMENT