From 101c1309f8f5298f4ff8413de0d6caba95b59610 Mon Sep 17 00:00:00 2001 From: Kate Date: Tue, 6 Dec 2022 12:45:16 -0800 Subject: [PATCH 01/18] added plan of action --- README.md | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/README.md b/README.md index 8e4b04468..be99eafa6 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,21 @@ # Weather Report +##Pair Plan of Action +1. Access needs + 1. Open to working together until 6 PM after class + 2. Prefer in-person + 3. Communication via text and Slack +2. Learning styles + 1. Prepare and process individually before meeting and planning + 2. Refer to examples +3. How you prefer to receive feedback + 1. Nicely and politely + 2. Immediately if there is an issue + 3. Open to constructive criticism +4. Communication skills to improve + 1. Taking turns driving and navigating + 2. Communicate code more efficiently + ## Skills Assessed - Following directions and reading comprehension From 60d98f1b94bee6645684590968297b0cb8d4e32b Mon Sep 17 00:00:00 2001 From: Ariel Date: Wed, 7 Dec 2022 12:23:05 -0800 Subject: [PATCH 02/18] Added html structure. Added strict behavior to js file --- index.html | 49 +++++++++++++++++++++++++++++++++++++++++++++++-- src/index.js | 1 + 2 files changed, 48 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index 68b320b9a..619c6a34b 100644 --- a/index.html +++ b/index.html @@ -5,8 +5,53 @@ Weather Report + - +
+

WEATHER REPORT

+
+
+
+

TEMPERATURE

+ +

72

+ + +
+
+

SKY

+ + +
+
+

Seattle

+
+
+

WEATHER GARDEN

+
+
+

+

+
+
+ - \ No newline at end of file + + + + diff --git a/src/index.js b/src/index.js index e69de29bb..ad9a93a7c 100644 --- a/src/index.js +++ b/src/index.js @@ -0,0 +1 @@ +'use strict'; From 90d0f5697440cd4f5300124a8ec6b1a6639b8d07 Mon Sep 17 00:00:00 2001 From: Ariel Date: Wed, 7 Dec 2022 14:35:03 -0800 Subject: [PATCH 03/18] Add increase temp and decrease temp buttons. Also started change color --- index.html | 18 ++++++++++-------- src/index.js | 33 +++++++++++++++++++++++++++++++++ 2 files changed, 43 insertions(+), 8 deletions(-) diff --git a/index.html b/index.html index 619c6a34b..ace30b3ed 100644 --- a/index.html +++ b/index.html @@ -14,9 +14,10 @@

WEATHER REPORT

TEMPERATURE

- -

72

- + + +

72

+
@@ -24,10 +25,10 @@

SKY

-
-

Seattle

+
+

Seattle

WEATHER GARDEN

diff --git a/src/index.js b/src/index.js index 50f8a519a..393df2a0c 100644 --- a/src/index.js +++ b/src/index.js @@ -50,12 +50,21 @@ const landscapeChange = (temp) => { return landscape; }; +const displayCityName = () => { + const inputCity = document.getElementById('city-name-input').value; + const displayCityContainer = document.getElementById('city-display'); + + displayCityContainer.textContent = '✨ ' + inputCity + ' ✨'; +}; + const registerEventHandlers = () => { const increaseButton = document.getElementById('increase-temp'); const decreaseButton = document.getElementById('decrease-temp'); + const cityInputForm = document.getElementById('city-name-input'); increaseButton.addEventListener('click', increaseTemp); decreaseButton.addEventListener('click', decreaseTemp); + cityInputForm.addEventListener('input', displayCityName); }; // const registerEventHandlers = () => { diff --git a/styles/index.css b/styles/index.css index 6d8911dc1..9eb4a4e7b 100644 --- a/styles/index.css +++ b/styles/index.css @@ -1,3 +1,3 @@ #temp { - color: '#FFA500'; + color: #FFA500; } \ No newline at end of file From 69da9c6ba7bc65d1adcf0b6263eb364ac917559f Mon Sep 17 00:00:00 2001 From: Kate Date: Thu, 8 Dec 2022 16:05:23 -0800 Subject: [PATCH 09/18] added sky display with dropdown event listener. --- index.html | 6 ++---- src/index.js | 59 +++++++++++++++++++++++++++++++++++++++++++++++----- 2 files changed, 56 insertions(+), 9 deletions(-) diff --git a/index.html b/index.html index d6d38c705..100868693 100644 --- a/index.html +++ b/index.html @@ -24,7 +24,7 @@

TEMPERATURE

SKY

-

+

@@ -55,5 +55,3 @@

WEATHER GARDEN

