From c3d459f7b5558b0d78275cb66c100873dbc33c30 Mon Sep 17 00:00:00 2001 From: mhc Date: Tue, 6 Dec 2022 16:57:10 -0500 Subject: [PATCH 01/23] script axios & index.js in index.html --- index.html | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 68b320b9a..6e6c9eda6 100644 --- a/index.html +++ b/index.html @@ -7,6 +7,7 @@ Weather Report - + + \ No newline at end of file From d5a089de1d32350f701885b8c833322870674a11 Mon Sep 17 00:00:00 2001 From: mhc Date: Tue, 6 Dec 2022 16:58:16 -0500 Subject: [PATCH 02/23] linked style.css in index.html --- index.html | 1 + 1 file changed, 1 insertion(+) diff --git a/index.html b/index.html index 6e6c9eda6..d1384a385 100644 --- a/index.html +++ b/index.html @@ -5,6 +5,7 @@ Weather Report + From 553b4a840181f71d0c2f190da8620b82b7f40758 Mon Sep 17 00:00:00 2001 From: misha-joy Date: Wed, 7 Dec 2022 12:59:15 -1000 Subject: [PATCH 03/23] adds html base --- index.html | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index d1384a385..2ed107eb8 100644 --- a/index.html +++ b/index.html @@ -8,7 +8,20 @@ +
+

The Weather Station

+ +
+
+
City Name
+
Sky Condition
+
Date & Time
+
Temperature
+
+ +
Copyright Adies of D18 2022
+ - \ No newline at end of file + Date: Wed, 7 Dec 2022 13:33:29 -1000 Subject: [PATCH 04/23] adds temperature buttons JS --- index.html | 31 ++++++++++++++++++------------- src/index.js | 22 ++++++++++++++++++++++ 2 files changed, 40 insertions(+), 13 deletions(-) diff --git a/index.html b/index.html index 2ed107eb8..80fb5f64e 100644 --- a/index.html +++ b/index.html @@ -8,19 +8,24 @@ -
-

The Weather Station

- -
-
-
City Name
-
Sky Condition
-
Date & Time
-
Temperature
-
- -
Copyright Adies of D18 2022
- +
+
+

The Weather Station

+ +
+
+
City Name
+
Sky Condition
+
Date & Time
+
+ +

Temperature

+ +
+
+ +
Copyright Adies of D18 2022
+
diff --git a/src/index.js b/src/index.js index e69de29bb..0c678b9b5 100644 --- a/src/index.js +++ b/src/index.js @@ -0,0 +1,22 @@ +const state = { + Temperature: 0 +}; + +const increaseTemp = (event) => { + const tempContainer = document.querySelector("#Temperature"); + tempContainer.textContent = `${state.Temperature + 1}`; +}; + +const decreaseTemp = (event) => { + const tempContainer = document.querySelector("#Temperature"); + tempContainer.textContent = `${state.Temperature - 1}`; +}; + +const registerEventHandlers = (event) => { + const increaseTempButton = document.querySelector("#increaseTempButton"); + const decreaseTempButton = document.querySelector("#decreaseTempButton"); + increaseTempButton.addEventListener("click", increaseTemp); + decreaseTempButton.addEventListener("click", decreaseTemp); +}; + +document.addEventListener("DOMContentLoaded", registerEventHandlers); \ No newline at end of file From 9ecc9e465a8e51b0d4889b187aba2518a71a7239 Mon Sep 17 00:00:00 2001 From: mhc Date: Wed, 7 Dec 2022 18:40:14 -0500 Subject: [PATCH 05/23] fixed tempButtons index.js & script path --- index.html | 2 +- src/index.js | 21 ++++++++++++--------- 2 files changed, 13 insertions(+), 10 deletions(-) diff --git a/index.html b/index.html index 80fb5f64e..3de1f8900 100644 --- a/index.html +++ b/index.html @@ -26,7 +26,7 @@

The Weather Station

