From 93b94c4dd233fee1fe33a8d071659cd9172fc6df Mon Sep 17 00:00:00 2001 From: Shannon Bellemore Date: Sat, 18 Jun 2022 17:57:41 -0600 Subject: [PATCH 1/6] wave 1 --- index.html | 16 +++++++++++++++- src/index.js | 1 + 2 files changed, 16 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 68b320b9a..6cb665857 100644 --- a/index.html +++ b/index.html @@ -5,8 +5,22 @@ Weather Report + - +
+
+

Weather Report

+
+ +
+ +
+
+

Temp Increase: 0

+
+
+ + \ No newline at end of file diff --git a/src/index.js b/src/index.js index e69de29bb..3918c74e4 100644 --- a/src/index.js +++ b/src/index.js @@ -0,0 +1 @@ +"use strict"; From 00cc7cc77b4fb0885e03c490ec908caf5162227b Mon Sep 17 00:00:00 2001 From: Shannon Bellemore Date: Mon, 20 Jun 2022 17:00:46 -0600 Subject: [PATCH 2/6] wave 2 --- index.html | 28 ++++++++++++----- src/index.js | 54 +++++++++++++++++++++++++++++++++ styles/index.css | 78 ++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 152 insertions(+), 8 deletions(-) diff --git a/index.html b/index.html index 6cb665857..d8fc68fa7 100644 --- a/index.html +++ b/index.html @@ -8,17 +8,29 @@ -
-
-

Weather Report

-
+
+

Weather Report

+
+
-
- +
+

Temperature (F):

+
+ + 49 + +
-
-

Temp Increase: 0

+ +
+ +
+

Weather Garden

+
+
🌲🌲⛄️🌲⛄️🍂🌲🍁🌲🌲⛄️🍂🌲
+
+
diff --git a/src/index.js b/src/index.js index 3918c74e4..938b01030 100644 --- a/src/index.js +++ b/src/index.js @@ -1 +1,55 @@ "use strict"; + + +const state = { + tempDegrees: 50, +}; + +// increase temperature +const increaseTemp = () => { + state.tempDegrees += 1; + const tempContainer = document.getElementById('temp-number'); + tempContainer.textContent = state.tempDegrees; + changesByTemp(); +}; + +// decrease temperature +const decreaseTemp = () => { + state.tempDegrees -= 1; + const tempContainer = document.getElementById('temp-number'); + tempContainer.textContent = state.tempDegrees; + changesByTemp(); +}; + +// change temperature display color & ground weather garden by temperature number +const changesByTemp = () => { + const tempContainer = document.getElementById('temp-number'); + const gardenContainer = document.getElementById('ground-garden') + if(state.tempDegrees >= 80) { + tempContainer.style.color = '#d04123'; + gardenContainer.textContent = '🌵__🐍_🦂_🌵🌵__🐍_🏜_🦂' + } else if(state.tempDegrees >= 70 && state.tempDegrees <= 79) { + tempContainer.style.color = '#f29f4e'; + gardenContainer.textContent = '🌸🌿🌼__🌷🌻🌿_☘️🌱_🌻🌷' + } else if(state.tempDegrees >= 60 && state.tempDegrees <= 69) { + tempContainer.style.color = '#f1d42d'; + gardenContainer.textContent = '🌾🌾_🍃_🪨__🛤_🌾🌾🌾_🍃' + } else if(state.tempDegrees >= 50 && state.tempDegrees <= 59) { + tempContainer.style.color = '#7caf4e'; + gardenContainer.textContent = '🌲🌲⛄️🌲⛄️🍂🌲🍁🌲🌲⛄️🍂🌲' + } else if(state.tempDegrees <= 49) { + tempContainer.style.color = '#73a3bb'; + gardenContainer.textContent = '🌲🌲⛄️🌲⛄️🍂🌲🍁🌲🌲⛄️🍂🌲' + } +}; + +const registerEventHandlers = () => { + const increaseTempButton = document.querySelector("#increase-temp-button"); + increaseTempButton.addEventListener("click", increaseTemp); + + const decreaseTempButton = document.querySelector("#decrease-temp-button"); + decreaseTempButton.addEventListener("click", decreaseTemp); + +}; + +document.addEventListener("DOMContentLoaded", registerEventHandlers); \ No newline at end of file diff --git a/styles/index.css b/styles/index.css index e69de29bb..703a3981f 100644 --- a/styles/index.css +++ b/styles/index.css @@ -0,0 +1,78 @@ +header{ + display: flex; + justify-content: flex-start; +} + +body{ + font-family: 'Courier New', Courier, monospace; + color: #1e475b; + background-color: #bad0f1; + + display: flex; + justify-content: center; + align-items: center; +} + +.main-container{ + display: grid; + grid-template-columns: 100px 300px 20px 300px 100px; + grid-template-rows: 50px 150px 20px 200px 50px; +} + +.general-container{ + color: #73a3bb; + background-color: #ffffff; + text-align: center; + border: 2px cornflowerblue; + border-style: dashed; + border-radius: 10px; +} + +.temperature-container{ + width: 300px; + height: 150px; + grid-column-start: 2; + grid-row-start: 2; +} + +.city-container{ + width: 300px; + height: 150px; + grid-row-start: 2; + grid-column-start: 4; +} + +.landscape-container{ + width: 620px; + height: 200px; + grid-row-start: 4; + grid-column-start: 2; +} + +#increase-temp-button{ + padding: 0; + border: 0; + margin: 0; + font-size: 125%; +} + +#increase-temp-button:hover{ + cursor: pointer; +} + +#decrease-temp-button{ + padding: 0; + border: 0; + margin: 0; + font-size: 125%; +} + +#decrease-temp-button:hover{ + cursor: pointer; +} + +#temp-number{ + font-size: 250%; + font-weight: bold; +} + From cbf55410c150e74724ba77858e906bb5cf460ab6 Mon Sep 17 00:00:00 2001 From: Shannon Bellemore Date: Mon, 20 Jun 2022 18:12:54 -0600 Subject: [PATCH 3/6] wave 3 --- index.html | 12 ++++++++++-- src/index.js | 9 +++++++++ styles/index.css | 12 ++++++++++-- 3 files changed, 29 insertions(+), 4 deletions(-) diff --git a/index.html b/index.html index d8fc68fa7..f3b95b750 100644 --- a/index.html +++ b/index.html @@ -9,7 +9,12 @@
-

