From eedb12aeaeb736f324015d923ab54b07b4bacd87 Mon Sep 17 00:00:00 2001 From: shiyinxi Date: Mon, 2 Dec 2024 13:50:33 -0800 Subject: [PATCH 01/15] wave 01 completed --- index.html | 41 +++++++++++- package-lock.json | 6 ++ src/index.js | 2 + styles/index.css | 164 ++++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 212 insertions(+), 1 deletion(-) create mode 100644 package-lock.json diff --git a/index.html b/index.html index 5540cc6ea..4998543b5 100644 --- a/index.html +++ b/index.html @@ -1,5 +1,6 @@ + @@ -7,9 +8,47 @@ Weather Report - + + +
+

Weather Report

+ For the lovely city of + +
+
+

Temperature

+
+
+ ⬆️ + + ⬇️ +
+ +
+
+
+

Sky

+ +
+ +
+

City Name

+ + +
+ +
+

Weather Garden

+
+
+
+
+
+ diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 000000000..514519b5f --- /dev/null +++ b/package-lock.json @@ -0,0 +1,6 @@ +{ + "name": "weather-report", + "lockfileVersion": 3, + "requires": true, + "packages": {} +} diff --git a/src/index.js b/src/index.js index e69de29bb..23e72fdc5 100644 --- a/src/index.js +++ b/src/index.js @@ -0,0 +1,2 @@ +"use strict"; + diff --git a/styles/index.css b/styles/index.css index e69de29bb..0dfddb0df 100644 --- a/styles/index.css +++ b/styles/index.css @@ -0,0 +1,164 @@ +h2 { + margin: 0 auto 2rem auto; +} + +body { +display: grid; +grid-template-columns: 1fr 2fr; +grid-template-rows: auto auto auto auto; +grid-gap: 1rem; + +font-family: "Rubik", sans-serif; +font-size: 18px; +background-color: #1b69f9; +margin: 2rem; +} + +.header__header { +color: white; +grid-column: span 3; +display: flex; +align-items: center; +margin: 2rem auto 3rem 0; +} + +.header__header > h1 { +margin-right: 2rem; +font-size: 3em; +} + +.header__city-name { +font-style: oblique; +font-size: 2rem; +} + +.header__city-name::before, +.header__city-name::after { +content: "✨"; +} + +.temperature__section, +.sky__section, +.city-name__section { +border-radius: 8px; +padding: 2rem; +background-color: white; +} + +.temperature__section { +grid-row: 2; +} + +.temperature__section button { + background-color: #1b69f9; + border: none; + color: white; + padding: 15px 32px; + text-align: center; + text-decoration: none; + display: inline-block; + font-size: 16px; + border-radius: 10px +} + +.sky__section { +grid-row: 3; +} + +.city-name__section { +grid-row: 4; +} + +.garden__section { +grid-row: 2 / span 3; +grid-column: 2; +text-align: center; +align-self: center; +} + +.temperature__content { +display: flex; +flex-direction: row; +justify-content: space-around; +/* justify-content: center; */ +} + +#tempValue { +font-size: 3rem; +margin-left: 1.5rem; +/* padding-right: 1rem; */ +/* margin-right: 1.5rem; */ +} + +.temperature__controls { +display: flex; +flex-direction: column; +align-items: center; +} + +.garden__section > h2 { +color: white; +} + +.garden__content { +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; +} + +.city-name__reset-btn { +border: 0; +background-color: #1655cc; +color: white; +border-radius: 8px; +padding: 1rem; +font-family: "Rubik", sans-serif; +} + +.red { +color: red; +} + +.orange { +color: orange; +} + +.yellow { +color: gold; +} + +.yellow-green { +color: yellowgreen; +} + +.green { +color: green; +} + +.teal { +color: teal; +} + +.cloudy { +background-color: lightgrey; +} + +.sunny { +background-color: rgb(221, 255, 255); +} + +.rainy { +background-color: lightblue; +} + +.snowy { +background-color: lightsteelblue; +} \ No newline at end of file From 80c10c3624907f44897193633d1f5bc6812af63a Mon Sep 17 00:00:00 2001 From: shiyinxi Date: Mon, 2 Dec 2024 14:53:02 -0800 Subject: [PATCH 02/15] add increase/decrease button event handler --- src/index.js | 25 +++++++++++++++++++++++++ 1 file changed, 25 insertions(+) diff --git a/src/index.js b/src/index.js index 23e72fdc5..de8042e1b 100644 --- a/src/index.js +++ b/src/index.js @@ -1,2 +1,27 @@ "use strict"; +const state = { + curTemp : 60, +} + +const increaseTemp = () => { + const temp = document.getElementById("tempValue"); + state.curTemp += 1; + temp.textContent = state.curTemp; +}; + +const decreaseTemp = () => { + const temp = document.getElementById("tempValue"); + state.curTemp -= 1; + temp.textContent = state.curTemp; +}; + +const registerEventHandlers= () => { + const increaseButton = document.getElementById("increaseTempControl"); + increaseButton.addEventListener("click", increaseTemp) + + const decreaseButton = document.getElementById("decreaseTempControl"); + decreaseButton.addEventListener("click", decreaseTemp) +}; + +document.addEventListener("DOMContentLoaded", registerEventHandlers); \ No newline at end of file From 0c9f008e75a12427d730f3c67122fc3b96dc3495 Mon Sep 17 00:00:00 2001 From: shiyinxi Date: Mon, 2 Dec 2024 20:58:22 -0800 Subject: [PATCH 03/15] wave 02 completed --- src/index.js | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) diff --git a/src/index.js b/src/index.js index de8042e1b..c79da75fd 100644 --- a/src/index.js +++ b/src/index.js @@ -8,14 +8,36 @@ const increaseTemp = () => { const temp = document.getElementById("tempValue"); state.curTemp += 1; temp.textContent = state.curTemp; + changeColorAndLandscape(state.curTemp); }; const decreaseTemp = () => { const temp = document.getElementById("tempValue"); state.curTemp -= 1; temp.textContent = state.curTemp; + changeColorAndLandscape(state.curTemp); }; +const changeColorAndLandscape = (temp) => { + if (temp >= 80) { + document.getElementById("tempValue").style.color = "Red"; + document.getElementById("landscape").textContent = "🌵__🐍_🦂_🌵🌵__🐍_🏜_🦂"; + } else if (temp >= 70) { + document.getElementById("tempValue").style.color = "Orange"; + document.getElementById("landscape").textContent = "🌸🌿🌼__🌷🌻🌿_☘️🌱_🌻🌷"; + } else if (temp >= 60) { + document.getElementById("tempValue").style.color = "Yellow"; + document.getElementById("landscape").textContent = "🌾🌾_🍃_🪨__🛤_🌾🌾🌾_🍃"; + } else if (temp >= 50) { + document.getElementById("tempValue").style.color = "Green"; + document.getElementById("landscape").textContent = "🌲🌲⛄️🌲⛄️🍂🌲🍁🌲🌲⛄️🍂🌲"; + } else { + document.getElementById("tempValue").style.color = "Teal"; + document.getElementById("landscape").textContent = "🌲🌲⛄️🌲⛄️🍂🌲🍁🌲🌲⛄️🍂🌲"; + } +}; + + const registerEventHandlers= () => { const increaseButton = document.getElementById("increaseTempControl"); increaseButton.addEventListener("click", increaseTemp) From a3224b8c35619cc2e82167ee1694118c8dd1b94f Mon Sep 17 00:00:00 2001 From: shiyinxi Date: Mon, 2 Dec 2024 21:09:21 -0800 Subject: [PATCH 04/15] refactor changecolorand landscape function --- src/index.js | 22 ++++++++++++---------- 1 file changed, 12 insertions(+), 10 deletions(-) diff --git a/src/index.js b/src/index.js index c79da75fd..97bec2831 100644 --- a/src/index.js +++ b/src/index.js @@ -19,21 +19,23 @@ const decreaseTemp = () => { }; const changeColorAndLandscape = (temp) => { + const tempValue = document.getElementById("tempValue"); + const landscape = document.getElementById("landscape"); if (temp >= 80) { - document.getElementById("tempValue").style.color = "Red"; - document.getElementById("landscape").textContent = "🌵__🐍_🦂_🌵🌵__🐍_🏜_🦂"; + tempValue.style.color = "Red"; + landscape.textContent = "🌵__🐍_🦂_🌵🌵__🐍_🏜_🦂"; } else if (temp >= 70) { - document.getElementById("tempValue").style.color = "Orange"; - document.getElementById("landscape").textContent = "🌸🌿🌼__🌷🌻🌿_☘️🌱_🌻🌷"; + tempValue.style.color = "Orange"; + landscape.textContent = "🌸🌿🌼__🌷🌻🌿_☘️🌱_🌻🌷"; } else if (temp >= 60) { - document.getElementById("tempValue").style.color = "Yellow"; - document.getElementById("landscape").textContent = "🌾🌾_🍃_🪨__🛤_🌾🌾🌾_🍃"; + tempValue.style.color = "Yellow"; + landscape.textContent = "🌾🌾_🍃_🪨__🛤_🌾🌾🌾_🍃"; } else if (temp >= 50) { - document.getElementById("tempValue").style.color = "Green"; - document.getElementById("landscape").textContent = "🌲🌲⛄️🌲⛄️🍂🌲🍁🌲🌲⛄️🍂🌲"; + tempValue.style.color = "Green"; + landscape.textContent = "🌲🌲⛄️🌲⛄️🍂🌲🍁🌲🌲⛄️🍂🌲"; } else { - document.getElementById("tempValue").style.color = "Teal"; - document.getElementById("landscape").textContent = "🌲🌲⛄️🌲⛄️🍂🌲🍁🌲🌲⛄️🍂🌲"; + tempValue.style.color = "Teal"; + landscape.textContent = "🌲🌲⛄️🌲⛄️🍂🌲🍁🌲🌲⛄️🍂🌲"; } }; From 19b1a684b4c6b35842fcf5884add1e6d749e33f9 Mon Sep 17 00:00:00 2001 From: shiyinxi Date: Mon, 2 Dec 2024 21:37:56 -0800 Subject: [PATCH 05/15] wave 03 completed --- src/index.js | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/index.js b/src/index.js index 97bec2831..4cad07517 100644 --- a/src/index.js +++ b/src/index.js @@ -39,6 +39,10 @@ const changeColorAndLandscape = (temp) => { } }; +const changeCityName = () => { + const cityName = document.getElementById("cityNameInput").value; + document.getElementById("headerCityName").textContent = cityName; +}; const registerEventHandlers= () => { const increaseButton = document.getElementById("increaseTempControl"); @@ -46,6 +50,9 @@ const registerEventHandlers= () => { const decreaseButton = document.getElementById("decreaseTempControl"); decreaseButton.addEventListener("click", decreaseTemp) + + const cityResetButton = document.getElementById("cityNameReset"); + cityResetButton.addEventListener("click", changeCityName) }; document.addEventListener("DOMContentLoaded", registerEventHandlers); \ No newline at end of file From 64c61f9cc31559d9e889876a58d16713789af405 Mon Sep 17 00:00:00 2001 From: luqi Date: Tue, 3 Dec 2024 11:15:31 -0800 Subject: [PATCH 06/15] wave4 in progress --- index.html | 2 +- src/index.js | 56 ++++++++++++++++++++++++++++++++++++++++++++++++++-- 2 files changed, 55 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index 4998543b5..5f0670c35 100644 --- a/index.html +++ b/index.html @@ -48,7 +48,7 @@

Weather Garden

- + diff --git a/src/index.js b/src/index.js index 4cad07517..a76296a32 100644 --- a/src/index.js +++ b/src/index.js @@ -1,7 +1,7 @@ "use strict"; const state = { - curTemp : 60, + curTemp: 60, } const increaseTemp = () => { @@ -39,12 +39,61 @@ const changeColorAndLandscape = (temp) => { } }; +const axios = require('axios'); + +const findLatitudeAndLongitude = () => { + let latitude, longitude; + axios.get('http://127.0.0.1:5000/location', + { + params: { + q: 'Seattle', + } + }) + .then((response) => { + latitude = response.data[0].lat; + longitude = response.data[0].lon; + findWeather(latitude, longitude); + }) + .catch((error) => { + console.log('error in findLatitudeAndLongitude!'); + }); +} + +const findWeather = (latitude, longitude) => { + axios.get('http://127.0.0.1:5000/weather') + .then((response) => { + const Fahrenheit = response.data.main.temp * 9/5 - 459.67; + state.curTemp = Fahrenheit + }) + // °F = K * 9/5 - 459.67 + .catch((error) => { + console.log('error in findLocation!'); + }); +} + +findLatitudeAndLongitude('Seattle, Washington, USA'); + +// const serverURL = 'http://127.0.0.1:5000/' +// const getCurrentTemp = () => { +// const cityName = document.getElementById("cityNameInput").value; +// const axios = require('axios'); +// axios +// .get('{serverURL}/location'), { +// q: cityName, +// } + +// }; +// const getCurrentWeather = () => { + +// } + + const changeCityName = () => { const cityName = document.getElementById("cityNameInput").value; document.getElementById("headerCityName").textContent = cityName; }; -const registerEventHandlers= () => { +const registerEventHandlers = () => { const increaseButton = document.getElementById("increaseTempControl"); increaseButton.addEventListener("click", increaseTemp) @@ -53,6 +102,9 @@ const registerEventHandlers= () => { const cityResetButton = document.getElementById("cityNameReset"); cityResetButton.addEventListener("click", changeCityName) + + const updateTempButton = document.getElementById('currentTempButton') + updateTempButton.addEventListener('click', findLatitudeAndLongitude) }; document.addEventListener("DOMContentLoaded", registerEventHandlers); \ No newline at end of file From 568bdfd2b57e5c9d4497d741662ce7bad87cd3ee Mon Sep 17 00:00:00 2001 From: luqi Date: Tue, 3 Dec 2024 11:47:44 -0800 Subject: [PATCH 07/15] wave4 debug --- src/index.js | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/src/index.js b/src/index.js index a76296a32..5150d3f1f 100644 --- a/src/index.js +++ b/src/index.js @@ -39,14 +39,15 @@ const changeColorAndLandscape = (temp) => { } }; -const axios = require('axios'); +// const axios = require('axios'); const findLatitudeAndLongitude = () => { let latitude, longitude; + const cityName = document.getElementById("cityNameInput").value; axios.get('http://127.0.0.1:5000/location', { params: { - q: 'Seattle', + q: cityName, } }) .then((response) => { @@ -60,18 +61,21 @@ const findLatitudeAndLongitude = () => { } const findWeather = (latitude, longitude) => { - axios.get('http://127.0.0.1:5000/weather') + axios.get('http://127.0.0.1:5000/weather', { + params: { lat: latitude, lon: longitude }, + }) .then((response) => { const Fahrenheit = response.data.main.temp * 9/5 - 459.67; - state.curTemp = Fahrenheit + state.curTemp = Fahrenheit; }) // °F = K * 9/5 - 459.67 + // Math.round( .catch((error) => { - console.log('error in findLocation!'); + console.log('error in Weather!'); }); } -findLatitudeAndLongitude('Seattle, Washington, USA'); +// findLatitudeAndLongitude('Seattle'); // const serverURL = 'http://127.0.0.1:5000/' // const getCurrentTemp = () => { From 51c32ac9247c2dd04da79706d73399b75be6d3f0 Mon Sep 17 00:00:00 2001 From: luqi Date: Tue, 3 Dec 2024 12:09:53 -0800 Subject: [PATCH 08/15] complete wave4 --- src/index.js | 24 ++++-------------------- 1 file changed, 4 insertions(+), 20 deletions(-) diff --git a/src/index.js b/src/index.js index 5150d3f1f..43a54d59c 100644 --- a/src/index.js +++ b/src/index.js @@ -65,32 +65,16 @@ const findWeather = (latitude, longitude) => { params: { lat: latitude, lon: longitude }, }) .then((response) => { - const Fahrenheit = response.data.main.temp * 9/5 - 459.67; - state.curTemp = Fahrenheit; + const kelvinTemp = response.data.main.temp; + const fahrenheitTemp = Math.round(kelvinTemp * 9 / 5 - 459.67); + state.curTemp = fahrenheitTemp; }) - // °F = K * 9/5 - 459.67 - // Math.round( + .catch((error) => { console.log('error in Weather!'); }); } -// findLatitudeAndLongitude('Seattle'); - -// const serverURL = 'http://127.0.0.1:5000/' -// const getCurrentTemp = () => { -// const cityName = document.getElementById("cityNameInput").value; -// const axios = require('axios'); -// axios -// .get('{serverURL}/location'), { -// q: cityName, -// } - -// }; -// const getCurrentWeather = () => { - -// } - const changeCityName = () => { const cityName = document.getElementById("cityNameInput").value; From a99f0303b8607e3ee65a14548577b74a025df098 Mon Sep 17 00:00:00 2001 From: shiyinxi Date: Tue, 3 Dec 2024 12:26:24 -0800 Subject: [PATCH 09/15] wave 04 completed --- src/index.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/index.js b/src/index.js index 43a54d59c..7283e4373 100644 --- a/src/index.js +++ b/src/index.js @@ -68,6 +68,8 @@ const findWeather = (latitude, longitude) => { const kelvinTemp = response.data.main.temp; const fahrenheitTemp = Math.round(kelvinTemp * 9 / 5 - 459.67); state.curTemp = fahrenheitTemp; + const temp = document.getElementById("tempValue"); + temp.textContent = state.curTemp; }) .catch((error) => { From 3c35895e58c175fe0c7709561e19e4d13971a2e6 Mon Sep 17 00:00:00 2001 From: luqi Date: Tue, 3 Dec 2024 12:56:05 -0800 Subject: [PATCH 10/15] complete wave5 --- index.html | 6 +++++- src/index.js | 29 +++++++++++++++++++++++------ 2 files changed, 28 insertions(+), 7 deletions(-) diff --git a/index.html b/index.html index 5f0670c35..7e6098275 100644 --- a/index.html +++ b/index.html @@ -31,7 +31,11 @@

Temperature

Sky

diff --git a/src/index.js b/src/index.js index 7283e4373..a1b6fcf4b 100644 --- a/src/index.js +++ b/src/index.js @@ -39,7 +39,21 @@ const changeColorAndLandscape = (temp) => { } }; -// const axios = require('axios'); +const updateSky = () => { + const skySelect = document.getElementById("skySelect").value; + const sky = document.getElementById("sky") + if (skySelect === "sunny") { + sky.textContent = "☁️ ☁️ ☁️ ☀️ ☁️ ☁️"; + } else if (skySelect === "cloudy") { + sky.textContent = "☁️☁️ ☁️ ☁️☁️ ☁️ 🌤 ☁️ ☁️☁️"; + } else if (skySelect === "rainy") { + sky.textContent = "🌧🌈⛈🌧🌧💧⛈🌧🌦🌧💧🌧🌧"; + } else if (skySelect === "snowy") { + sky.textContent = "🌨❄️🌨🌨❄️❄️🌨❄️🌨❄️❄️🌨🌨"; + } else { + sky.textContent = "----------------------------- "; + } +}; const findLatitudeAndLongitude = () => { let latitude, longitude; @@ -85,16 +99,19 @@ const changeCityName = () => { const registerEventHandlers = () => { const increaseButton = document.getElementById("increaseTempControl"); - increaseButton.addEventListener("click", increaseTemp) + increaseButton.addEventListener("click", increaseTemp); const decreaseButton = document.getElementById("decreaseTempControl"); - decreaseButton.addEventListener("click", decreaseTemp) + decreaseButton.addEventListener("click", decreaseTemp); const cityResetButton = document.getElementById("cityNameReset"); - cityResetButton.addEventListener("click", changeCityName) + cityResetButton.addEventListener("click", changeCityName); + + const updateTempButton = document.getElementById('currentTempButton'); + updateTempButton.addEventListener('click', findLatitudeAndLongitude); - const updateTempButton = document.getElementById('currentTempButton') - updateTempButton.addEventListener('click', findLatitudeAndLongitude) + const skySelect = document.getElementById("skySelect"); + skySelect.addEventListener("change", updateSky); }; document.addEventListener("DOMContentLoaded", registerEventHandlers); \ No newline at end of file From f49daa39a64eabeeb8d91774b6c64d5702e351cc Mon Sep 17 00:00:00 2001 From: luqi Date: Wed, 4 Dec 2024 10:25:27 -0800 Subject: [PATCH 11/15] complete wave6 --- src/index.js | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/src/index.js b/src/index.js index a1b6fcf4b..cc90319dd 100644 --- a/src/index.js +++ b/src/index.js @@ -67,7 +67,8 @@ const findLatitudeAndLongitude = () => { .then((response) => { latitude = response.data[0].lat; longitude = response.data[0].lon; - findWeather(latitude, longitude); + const temp = findWeather(latitude, longitude); + changeColorAndLandscape(temp) }) .catch((error) => { console.log('error in findLatitudeAndLongitude!'); @@ -94,7 +95,13 @@ const findWeather = (latitude, longitude) => { const changeCityName = () => { const cityName = document.getElementById("cityNameInput").value; + const defaultCity = 'Seattle'; + if (cityName === '') { + document.getElementById("headerCityName").textContent = defaultCity; + } else { document.getElementById("headerCityName").textContent = cityName; + }; + }; const registerEventHandlers = () => { @@ -114,4 +121,7 @@ const registerEventHandlers = () => { skySelect.addEventListener("change", updateSky); }; -document.addEventListener("DOMContentLoaded", registerEventHandlers); \ No newline at end of file + +document.addEventListener("DOMContentLoaded", registerEventHandlers); +document.addEventListener("DOMContentLoaded", changeCityName); +document.addEventListener("DOMContentLoaded", findLatitudeAndLongitude); \ No newline at end of file From 6c55ed72478f8a98be15853881170d45832a928b Mon Sep 17 00:00:00 2001 From: luqi Date: Wed, 4 Dec 2024 12:46:46 -0800 Subject: [PATCH 12/15] fix some bugs in findlatitudeandlogitude and resetcityname --- src/index.js | 27 +++++++++++++++------------ 1 file changed, 15 insertions(+), 12 deletions(-) diff --git a/src/index.js b/src/index.js index cc90319dd..20b3fea20 100644 --- a/src/index.js +++ b/src/index.js @@ -67,11 +67,11 @@ const findLatitudeAndLongitude = () => { .then((response) => { latitude = response.data[0].lat; longitude = response.data[0].lon; - const temp = findWeather(latitude, longitude); - changeColorAndLandscape(temp) + findWeather(latitude, longitude); + changeColorAndLandscape(state.curTemp) }) .catch((error) => { - console.log('error in findLatitudeAndLongitude!'); + console.log('error in testfindLatitudeAndLongitude!'); }); } @@ -85,6 +85,7 @@ const findWeather = (latitude, longitude) => { state.curTemp = fahrenheitTemp; const temp = document.getElementById("tempValue"); temp.textContent = state.curTemp; + }) .catch((error) => { @@ -92,16 +93,19 @@ const findWeather = (latitude, longitude) => { }); } +const resetCityName = () => { + const defaultCity = 'Seattle'; + const cityName = document.getElementById("cityNameInput"); + const headerCityName = document.getElementById("headerCityName") + cityNameInput.value = defaultCity; + headerCityName.textContent = defaultCity; + findLatitudeAndLongitude(defaultCity); +}; const changeCityName = () => { const cityName = document.getElementById("cityNameInput").value; - const defaultCity = 'Seattle'; - if (cityName === '') { - document.getElementById("headerCityName").textContent = defaultCity; - } else { document.getElementById("headerCityName").textContent = cityName; - }; - + findLatitudeAndLongitude(defaultCity); }; const registerEventHandlers = () => { @@ -112,7 +116,7 @@ const registerEventHandlers = () => { decreaseButton.addEventListener("click", decreaseTemp); const cityResetButton = document.getElementById("cityNameReset"); - cityResetButton.addEventListener("click", changeCityName); + cityResetButton.addEventListener("click", resetCityName); const updateTempButton = document.getElementById('currentTempButton'); updateTempButton.addEventListener('click', findLatitudeAndLongitude); @@ -123,5 +127,4 @@ const registerEventHandlers = () => { document.addEventListener("DOMContentLoaded", registerEventHandlers); -document.addEventListener("DOMContentLoaded", changeCityName); -document.addEventListener("DOMContentLoaded", findLatitudeAndLongitude); \ No newline at end of file +document.addEventListener("DOMContentLoaded", resetCityName); \ No newline at end of file From 4ad3c2a27cabcff32b30d6eac1ccc118fcc3c858 Mon Sep 17 00:00:00 2001 From: luqi Date: Wed, 4 Dec 2024 13:47:34 -0800 Subject: [PATCH 13/15] add citynameinputeventhandler --- src/index.js | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/src/index.js b/src/index.js index 20b3fea20..5d000218a 100644 --- a/src/index.js +++ b/src/index.js @@ -97,15 +97,16 @@ const resetCityName = () => { const defaultCity = 'Seattle'; const cityName = document.getElementById("cityNameInput"); const headerCityName = document.getElementById("headerCityName") - cityNameInput.value = defaultCity; + cityName.value = defaultCity; headerCityName.textContent = defaultCity; findLatitudeAndLongitude(defaultCity); }; const changeCityName = () => { const cityName = document.getElementById("cityNameInput").value; - document.getElementById("headerCityName").textContent = cityName; - findLatitudeAndLongitude(defaultCity); + const headerCityName = document.getElementById("headerCityName"); + headerCityName.textContent = cityName; + findLatitudeAndLongitude(cityName); }; const registerEventHandlers = () => { @@ -118,6 +119,9 @@ const registerEventHandlers = () => { const cityResetButton = document.getElementById("cityNameReset"); cityResetButton.addEventListener("click", resetCityName); + const cityNameInput = document.getElementById("cityNameInput"); + cityNameInput.addEventListener("click", changeCityName); + const updateTempButton = document.getElementById('currentTempButton'); updateTempButton.addEventListener('click', findLatitudeAndLongitude); From afcf81ed1c94cc25c8a726c2447154ff05f2055a Mon Sep 17 00:00:00 2001 From: shiyinxi Date: Wed, 4 Dec 2024 20:01:32 -0800 Subject: [PATCH 14/15] add weather garden background --- styles/index.css | 3 +++ 1 file changed, 3 insertions(+) diff --git a/styles/index.css b/styles/index.css index 0dfddb0df..206949164 100644 --- a/styles/index.css +++ b/styles/index.css @@ -112,6 +112,9 @@ justify-content: space-between; border-radius: 8px; font-size: 2em; +height: 200px; +width: 500px; +background-color: lightblue; } .city-name__reset-btn { From e2a5853ae0420a4c4c04a9f85cedaf94f092c986 Mon Sep 17 00:00:00 2001 From: shiyinxi Date: Wed, 4 Dec 2024 21:56:46 -0800 Subject: [PATCH 15/15] change city name button event --- index.html | 2 +- src/index.js | 16 ++++++++-------- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/index.html b/index.html index 7e6098275..ffd4bd6ab 100644 --- a/index.html +++ b/index.html @@ -32,7 +32,7 @@

Temperature

Sky