Copyright Adies of D18 2022
- + { - const tempContainer = document.querySelector("#Temperature"); - tempContainer.textContent = `${state.Temperature + 1}`; + const tempContainer = document.querySelector('#Temperature'); + console.log('increaseTemp clicked'); + state.Temperature += 1; + tempContainer.textContent = `${state.Temperature}`; }; const decreaseTemp = (event) => { - const tempContainer = document.querySelector("#Temperature"); + const tempContainer = document.querySelector('#Temperature'); + state.Temperature -= 1; tempContainer.textContent = `${state.Temperature - 1}`; }; const registerEventHandlers = (event) => { - const increaseTempButton = document.querySelector("#increaseTempButton"); - const decreaseTempButton = document.querySelector("#decreaseTempButton"); - increaseTempButton.addEventListener("click", increaseTemp); - decreaseTempButton.addEventListener("click", decreaseTemp); + const increaseTempButton = document.querySelector('#increaseTempButton'); + const decreaseTempButton = document.querySelector('#decreaseTempButton'); + increaseTempButton.addEventListener('click', increaseTemp); + decreaseTempButton.addEventListener('click', decreaseTemp); }; -document.addEventListener("DOMContentLoaded", registerEventHandlers); \ No newline at end of file +document.addEventListener('DOMContentLoaded', registerEventHandlers); From ca90b0f427c49a43e69257270bde2fb90e3628e0 Mon Sep 17 00:00:00 2001 From: misha-joy Date: Thu, 8 Dec 2022 09:52:45 -1000 Subject: [PATCH 06/23] add wave 3 and 4 --- index.html | 8 +++++-- src/index.js | 64 ++++++++++++++++++++++++++++++++++++++++++++++++++-- 2 files changed, 68 insertions(+), 4 deletions(-) diff --git a/index.html b/index.html index 3de1f8900..a5b7bda83 100644 --- a/index.html +++ b/index.html @@ -14,7 +14,8 @@

The Weather Station

-
City Name
+

Seattle

+
Sky Condition
Date & Time
@@ -22,9 +23,12 @@

The Weather Station

Temperature

+
-
Copyright Adies of D18 2022
+
+

Copyright Adies of D18 2022