Weather Report

+

Weather Report


+ for the city of + + Anchorage + +
@@ -22,7 +27,10 @@

Temperature (F):

-
+
+

Enter City Name:

+ +

Weather Garden

diff --git a/src/index.js b/src/index.js index 938b01030..8ae58d504 100644 --- a/src/index.js +++ b/src/index.js @@ -43,6 +43,12 @@ const changesByTemp = () => { } }; +const changeCityName = () => { + const cityInput = document.getElementById('city-input').value; + const currentCityName = document.getElementById('city-name'); + currentCityName.textContent = cityInput; +}; + const registerEventHandlers = () => { const increaseTempButton = document.querySelector("#increase-temp-button"); increaseTempButton.addEventListener("click", increaseTemp); @@ -50,6 +56,9 @@ const registerEventHandlers = () => { const decreaseTempButton = document.querySelector("#decrease-temp-button"); decreaseTempButton.addEventListener("click", decreaseTemp); + const cityInput = document.getElementById('city-input'); + cityInput.addEventListener('input', changeCityName); + }; document.addEventListener("DOMContentLoaded", registerEventHandlers); \ No newline at end of file diff --git a/styles/index.css b/styles/index.css index 703a3981f..5caf65f19 100644 --- a/styles/index.css +++ b/styles/index.css @@ -1,6 +1,14 @@ header{ - display: flex; - justify-content: flex-start; + /* display: flex; + justify-content: flex-start; */ + display: grid; + grid-template-rows: 1fr 1fr; +} + +#city-name { + color: #ae78f0; + font-size: 150%; + font-weight: bold; } body{ From 929a202c6aa44bbf8914e0fb89ffc896c7e8450e Mon Sep 17 00:00:00 2001 From: Shannon Bellemore Date: Tue, 21 Jun 2022 01:45:49 -0600 Subject: [PATCH 4/6] wave 4 --- index.html | 3 +++ src/index.js | 46 ++++++++++++++++++++++++++++++++++++++++++++++ styles/index.css | 6 +++++- 3 files changed, 54 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index f3b95b750..85b9e081a 100644 --- a/index.html +++ b/index.html @@ -25,6 +25,9 @@

Temperature (F):

49 +
+ +
diff --git a/src/index.js b/src/index.js index 8ae58d504..7e8ef687a 100644 --- a/src/index.js +++ b/src/index.js @@ -3,6 +3,7 @@ const state = { tempDegrees: 50, + city: 'Anchorage', }; // increase temperature @@ -25,6 +26,7 @@ const decreaseTemp = () => { const changesByTemp = () => { const tempContainer = document.getElementById('temp-number'); const gardenContainer = document.getElementById('ground-garden') + tempContainer.textContent = state.tempDegrees; if(state.tempDegrees >= 80) { tempContainer.style.color = '#d04123'; gardenContainer.textContent = '🌵__🐍_🦂_🌵🌵__🐍_🏜_🦂' @@ -47,8 +49,50 @@ const changeCityName = () => { const cityInput = document.getElementById('city-input').value; const currentCityName = document.getElementById('city-name'); currentCityName.textContent = cityInput; + state.city = cityInput; +}; + +const convertTemp = (degreesKelvin) => { + let degreesFahrenheit = Math.round(1.8*(degreesKelvin -273) + 32); + return degreesFahrenheit; }; +const getLatitudeAndLongitude = () => { + axios + .get('http://127.0.0.1:5000/location', { + params: { + q: state.city + }, + }) + .then((response) => { + let latitude = response.data[0].lat; + let longitude = response.data[0].lon; + getTemperature(latitude, longitude); + }) + .catch((error) => { + console.log('error with getting lat & lon!', error.response.data); + }); +} + +const getTemperature = (latitude, longitude) => { + axios + .get('http://127.0.0.1:5000/weather', { + params: { + lat: latitude, + lon: longitude, + }, + }) + .then((response) => { + const degreesKelvin = response.data.current.temp; + let currentTemp = convertTemp(degreesKelvin); + state.tempDegrees = currentTemp; + changesByTemp(); + }) + .catch((error) => { + console.log('error with getting temp!', error.response.data); + }); +} + const registerEventHandlers = () => { const increaseTempButton = document.querySelector("#increase-temp-button"); increaseTempButton.addEventListener("click", increaseTemp); @@ -59,6 +103,8 @@ const registerEventHandlers = () => { const cityInput = document.getElementById('city-input'); cityInput.addEventListener('input', changeCityName); + const getRealTemp = document.getElementById('real-temp-button'); + getRealTemp.addEventListener("click", getLatitudeAndLongitude); }; document.addEventListener("DOMContentLoaded", registerEventHandlers); \ No newline at end of file diff --git a/styles/index.css b/styles/index.css index 5caf65f19..da7c812d5 100644 --- a/styles/index.css +++ b/styles/index.css @@ -75,12 +75,16 @@ body{ font-size: 125%; } +#real-temp-button:hover{ + cursor: pointer; +} + #decrease-temp-button:hover{ cursor: pointer; } #temp-number{ - font-size: 250%; + font-size: 200%; font-weight: bold; } From cbe337575d228bbf035748d168243fb616a60742 Mon Sep 17 00:00:00 2001 From: Shannon Bellemore Date: Tue, 21 Jun 2022 03:32:39 -0600 Subject: [PATCH 5/6] wave 5 --- index.html | 8 ++++++++ src/index.js | 24 ++++++++++++++++++++++++ 2 files changed, 32 insertions(+) diff --git a/index.html b/index.html index 85b9e081a..a0442d1d8 100644 --- a/index.html +++ b/index.html @@ -38,6 +38,14 @@

Enter City Name:

Weather Garden

+

Select Sky:

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

🌲🌲⛄️🌲⛄️🍂🌲🍁🌲🌲⛄️🍂🌲
diff --git a/src/index.js b/src/index.js index 7e8ef687a..602e845b4 100644 --- a/src/index.js +++ b/src/index.js @@ -4,6 +4,7 @@ const state = { tempDegrees: 50, city: 'Anchorage', + sky: 'snowy', }; // increase temperature @@ -45,6 +46,23 @@ const changesByTemp = () => { } }; +// changes the sky element +const changeSky = () => { + let currentSky = document.getElementById('skys').value; + let skyContainer = document.getElementById('sky-garden'); + state.sky = currentSky; + if(state.sky === 'cloudy') { + skyContainer.textContent = '☁️☁️ ☁️ ☁️☁️ ☁️ 🌤 ☁️ ☁️☁️' + } else if(state.sky === 'sunny') { + skyContainer.textContent = '☁️ ☁️ ☁️ ☀️ ☁️ ☁️' + } else if(state.sky === 'rainy') { + skyContainer.textContent = '🌧🌈⛈🌧🌧💧⛈🌧🌦🌧💧🌧🌧' + } else if(state.sky === 'snowy') { + skyContainer.textContent = '🌨❄️🌨🌨❄️❄️🌨❄️🌨❄️❄️🌨🌨' + } +}; + +// changes city name according to text input const changeCityName = () => { const cityInput = document.getElementById('city-input').value; const currentCityName = document.getElementById('city-name'); @@ -52,11 +70,13 @@ const changeCityName = () => { state.city = cityInput; }; +// converts given degrees kelvin to fahrenheit const convertTemp = (degreesKelvin) => { let degreesFahrenheit = Math.round(1.8*(degreesKelvin -273) + 32); return degreesFahrenheit; }; +// gets latitiude and longitude for current city inputted const getLatitudeAndLongitude = () => { axios .get('http://127.0.0.1:5000/location', { @@ -74,6 +94,7 @@ const getLatitudeAndLongitude = () => { }); } +// gets current real time temperature using latitude and longitude const getTemperature = (latitude, longitude) => { axios .get('http://127.0.0.1:5000/weather', { @@ -105,6 +126,9 @@ const registerEventHandlers = () => { const getRealTemp = document.getElementById('real-temp-button'); getRealTemp.addEventListener("click", getLatitudeAndLongitude); + + const changeCurrentSky = document.getElementById('skys'); + changeCurrentSky.addEventListener("change", changeSky); }; document.addEventListener("DOMContentLoaded", registerEventHandlers); \ No newline at end of file From e8cb4d8af1b793ece070b2723f46a5bb883413ea Mon Sep 17 00:00:00 2001 From: Shannon Bellemore Date: Tue, 21 Jun 2022 22:43:44 -0600 Subject: [PATCH 6/6] wave 6 --- index.html | 4 +++- src/index.js | 24 ++++++++++++++++++------ styles/index.css | 14 ++++++++++++++ 3 files changed, 35 insertions(+), 7 deletions(-) diff --git a/index.html b/index.html index a0442d1d8..0651ea1e1 100644 --- a/index.html +++ b/index.html @@ -32,7 +32,9 @@

Temperature (F):

Enter City Name:

- +
+
+
diff --git a/src/index.js b/src/index.js index 602e845b4..ce2b6da3f 100644 --- a/src/index.js +++ b/src/index.js @@ -70,6 +70,15 @@ const changeCityName = () => { state.city = cityInput; }; +// reset city name to the default +const resetCityName = () => { + const cityContainer = document.getElementById('city-input'); + const currentCityName = document.getElementById('city-name'); + state.city = 'Anchorage'; + cityContainer.value = state.city; + currentCityName.textContent = state.city; +}; + // converts given degrees kelvin to fahrenheit const convertTemp = (degreesKelvin) => { let degreesFahrenheit = Math.round(1.8*(degreesKelvin -273) + 32); @@ -115,20 +124,23 @@ const getTemperature = (latitude, longitude) => { } const registerEventHandlers = () => { - const increaseTempButton = document.querySelector("#increase-temp-button"); - increaseTempButton.addEventListener("click", increaseTemp); + const increaseTempButton = document.querySelector('#increase-temp-button'); + increaseTempButton.addEventListener('click', increaseTemp); - const decreaseTempButton = document.querySelector("#decrease-temp-button"); - decreaseTempButton.addEventListener("click", decreaseTemp); + const decreaseTempButton = document.querySelector('#decrease-temp-button'); + decreaseTempButton.addEventListener('click', decreaseTemp); const cityInput = document.getElementById('city-input'); cityInput.addEventListener('input', changeCityName); const getRealTemp = document.getElementById('real-temp-button'); - getRealTemp.addEventListener("click", getLatitudeAndLongitude); + getRealTemp.addEventListener('click', getLatitudeAndLongitude); const changeCurrentSky = document.getElementById('skys'); - changeCurrentSky.addEventListener("change", changeSky); + changeCurrentSky.addEventListener('change', changeSky); + + const resetCity = document.getElementById('reset-city-button'); + resetCity.addEventListener('click', resetCityName); }; document.addEventListener("DOMContentLoaded", registerEventHandlers); \ No newline at end of file diff --git a/styles/index.css b/styles/index.css index da7c812d5..f8254a17b 100644 --- a/styles/index.css +++ b/styles/index.css @@ -75,6 +75,11 @@ body{ font-size: 125%; } +#real-temp-button{ + color: whitesmoke; + background-color: #1e475b; +} + #real-temp-button:hover{ cursor: pointer; } @@ -88,3 +93,12 @@ body{ font-weight: bold; } +#reset-city-button{ + color: whitesmoke; + background-color: #1e475b; +} + +#reset-city-button:hover{ + cursor: pointer; +} +