- - diff --git a/src/index.js b/src/index.js index 393df2a0c..edb61ec01 100644 --- a/src/index.js +++ b/src/index.js @@ -1,5 +1,30 @@ 'use strict'; +//eevent happens (clicking on the get realtime temp) +const realtimeTempButton = document.getElementById('realtime-temp'); +//take in city from city-input +const cityInput = document.getElementById('city-name-input').value; +//request location api to return lat and lon, using city name +//using the returned lat and lon, request weather api to return temperature +//convert temp from kelvin to farhenheit +//set that value as temp display + +const get_location = () => { + axios + .get('http://127.0.0.1:5000/location', { + params: { + q: 'Seattle, Washington, USA', + }, + }) + .then((response) => { + console.log('success!', response.data); + return response.data; + }) + .catch((error) => { + console.log('error!', error.response.data); + }); +}; + const increaseTemp = () => { const currentTemp = document.getElementById('temp'); currentTemp.textContent = parseInt(currentTemp.textContent) + 1; @@ -50,6 +75,29 @@ const landscapeChange = (temp) => { return landscape; }; +const skyChangeOnSelect = () => { + const selectedSky = document.getElementById('sky-select')[0].innerHTML; + const skyContainer = document.getElementById('sky-container'); + const skyEmojiDisplay = skyChange(selectedSky); + skyContainer.textContent = skyEmojiDisplay; + console.log(skyEmojiDisplay); + console.log(selectedSky); +}; + +const skyChange = (skySelect) => { + let skyEmoji = ''; + if (skySelect === 'Sunny') { + skyEmoji = '☁️ ☁️ ☁️ β˜€οΈ ☁️ ☁️'; + } else if (skySelect === 'Cloudy') { + skyEmoji = '☁️☁️ ☁️ ☁️☁️ ☁️ 🌀 ☁️ ☁️☁️'; + } else if (skySelect === 'Rainy') { + skyEmoji = 'πŸŒ§πŸŒˆβ›ˆπŸŒ§πŸŒ§πŸ’§β›ˆπŸŒ§πŸŒ¦πŸŒ§πŸ’§πŸŒ§πŸŒ§'; + } else if (skySelect === 'Snowy') { + skyEmoji = '☁️ ☁️ ☁️ β˜€οΈ ☁️ ☁️'; + } + return skyEmoji; +}; + const displayCityName = () => { const inputCity = document.getElementById('city-name-input').value; const displayCityContainer = document.getElementById('city-display'); @@ -57,19 +105,20 @@ const displayCityName = () => { displayCityContainer.textContent = '✨ ' + inputCity + ' ✨'; }; +// const response = get_location(); +// const long = response[0]['lat']; + const registerEventHandlers = () => { const increaseButton = document.getElementById('increase-temp'); const decreaseButton = document.getElementById('decrease-temp'); const cityInputForm = document.getElementById('city-name-input'); + const selectedSky = document.getElementById('sky-select'); + get_location(); increaseButton.addEventListener('click', increaseTemp); decreaseButton.addEventListener('click', decreaseTemp); cityInputForm.addEventListener('input', displayCityName); + selectedSky.addEventListener('change', skyChangeOnSelect); }; -// const registerEventHandlers = () => { -// const increaseButton = document.getElementById('-temp'); -// increaseButton.addEventListener('click', increaseTemp); -// }; - document.addEventListener('DOMContentLoaded', registerEventHandlers); From c193365ab8d95a23e862d866e9c29cbd66464772 Mon Sep 17 00:00:00 2001 From: Kate Date: Thu, 8 Dec 2022 16:25:34 -0800 Subject: [PATCH 10/18] fix sky select and sky emoji --- index.html | 8 ++++---- src/index.js | 19 +++++++++++++------ 2 files changed, 17 insertions(+), 10 deletions(-) diff --git a/index.html b/index.html index 100868693..4e6d736b5 100644 --- a/index.html +++ b/index.html @@ -25,10 +25,10 @@

SKY

- + +

Seattle