+
diff --git a/src/index.js b/src/index.js index 252e3b442..26bbe33ab 100644 --- a/src/index.js +++ b/src/index.js @@ -1,3 +1,5 @@ +const axios = require('axios'); + const state = { Temperature: 0, }; @@ -12,14 +14,72 @@ const increaseTemp = (event) => { const decreaseTemp = (event) => { const tempContainer = document.querySelector('#Temperature'); state.Temperature -= 1; - tempContainer.textContent = `${state.Temperature - 1}`; + tempContainer.textContent = `${state.Temperature}`; +}; + +const tempRange = (event) => { + const tempContainer = document.querySelector('#Temperature'); + const landscapeContainer = document.querySelector('#landscape'); + if (state.Temperature >= 80) { + tempContainer.style.color = 'red'; + landscapeContainer.textContent = '🌡__🐍_πŸ¦‚_🌡🌡__🐍_🏜_πŸ¦‚'; + } else if (state.Temperature <= 79 && state.Temperature >= 70) { + tempContainer.style.color = 'orange'; + landscapeContainer.textContent = '🌸🌿🌼__🌷🌻🌿_☘️🌱_🌻🌷'; + } else if (state.Temperature <= 69 && state.Temperature >= 60) { + tempContainer.style.color = 'yellow'; + landscapeContainer.textContent = '🌾🌾_πŸƒ_πŸͺ¨__πŸ›€_🌾🌾🌾_πŸƒ'; + } else if (state.Temperature <= 59 && state.Temperature >= 50) { + tempContainer.style.color = 'green'; + landscapeContainer.textContent = 'πŸŒ²πŸŒ²β›„οΈπŸŒ²β›„οΈπŸ‚πŸŒ²πŸπŸŒ²πŸŒ²β›„οΈπŸ‚πŸŒ²'; + } else if (state.Temperature <= 49) { + tempContainer.style.color = 'teal'; + } }; +const chooseCityName = (event) => { + const cityName = document.querySelector('#cityName'); + const inputContainer = document.querySelector('#inputCityName'); + cityName.textContent = inputContainer.value; +}; + +const updateTemperature = (event) => { + const cityName = document.querySelector('#cityName'); + const tempContainer = document.querySelector('#tempContainer'); + //using cityname, make GET request to LocationIQ to get coordinates + axios + .get(`localhost:5000/location?q=${cityName.textContent}`) + .then((response) => { + const latitude = response[0]["lat"]; + const longitude = response[0]["lon"]; + }) + .catch((error) => { + console.log("Error") + }) + //make GET request to OpenWeatherAPI to get current temperature + axios + .get(`localhost:5000/weather?lat=${latitude}&lon=${longitude}`) + .then((response) => { + const temperatureKelvin = response["main"]["temp"]; + const temperatureFahrenheit = (((temperatureKelvin - 273.15) * 9) / 5) + 32; + tempContainer.textContent = temperatureFahrenheit; + }) + .catch((error) => { + console.log("Error") + }) +} + const registerEventHandlers = (event) => { const increaseTempButton = document.querySelector('#increaseTempButton'); - const decreaseTempButton = document.querySelector('#decreaseTempButton'); increaseTempButton.addEventListener('click', increaseTemp); + increaseTempButton.addEventListener('click', tempRange); + const decreaseTempButton = document.querySelector('#decreaseTempButton'); decreaseTempButton.addEventListener('click', decreaseTemp); + decreaseTempButton.addEventListener('click', tempRange); + const inputCityName = document.querySelector('#inputCityName'); + inputCityName.addEventListener('input', chooseCityName); + const updateTempButton = document.querySelector('#updateTempButton'); + updateTempButton.addEventListener('click', updateTemperature); }; document.addEventListener('DOMContentLoaded', registerEventHandlers); From 0b15b7233e58c874f4aa67b34ccdc6fed66d2012 Mon Sep 17 00:00:00 2001 From: mhc Date: Thu, 8 Dec 2022 17:51:19 -0500 Subject: [PATCH 07/23] troubleshooting axios --- src/index.js | 25 +++++++++++++------------ 1 file changed, 13 insertions(+), 12 deletions(-) diff --git a/src/index.js b/src/index.js index 26bbe33ab..2446fee38 100644 --- a/src/index.js +++ b/src/index.js @@ -1,4 +1,5 @@ -const axios = require('axios'); +// const axios = require('axios'); +// import axios from 'axios'; const state = { Temperature: 0, @@ -50,24 +51,24 @@ const updateTemperature = (event) => { axios .get(`localhost:5000/location?q=${cityName.textContent}`) .then((response) => { - const latitude = response[0]["lat"]; - const longitude = response[0]["lon"]; - }) - .catch((error) => { - console.log("Error") + const latitude = response[0]['lat']; + const longitude = response[0]['lon']; }) + .catch((error) => { + console.log('Error'); + }); //make GET request to OpenWeatherAPI to get current temperature axios .get(`localhost:5000/weather?lat=${latitude}&lon=${longitude}`) .then((response) => { - const temperatureKelvin = response["main"]["temp"]; - const temperatureFahrenheit = (((temperatureKelvin - 273.15) * 9) / 5) + 32; + const temperatureKelvin = response['main']['temp']; + const temperatureFahrenheit = ((temperatureKelvin - 273.15) * 9) / 5 + 32; tempContainer.textContent = temperatureFahrenheit; - }) - .catch((error) => { - console.log("Error") }) -} + .catch((error) => { + console.log('Error'); + }); +}; const registerEventHandlers = (event) => { const increaseTempButton = document.querySelector('#increaseTempButton'); From 5495f9cae0dd6af07a0afef3b7d894e3a0e57021 Mon Sep 17 00:00:00 2001 From: mhc Date: Thu, 8 Dec 2022 18:33:08 -0500 Subject: [PATCH 08/23] fixed axios location and weather api call --- src/index.js | 27 ++++++++++++++------------- 1 file changed, 14 insertions(+), 13 deletions(-) diff --git a/src/index.js b/src/index.js index 2446fee38..3c0c2ea0f 100644 --- a/src/index.js +++ b/src/index.js @@ -1,8 +1,8 @@ -// const axios = require('axios'); -// import axios from 'axios'; - const state = { Temperature: 0, + city: 'Seattle', + latitude: 0, + longitude: 0, }; const increaseTemp = (event) => { @@ -41,27 +41,28 @@ const tempRange = (event) => { const chooseCityName = (event) => { const cityName = document.querySelector('#cityName'); const inputContainer = document.querySelector('#inputCityName'); - cityName.textContent = inputContainer.value; + state.city = inputContainer.value; + cityName.textContent = state.city; }; const updateTemperature = (event) => { - const cityName = document.querySelector('#cityName'); - const tempContainer = document.querySelector('#tempContainer'); - //using cityname, make GET request to LocationIQ to get coordinates + const tempContainer = document.querySelector('#Temperature'); axios - .get(`localhost:5000/location?q=${cityName.textContent}`) + .get(`http://localhost:5000/location?q=${state.city}`) .then((response) => { - const latitude = response[0]['lat']; - const longitude = response[0]['lon']; + state.latitude = response.data[0].lat; + state.longitude = response.data[0].lon; }) .catch((error) => { console.log('Error'); + tempContainer.textContent = `${error}`; }); - //make GET request to OpenWeatherAPI to get current temperature axios - .get(`localhost:5000/weather?lat=${latitude}&lon=${longitude}`) + .get( + `http://localhost:5000/weather?lat=${state.latitude}&lon=${state.longitude}` + ) .then((response) => { - const temperatureKelvin = response['main']['temp']; + const temperatureKelvin = response.data.main.temp; const temperatureFahrenheit = ((temperatureKelvin - 273.15) * 9) / 5 + 32; tempContainer.textContent = temperatureFahrenheit; }) From b92cf285a3cf4d95cd5f944c264d037bfe798125 Mon Sep 17 00:00:00 2001 From: mhc Date: Thu, 8 Dec 2022 18:46:10 -0500 Subject: [PATCH 09/23] nested weather call in location call to fix async --- src/index.js | 31 +++++++++++++++++-------------- 1 file changed, 17 insertions(+), 14 deletions(-) diff --git a/src/index.js b/src/index.js index 3c0c2ea0f..f28e75a2c 100644 --- a/src/index.js +++ b/src/index.js @@ -52,22 +52,25 @@ const updateTemperature = (event) => { .then((response) => { state.latitude = response.data[0].lat; state.longitude = response.data[0].lon; + console.log(`lat: ${state.latitude}, lon: ${state.longitude}`); + axios + .get( + `http://localhost:5000/weather?lat=${state.latitude}&lon=${state.longitude}` + ) + .then((response) => { + const temperatureKelvin = response.data.main.temp; + console.log(response.data.main.temp); + const temperatureFahrenheit = + ((temperatureKelvin - 273.15) * 9) / 5 + 32; + console.log(temperatureFahrenheit); + tempContainer.textContent = `${Math.round(temperatureFahrenheit)}`; + }) + .catch((error) => { + console.log('OpenWeather GET request error'); + }); }) .catch((error) => { - console.log('Error'); - tempContainer.textContent = `${error}`; - }); - axios - .get( - `http://localhost:5000/weather?lat=${state.latitude}&lon=${state.longitude}` - ) - .then((response) => { - const temperatureKelvin = response.data.main.temp; - const temperatureFahrenheit = ((temperatureKelvin - 273.15) * 9) / 5 + 32; - tempContainer.textContent = temperatureFahrenheit; - }) - .catch((error) => { - console.log('Error'); + console.log('LocationIQ GET request error'); }); }; From 63a6e77c971b04c0857db595f759a0f87dc88134 Mon Sep 17 00:00:00 2001 From: mhc Date: Thu, 8 Dec 2022 18:48:33 -0500 Subject: [PATCH 10/23] added response.data console logs for axios calls --- src/index.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/index.js b/src/index.js index f28e75a2c..4339e713c 100644 --- a/src/index.js +++ b/src/index.js @@ -52,18 +52,17 @@ const updateTemperature = (event) => { .then((response) => { state.latitude = response.data[0].lat; state.longitude = response.data[0].lon; - console.log(`lat: ${state.latitude}, lon: ${state.longitude}`); + console.log(response.data); axios .get( `http://localhost:5000/weather?lat=${state.latitude}&lon=${state.longitude}` ) .then((response) => { const temperatureKelvin = response.data.main.temp; - console.log(response.data.main.temp); const temperatureFahrenheit = ((temperatureKelvin - 273.15) * 9) / 5 + 32; - console.log(temperatureFahrenheit); tempContainer.textContent = `${Math.round(temperatureFahrenheit)}`; + console.log(response.data); }) .catch((error) => { console.log('OpenWeather GET request error'); From 12b4b1cdc56a1e3febbdde059f8bbe52e5a47cb4 Mon Sep 17 00:00:00 2001 From: misha-joy Date: Fri, 9 Dec 2022 10:05:53 -1000 Subject: [PATCH 11/23] refactors tempRange and completes wave 4 --- index.html | 2 +- src/index.js | 15 +++++++++------ 2 files changed, 10 insertions(+), 7 deletions(-) diff --git a/index.html b/index.html index a5b7bda83..828ff5050 100644 --- a/index.html +++ b/index.html @@ -30,7 +30,7 @@

The Weather Station

Copyright Adies of D18 2022

- + { console.log('increaseTemp clicked'); state.Temperature += 1; tempContainer.textContent = `${state.Temperature}`; + tempRange(); }; const decreaseTemp = (event) => { const tempContainer = document.querySelector('#Temperature'); state.Temperature -= 1; tempContainer.textContent = `${state.Temperature}`; + tempRange(); }; -const tempRange = (event) => { +const tempRange = () => { const tempContainer = document.querySelector('#Temperature'); const landscapeContainer = document.querySelector('#landscape'); if (state.Temperature >= 80) { @@ -35,6 +37,7 @@ const tempRange = (event) => { landscapeContainer.textContent = 'πŸŒ²πŸŒ²β›„οΈπŸŒ²β›„οΈπŸ‚πŸŒ²πŸπŸŒ²πŸŒ²β›„οΈπŸ‚πŸŒ²'; } else if (state.Temperature <= 49) { tempContainer.style.color = 'teal'; + landscapeContainer.textContent = 'πŸŒ²πŸŒ²β›„οΈπŸŒ²β›„οΈπŸ‚πŸŒ²πŸπŸŒ²πŸŒ²β›„οΈπŸ‚πŸŒ²'; } }; @@ -59,9 +62,9 @@ const updateTemperature = (event) => { ) .then((response) => { const temperatureKelvin = response.data.main.temp; - const temperatureFahrenheit = - ((temperatureKelvin - 273.15) * 9) / 5 + 32; - tempContainer.textContent = `${Math.round(temperatureFahrenheit)}`; + state.Temperature = ((temperatureKelvin - 273.15) * 9) / 5 + 32; + tempContainer.textContent = `${Math.round(state.Temperature)}`; + tempRange(); console.log(response.data); }) .catch((error) => { @@ -76,10 +79,10 @@ const updateTemperature = (event) => { const registerEventHandlers = (event) => { const increaseTempButton = document.querySelector('#increaseTempButton'); increaseTempButton.addEventListener('click', increaseTemp); - increaseTempButton.addEventListener('click', tempRange); + // increaseTempButton.addEventListener('click', tempRange); const decreaseTempButton = document.querySelector('#decreaseTempButton'); decreaseTempButton.addEventListener('click', decreaseTemp); - decreaseTempButton.addEventListener('click', tempRange); + // decreaseTempButton.addEventListener('click', tempRange); const inputCityName = document.querySelector('#inputCityName'); inputCityName.addEventListener('input', chooseCityName); const updateTempButton = document.querySelector('#updateTempButton'); From 1220c695d7a904969f0b6057307e1cf3f8f1f8b8 Mon Sep 17 00:00:00 2001 From: misha-joy Date: Fri, 9 Dec 2022 10:40:11 -1000 Subject: [PATCH 12/23] adds sky conditions --- index.html | 8 +++++++- src/index.js | 20 ++++++++++++++++++-- 2 files changed, 25 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index 828ff5050..480ccb831 100644 --- a/index.html +++ b/index.html @@ -11,12 +11,18 @@

The Weather Station

- +

Seattle

Sky Condition
+
Date & Time
diff --git a/src/index.js b/src/index.js index 7ac98a6ab..184dbb33c 100644 --- a/src/index.js +++ b/src/index.js @@ -8,14 +8,14 @@ const state = { const increaseTemp = (event) => { const tempContainer = document.querySelector('#Temperature'); console.log('increaseTemp clicked'); - state.Temperature += 1; + state.Temperature = Math.round(state.Temperature + 1); tempContainer.textContent = `${state.Temperature}`; tempRange(); }; const decreaseTemp = (event) => { const tempContainer = document.querySelector('#Temperature'); - state.Temperature -= 1; + state.Temperature = Math.round(state.Temperature - 1); tempContainer.textContent = `${state.Temperature}`; tempRange(); }; @@ -41,6 +41,20 @@ const tempRange = () => { } }; +const updateSky = (event) => { + const skyContainer = document.querySelector('#skySelect'); + const skyBannerContainer = document.querySelector('#skyBanner'); + if ((skyContainer.value = 'sunny')) { + skyBannerContainer.textContent = '☁️ ☁️ ☁️ β˜€οΈ ☁️ ☁️'; + } else if ((skyContainer.value = 'cloudy')) { + skyBannerContainer.textContent = '☁️☁️ ☁️ ☁️☁️ ☁️ 🌀 ☁️ ☁️☁️'; + } else if ((skyContainer.value = 'rainy')) { + skyBannerContainer.textContent = 'πŸŒ§πŸŒˆβ›ˆπŸŒ§πŸŒ§πŸ’§β›ˆπŸŒ§πŸŒ¦πŸŒ§πŸ’§πŸŒ§πŸŒ§'; + } else if ((skyContainer.value = 'snowy')) { + skyBannerContainer.textContent = 'πŸŒ¨β„οΈπŸŒ¨πŸŒ¨β„οΈβ„οΈπŸŒ¨β„οΈπŸŒ¨β„οΈβ„οΈπŸŒ¨πŸŒ¨'; + } +}; + const chooseCityName = (event) => { const cityName = document.querySelector('#cityName'); const inputContainer = document.querySelector('#inputCityName'); @@ -87,6 +101,8 @@ const registerEventHandlers = (event) => { inputCityName.addEventListener('input', chooseCityName); const updateTempButton = document.querySelector('#updateTempButton'); updateTempButton.addEventListener('click', updateTemperature); + const skySelect = document.querySelector('#skySelect'); + skySelect.addEventListener('change', updateSky); }; document.addEventListener('DOMContentLoaded', registerEventHandlers); From ea91fb46eabdd1a26584e12b8a453beee90f187c Mon Sep 17 00:00:00 2001 From: mhc Date: Fri, 9 Dec 2022 15:51:59 -0500 Subject: [PATCH 13/23] working updateSky --- src/index.js | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/src/index.js b/src/index.js index 184dbb33c..2aa3704ed 100644 --- a/src/index.js +++ b/src/index.js @@ -1,6 +1,7 @@ const state = { Temperature: 0, city: 'Seattle', + sky: 'sunny', latitude: 0, longitude: 0, }; @@ -44,13 +45,14 @@ const tempRange = () => { const updateSky = (event) => { const skyContainer = document.querySelector('#skySelect'); const skyBannerContainer = document.querySelector('#skyBanner'); - if ((skyContainer.value = 'sunny')) { + state.sky = skyContainer.value; + if (state.sky === 'sunny') { skyBannerContainer.textContent = '☁️ ☁️ ☁️ β˜€οΈ ☁️ ☁️'; - } else if ((skyContainer.value = 'cloudy')) { + } else if (state.sky === 'cloudy') { skyBannerContainer.textContent = '☁️☁️ ☁️ ☁️☁️ ☁️ 🌀 ☁️ ☁️☁️'; - } else if ((skyContainer.value = 'rainy')) { + } else if (state.sky === 'rainy') { skyBannerContainer.textContent = 'πŸŒ§πŸŒˆβ›ˆπŸŒ§πŸŒ§πŸ’§β›ˆπŸŒ§πŸŒ¦πŸŒ§πŸ’§πŸŒ§πŸŒ§'; - } else if ((skyContainer.value = 'snowy')) { + } else if (state.sky === 'snowy') { skyBannerContainer.textContent = 'πŸŒ¨β„οΈπŸŒ¨πŸŒ¨β„οΈβ„οΈπŸŒ¨β„οΈπŸŒ¨β„οΈβ„οΈπŸŒ¨πŸŒ¨'; } }; From c466806b56c3293a5c11b39324acd3dfc539eba1 Mon Sep 17 00:00:00 2001 From: mhc Date: Fri, 9 Dec 2022 16:03:38 -0500 Subject: [PATCH 14/23] added resetCityName button --- index.html | 35 ++++++++++++++++++----------------- src/index.js | 10 ++++++++++ 2 files changed, 28 insertions(+), 17 deletions(-) diff --git a/index.html b/index.html index 480ccb831..397eef9dd 100644 --- a/index.html +++ b/index.html @@ -13,24 +13,25 @@

The Weather Station

-
+

Seattle

- -
Sky Condition
- -
Date & Time
-
- -

Temperature

- -
- -
+ + +
+
Sky Condition
+ +
Date & Time
+
+ +

Temperature

+ +
+

Copyright Adies of D18 2022

diff --git a/src/index.js b/src/index.js index 2aa3704ed..65fdf4f92 100644 --- a/src/index.js +++ b/src/index.js @@ -64,6 +64,14 @@ const chooseCityName = (event) => { cityName.textContent = state.city; }; +const resetCityName = (event) => { + const cityName = document.querySelector('#cityName'); + const inputContainer = document.querySelector('#inputCityName'); + state.city = 'Seattle'; + inputContainer.value = ''; + cityName.textContent = state.city; +}; + const updateTemperature = (event) => { const tempContainer = document.querySelector('#Temperature'); axios @@ -101,6 +109,8 @@ const registerEventHandlers = (event) => { // decreaseTempButton.addEventListener('click', tempRange); const inputCityName = document.querySelector('#inputCityName'); inputCityName.addEventListener('input', chooseCityName); + const resetCityNameButton = document.querySelector('#resetCityName'); + resetCityNameButton.addEventListener('click', resetCityName); const updateTempButton = document.querySelector('#updateTempButton'); updateTempButton.addEventListener('click', updateTemperature); const skySelect = document.querySelector('#skySelect'); From 9ae867dc7e4f9844819dafb8cb06cb27235baf82 Mon Sep 17 00:00:00 2001 From: misha-joy Date: Sat, 10 Dec 2022 08:48:05 -1000 Subject: [PATCH 15/23] adds css selectors --- index.html | 2 +- src/index.js | 1 + styles/index.css | 65 ++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 67 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 397eef9dd..b7e259f91 100644 --- a/index.html +++ b/index.html @@ -5,7 +5,7 @@ Weather Report - +
diff --git a/src/index.js b/src/index.js index 65fdf4f92..9af427a0b 100644 --- a/src/index.js +++ b/src/index.js @@ -13,6 +13,7 @@ const increaseTemp = (event) => { tempContainer.textContent = `${state.Temperature}`; tempRange(); }; +// hello this is a new branch!! const decreaseTemp = (event) => { const tempContainer = document.querySelector('#Temperature'); diff --git a/styles/index.css b/styles/index.css index e69de29bb..98679ea6a 100644 --- a/styles/index.css +++ b/styles/index.css @@ -0,0 +1,65 @@ +body { + display: grid; + grid-template-columns: ; + grid-template-row: ; + background-color: rgb(147, 227, 247); +} +.banner { + background-color: blanchedalmond; +} + +#skybanner { + text-align: left; + background-color: rgb(127, 168, 255); +} + +#siteTitle { + font-size: larger; + text-align: left; +} + +#cityName { + text-align: left; +} + +#resetCityName { + border-radius: 3em; +} + +#skySelect { + background-color:rgb(230, 191, 243); + border-radius: 3em; +} + +#cityName { + font-size: larger; +} + +#increaseTempButton { + background-color: bisque; + border-radius: 3em; + +} + +#Temperature { + background-color: aquamarine; +} + +#decreaseTempButton { + background-color: bisque; + border-radius: 3em; +} + +#updateTempButton { + background-color: bisque; + border-radius: 3em; +} + +#landscape { + background-color: aqua; +} + +#cityName { + font-size: larger; +} + From 4f27a8de79a9bf11e35507152769e2a990322a31 Mon Sep 17 00:00:00 2001 From: mhc Date: Mon, 12 Dec 2022 00:03:51 -0500 Subject: [PATCH 16/23] trying out css --- index.html | 52 +++++++++++++++++++++--------------- styles/index.css | 69 +++++++++++++++++++++++++++++++++++++++++++++--- 2 files changed, 97 insertions(+), 24 deletions(-) diff --git a/index.html b/index.html index b7e259f91..db45df95a 100644 --- a/index.html +++ b/index.html @@ -9,35 +9,45 @@
-
+

The Weather Station

-
-

Seattle

- - -
-
Sky Condition
- -
Date & Time
-
- -

Temperature

- + +

eserunt mollit anim id est laborum.

+ +
+
+
+ + + +
+
+ + +
+
+ +
+ +

Temperature

+ + +
- +
-

Copyright Adies of D18 2022

+

©Copyright Adies of D18 2022

- \ No newline at end of file diff --git a/styles/index.css b/styles/index.css index 98679ea6a..b67cd68a4 100644 --- a/styles/index.css +++ b/styles/index.css @@ -1,9 +1,72 @@ body { display: grid; - grid-template-columns: ; - grid-template-row: ; + grid-template-columns: 1fr 2fr; + grid-template-rows: auto auto auto auto; + grid-gap: 1rem; background-color: rgb(147, 227, 247); + margin: 1rem; } + +main { + +} + +/* Flexbox Page Layout */ +.titleBlock { + grid-column: span 3; + display: flex; + align-items: center; +} + +.testBlock { + text-align: center; +} + +.cityNameBlock, +.skyConditionBlock, +.temperatureBlock { + border-radius: 8px; + padding: 2rem; + background-color: white; +} + +.cityNameBlock { + background-color: red; + border: 3px solid white; + grid-row: 2; +} + +.skyConditionBlock { + background-color: blue; + border: 3px solid white; + grid-row: 3; +} + +.temperatureBlock { + background-color: yellow; + border: 3px solid white; + grid-row: 2; + grid-column: 2 / span 3; + text-align: center; + align-self: center; +} + +#Temperature { + min-height: 200px; + max-width: fit-content; + margin: auto; + padding: 2rem; + + display: flex; + flex-direction: column; + justify-content: space-between; + + border-radius: 8px; + font-size: 2em; +} + + +/* Specific Elements */ .banner { background-color: blanchedalmond; } @@ -42,7 +105,7 @@ body { } #Temperature { - background-color: aquamarine; + font-size: 30px; } #decreaseTempButton { From 4e1bf48023332205a546dc51995e31cf862d7061 Mon Sep 17 00:00:00 2001 From: mhc Date: Mon, 12 Dec 2022 13:12:52 -0500 Subject: [PATCH 17/23] fixed css grids --- index.html | 69 +++++++++++++++++++++--------------------------- styles/index.css | 39 +++++++++++---------------- 2 files changed, 45 insertions(+), 63 deletions(-) diff --git a/index.html b/index.html index db45df95a..a6a21fc8e 100644 --- a/index.html +++ b/index.html @@ -8,45 +8,36 @@ -
-
-

The Weather Station

- -
- -

eserunt mollit anim id est laborum.

- -
-
-
- - - -
-
- - -
-
- -
- -

Temperature

- - -
-
- - -
-

©Copyright Adies of D18 2022

-
-
+
+

The Weather Station

+
+ +
+ + + +
+
+ + +
+ +
+ +

Temperature

+ + +
+ + +
+

©Copyright Adies of D18 2022

+
diff --git a/styles/index.css b/styles/index.css index b67cd68a4..96ac764fe 100644 --- a/styles/index.css +++ b/styles/index.css @@ -1,25 +1,18 @@ body { display: grid; grid-template-columns: 1fr 2fr; - grid-template-rows: auto auto auto auto; + grid-template-rows: auto auto auto auto auto; grid-gap: 1rem; background-color: rgb(147, 227, 247); margin: 1rem; } -main { - -} - /* Flexbox Page Layout */ .titleBlock { + grid-row: 1; grid-column: span 3; - display: flex; - align-items: center; -} - -.testBlock { - text-align: center; + display: grid; + align-self: center; } .cityNameBlock, @@ -33,26 +26,26 @@ main { .cityNameBlock { background-color: red; border: 3px solid white; - grid-row: 2; + grid-row: 3; } .skyConditionBlock { background-color: blue; border: 3px solid white; - grid-row: 3; + grid-row: 4; } .temperatureBlock { - background-color: yellow; + background-color: green; border: 3px solid white; - grid-row: 2; - grid-column: 2 / span 3; + grid-row: 3 / span 3; + grid-column: 2; text-align: center; align-self: center; } #Temperature { - min-height: 200px; + /* min-height: 200px; max-width: fit-content; margin: auto; padding: 2rem; @@ -62,16 +55,18 @@ main { justify-content: space-between; border-radius: 8px; - font-size: 2em; + font-size: 2em; */ } /* Specific Elements */ .banner { - background-color: blanchedalmond; + background-color: green; + grid-column: span 3; } -#skybanner { +#skyBanner { + grid-row: 2; text-align: left; background-color: rgb(127, 168, 255); } @@ -118,10 +113,6 @@ main { border-radius: 3em; } -#landscape { - background-color: aqua; -} - #cityName { font-size: larger; } From 39d85ce27ea6dc8e6b1444c0e74e9bc1b5abb90d Mon Sep 17 00:00:00 2001 From: mhc Date: Mon, 12 Dec 2022 13:13:25 -0500 Subject: [PATCH 18/23] removed background colors --- styles/index.css | 3 --- 1 file changed, 3 deletions(-) diff --git a/styles/index.css b/styles/index.css index 96ac764fe..ae5b32717 100644 --- a/styles/index.css +++ b/styles/index.css @@ -24,19 +24,16 @@ body { } .cityNameBlock { - background-color: red; border: 3px solid white; grid-row: 3; } .skyConditionBlock { - background-color: blue; border: 3px solid white; grid-row: 4; } .temperatureBlock { - background-color: green; border: 3px solid white; grid-row: 3 / span 3; grid-column: 2; From a56b05419257fc8de980957f662793f3b1817301 Mon Sep 17 00:00:00 2001 From: mhc Date: Mon, 12 Dec 2022 13:15:58 -0500 Subject: [PATCH 19/23] removed border for blocks --- styles/index.css | 3 --- 1 file changed, 3 deletions(-) diff --git a/styles/index.css b/styles/index.css index ae5b32717..1c91c70ea 100644 --- a/styles/index.css +++ b/styles/index.css @@ -24,17 +24,14 @@ body { } .cityNameBlock { - border: 3px solid white; grid-row: 3; } .skyConditionBlock { - border: 3px solid white; grid-row: 4; } .temperatureBlock { - border: 3px solid white; grid-row: 3 / span 3; grid-column: 2; text-align: center; From 8d4977255d1d8f17ce9600e47ecc348d55e7c4c8 Mon Sep 17 00:00:00 2001 From: misha-joy Date: Mon, 12 Dec 2022 08:20:39 -1000 Subject: [PATCH 20/23] moved update temp --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index a6a21fc8e..0e23d79d4 100644 --- a/index.html +++ b/index.html @@ -30,7 +30,7 @@

The Weather Station

Temperature

- +
From 6901c8855b263cedb39ddd7f7a5070accd3e96da Mon Sep 17 00:00:00 2001 From: mhc Date: Mon, 12 Dec 2022 13:23:30 -0500 Subject: [PATCH 21/23] misc --- index.html | 1 + 1 file changed, 1 insertion(+) diff --git a/index.html b/index.html index a6a21fc8e..e154ca399 100644 --- a/index.html +++ b/index.html @@ -31,6 +31,7 @@

The Weather Station

Temperature

+
From f5d24b1318e6f4f7dcb9a96a0fd682cfa19a9351 Mon Sep 17 00:00:00 2001 From: mhc Date: Mon, 12 Dec 2022 13:26:37 -0500 Subject: [PATCH 22/23] merge --- index.html | 4 ---- 1 file changed, 4 deletions(-) diff --git a/index.html b/index.html index 3c8fe4efd..e154ca399 100644 --- a/index.html +++ b/index.html @@ -30,12 +30,8 @@

The Weather Station

Temperature

-<<<<<<< HEAD
-======= -
->>>>>>> 8fbe1e898968165148219b8174786ca02ffec0f7
From 465ddab1eb809ddd83be61f58a96ea7fdd52ffcf Mon Sep 17 00:00:00 2001 From: mhc Date: Mon, 12 Dec 2022 13:31:48 -0500 Subject: [PATCH 23/23] css tinkering --- index.html | 10 +++++----- styles/index.css | 21 +++------------------ 2 files changed, 8 insertions(+), 23 deletions(-) diff --git a/index.html b/index.html index e154ca399..ebc703773 100644 --- a/index.html +++ b/index.html @@ -11,15 +11,17 @@

The Weather Station

- +
+