diff --git a/src/index.js b/src/index.js index d3112e4cf..a50d818d5 100644 --- a/src/index.js +++ b/src/index.js @@ -38,10 +38,10 @@ const getTempFromCoordinates = () => { console.log(tempFahrenheit); tempDisplay.textContent = tempFahrenheit; - const landscapeContainer = document.getElementById('landscape'); - const landscape = landscapeChange(tempFahrenheit); - landscapeContainer.textContent = landscape; - console.log(landscapeChange(tempFahrenheit)); + // const landscapeContainer = document.getElementById('landscape'); + // const landscape = landscapeChange(tempFahrenheit); + // landscapeContainer.textContent = landscape; + // console.log(landscapeChange(tempFahrenheit)); }); }) .catch((error) => { @@ -131,6 +131,15 @@ const displayCityName = () => { displayCityContainer.textContent = '✨ ' + inputCity + ' ✨'; }; +const resetCityName = () => { + const inputCity = document.getElementById('city-name-input'); + const cityNameDisplay = document.getElementById('city-display'); + inputCity.value = 'Seattle'; + cityNameDisplay.textContent = 'Seattle'; + console.log(inputCity); + console.log(inputCity.value); +}; + // const response = get_location(); // const long = response[0]['lat']; @@ -140,12 +149,16 @@ const registerEventHandlers = () => { const cityInputForm = document.getElementById('city-name-input'); const selectedSky = document.getElementById('sky-select'); const realtimeTempButton = document.getElementById('realtime-temp'); + const resetButton = document.getElementById('reset-city-name-2'); + // const cityNameDisplay = document.getElementById('city-display'); increaseButton.addEventListener('click', increaseTemp); decreaseButton.addEventListener('click', decreaseTemp); cityInputForm.addEventListener('input', displayCityName); selectedSky.addEventListener('change', skyChangeOnSelect); realtimeTempButton.addEventListener('click', getTempFromCoordinates); + resetButton.addEventListener('click', resetCityName); + // cityNameDisplay.addEventListener('change', resetCityName); }; document.addEventListener('DOMContentLoaded', registerEventHandlers); From de7affb22a92f539875f50ae13e69a2efba73936 Mon Sep 17 00:00:00 2001 From: Kate Date: Sat, 10 Dec 2022 10:13:06 -0800 Subject: [PATCH 15/18] added color tempchange when realtime button clicked --- src/index.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/index.js b/src/index.js index a50d818d5..ab1590744 100644 --- a/src/index.js +++ b/src/index.js @@ -37,7 +37,8 @@ const getTempFromCoordinates = () => { (parseInt(cityTemp) - parseInt(273.15)) * 1.8 + 32; console.log(tempFahrenheit); tempDisplay.textContent = tempFahrenheit; - + colorTempChange(tempDisplay); + landscapeChange(tempDisplay); // const landscapeContainer = document.getElementById('landscape'); // const landscape = landscapeChange(tempFahrenheit); // landscapeContainer.textContent = landscape; From 01896e866d63dc101c4dd0cea71263d2fb1943ff Mon Sep 17 00:00:00 2001 From: Kate Date: Sat, 10 Dec 2022 10:26:43 -0800 Subject: [PATCH 16/18] landscape change when realtime clicked --- index.html | 3 +-- src/index.js | 9 ++++----- 2 files changed, 5 insertions(+), 7 deletions(-) diff --git a/index.html b/index.html index 8a2a71508..55239774a 100644 --- a/index.html +++ b/index.html @@ -36,9 +36,8 @@

CITY NAME

-
- +

Seattle

diff --git a/src/index.js b/src/index.js index ab1590744..94d76edc9 100644 --- a/src/index.js +++ b/src/index.js @@ -38,11 +38,10 @@ const getTempFromCoordinates = () => { console.log(tempFahrenheit); tempDisplay.textContent = tempFahrenheit; colorTempChange(tempDisplay); - landscapeChange(tempDisplay); - // const landscapeContainer = document.getElementById('landscape'); - // const landscape = landscapeChange(tempFahrenheit); - // landscapeContainer.textContent = landscape; - // console.log(landscapeChange(tempFahrenheit)); + const landscape = landscapeChange(tempDisplay); + + const landscapeContainer = document.getElementById('landscape'); + landscapeContainer.textContent = landscape; }); }) .catch((error) => { From 75a9963f842ba8a90592ac741b3eedac65c8da09 Mon Sep 17 00:00:00 2001 From: Kate Date: Sat, 10 Dec 2022 12:02:45 -0800 Subject: [PATCH 17/18] rearrange elements in some css; added background color --- index.html | 22 ++++---- styles/index.css | 133 +++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 145 insertions(+), 10 deletions(-) diff --git a/index.html b/index.html index 55239774a..2460b69c3 100644 --- a/index.html +++ b/index.html @@ -11,17 +11,17 @@

WEATHER REPORT

-
-
-

TEMPERATURE

+ +
+

TEMPERATURE

- +

72

- +
-

SKY

+

SKY

CITY NAME

@@ -39,17 +41,17 @@

CITY NAME

-
-

Seattle

+
+

✨ Seattle ✨

-
+

WEATHER GARDEN

☁️ ☁️ ☁️ β˜€οΈ ☁️ ☁️

🌸🌿🌼__🌷🌻🌿_☘️🌱_🌻🌷

-
+ diff --git a/styles/index.css b/styles/index.css index 9eb4a4e7b..51e638956 100644 --- a/styles/index.css +++ b/styles/index.css @@ -1,3 +1,136 @@ #temp { color: #FFA500; +} + +body { + display: grid; + width: 100vw; + height: 100vh; + grid-template-columns: 12.5% 12.5% 12.5% 12.5% 12.5% 12.5% 12.5% 12.5%; + grid-template-rows: 8.3% 8.3% 8.3% 8.3% 8.3% 8.3% 8.3% 8.3% 8.3% 8.3% 8.3% 8.3%; + background-color: rgb(165, 212, 243); +} + +header { + grid-row: 2 / 2; + grid-column: 2 / 7; + display: grid; + justify-self: center; + +} + +#temp-input { + display: grid; + grid-row: 4 / 6; + grid-column: 2 / 4; + flex-direction: column; + grid-template-columns: 20% 20% 20% 20% 20%; + grid-template-rows: 20% 20% 20% 20% 20%; + column-gap: 10px; + border-radius: 30px; + background-color: bisque; +} + +#decrease-temp { + display: flex; + grid-row: 5/5; + grid-column: 3/4; + justify-self: center; + align-self: center; +} + +#increase-temp { + display: flex; + grid-row: 2/3; + grid-column: 3/4; + justify-self: center; + align-self: center; +} + +#temperature-text { + display: grid; + grid-row: 1/1; + grid-column: 1/6; + justify-self: center; + align-self: center; +} + +#temp { + display: flex; + grid-row: 3/3; + grid-column: 3/3; + justify-self: center; +} + +#realtime-temp { + display: flex; + grid-row: 3/5; + grid-column: 5/6; + justify-self: center; + align-self: center; +} + +#sky-input { + grid-row: 7 / 9; + grid-column: 2 / 4; + flex-direction: column; + /* display: flex; + column-gap: 10px; */ + display: grid; + grid-template-rows: 50% 50% ; + border-radius: 20px; + justify-self: center; + align-self: center; +} + +#sky-text { + grid-row: 1 / span 1; +} + +#dropdown { + grid-row: 2 / span 1; +} + +#city-input { + display: flex; + grid-row: 9 / 12; + grid-column: 2 / 4; + flex-direction: column; + column-gap: 10px; + justify-self: center; + align-self: center; +} + +#city-container { + grid-row: 4 / 5; + grid-column: 5 / 8; + display: grid; + justify-self: center; +} + +#weather-text { + display: grid; + grid-row: 6 / 7; + grid-column: 5 / 8; + justify-self: center; +} + +#emoji-display { + grid-row: 7 / 9; + grid-column: 5 / 8; + display: grid; + grid-template-rows: 1fr 1fr 1fr; + grid-template-columns: 6.25% 87.5% 6.25%; +} + +#sky-container { + grid-row: 1 / span 1; + grid-column: 2 / span 1; + justify-self: center; +} + +#landscape { + grid-row: 3 / span 1; + grid-column: 2 / span 1; + justify-self: center; } \ No newline at end of file From bfb6f784dc862ea34f9d3ef4d09f74d541f23bef Mon Sep 17 00:00:00 2001 From: Kate Date: Sat, 10 Dec 2022 12:06:24 -0800 Subject: [PATCH 18/18] some css changes. --- index.html | 6 +++--- styles/index.css | 7 +++++-- 2 files changed, 8 insertions(+), 5 deletions(-) diff --git a/index.html b/index.html index 2460b69c3..7e8c32207 100644 --- a/index.html +++ b/index.html @@ -20,7 +20,7 @@

TEMPERATURE

-
+

SKY

-
+

CITY NAME

@@ -47,7 +47,7 @@

✨ Seattle ✨

WEATHER GARDEN

-
+

☁️ ☁️ ☁️ β˜€οΈ ☁️ ☁️

🌸🌿🌼__🌷🌻🌿_☘️🌱_🌻🌷

diff --git a/styles/index.css b/styles/index.css index 51e638956..2220808f9 100644 --- a/styles/index.css +++ b/styles/index.css @@ -11,6 +11,11 @@ body { background-color: rgb(165, 212, 243); } +/* .box { + border-radius: 30px; + background-color: bisque; +} */ + header { grid-row: 2 / 2; grid-column: 2 / 7; @@ -27,8 +32,6 @@ header { grid-template-columns: 20% 20% 20% 20% 20%; grid-template-rows: 20% 20% 20% 20% 20%; column-gap: 10px; - border-radius: 30px; - background-color: bisque; } #decrease-temp {