From 4538a2f5f5e4a707533f133e306ea8b8d834f9a5 Mon Sep 17 00:00:00 2001 From: Aleida Vieyra Date: Mon, 2 Dec 2024 17:10:40 -0500 Subject: [PATCH 01/21] complete setup in wave 1 --- index.html | 43 +++++++++++- package-lock.json | 6 ++ styles/index.css | 165 ++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 212 insertions(+), 2 deletions(-) create mode 100644 package-lock.json diff --git a/index.html b/index.html index 5540cc6ea..fe5e0d257 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

+
+
+
+
+
+ - + \ No newline at end of file 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/styles/index.css b/styles/index.css index e69de29bb..b492dbf29 100644 --- a/styles/index.css +++ b/styles/index.css @@ -0,0 +1,165 @@ +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; +} + From ad3e5f50cab5eacdc1caf0978169e4b5b6917b70 Mon Sep 17 00:00:00 2001 From: Aleida Vieyra Date: Mon, 2 Dec 2024 17:19:40 -0500 Subject: [PATCH 02/21] deleted package-lock.json file --- package-lock.json | 6 ------ 1 file changed, 6 deletions(-) delete mode 100644 package-lock.json diff --git a/package-lock.json b/package-lock.json deleted file mode 100644 index 514519b5f..000000000 --- a/package-lock.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "name": "weather-report", - "lockfileVersion": 3, - "requires": true, - "packages": {} -} From 72b8dc0f9fd624cf84c3c7f9e5f48e524a601576 Mon Sep 17 00:00:00 2001 From: vlada Date: Mon, 2 Dec 2024 14:21:54 -0800 Subject: [PATCH 03/21] package-lock.json --- package-lock.json | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 package-lock.json 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": {} +} From 473ea5d8c7f53da935a1805ca376de2c3d649d38 Mon Sep 17 00:00:00 2001 From: vlada Date: Mon, 2 Dec 2024 14:24:23 -0800 Subject: [PATCH 04/21] deleted package-lock.json: --- package-lock.json | 6 ------ 1 file changed, 6 deletions(-) delete mode 100644 package-lock.json diff --git a/package-lock.json b/package-lock.json deleted file mode 100644 index 514519b5f..000000000 --- a/package-lock.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "name": "weather-report", - "lockfileVersion": 3, - "requires": true, - "packages": {} -} From 68270a7a728864f5aee75cd43cce04707a4c34c1 Mon Sep 17 00:00:00 2001 From: Aleida Vieyra Date: Tue, 3 Dec 2024 14:58:57 -0500 Subject: [PATCH 05/21] added few methods to index.js and index.html --- index.html | 1 + src/index.js | 50 ++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 51 insertions(+) diff --git a/index.html b/index.html index fe5e0d257..5f2043369 100644 --- a/index.html +++ b/index.html @@ -19,6 +19,7 @@

Weather Report

Temperature

+
⬆️ diff --git a/src/index.js b/src/index.js index e69de29bb..e3f21b794 100644 --- a/src/index.js +++ b/src/index.js @@ -0,0 +1,50 @@ + + +const state = { + currentTemp: 0, +}; + + +const currentTempDisplay = () { + let currentTemp = 0; + const tempDisplay = document.getElementById('currentTempButton'); + tempDisplay.textContent = `${currentTemp} °F`; +}; + +// Notes: +// Select all elements you'll need to change: +// ⬆️ +// +// ⬇️ + +// 1. this element should be set equal to variable currentTemp +// +// 2. Add Button & Behavior to & ⬇️ +// 3. +// +// + +// const currentTempValue = () => { +// const currentTemp = document.getElementById('tempValue'); +// currentTemp.textContent = `${currentTemp} °F`; +// } + +const registerEventHandlers = () => { + const warmUp = document.querySelector('increaseTempControl'); + warmUp.addEventListener("click", increaseTemp); +}; + +const increaseTemp = () => { + const warmUp = document.querySelector('increaseTempControl'); + + // Currently this element is being treated as our container + const tempChangeContainer = document.getElementById('tempValue'); + state.currentTemp += 1; + +}; + +const decreaseTemp = () => { + const coolDown = document.querySelector('decreaseTempControl'); +}; + + From a90db7404edd781e9b66ba9b084eaaf948d80066 Mon Sep 17 00:00:00 2001 From: Aleida Vieyra Date: Tue, 3 Dec 2024 20:20:05 -0500 Subject: [PATCH 06/21] added the event handling functions --- src/index.js | 36 ++++++++++++++++++++---------------- 1 file changed, 20 insertions(+), 16 deletions(-) diff --git a/src/index.js b/src/index.js index e3f21b794..307926685 100644 --- a/src/index.js +++ b/src/index.js @@ -1,16 +1,5 @@ -const state = { - currentTemp: 0, -}; - - -const currentTempDisplay = () { - let currentTemp = 0; - const tempDisplay = document.getElementById('currentTempButton'); - tempDisplay.textContent = `${currentTemp} °F`; -}; - // Notes: // Select all elements you'll need to change: // ⬆️ @@ -24,10 +13,21 @@ const currentTempDisplay = () { // // -// const currentTempValue = () => { -// const currentTemp = document.getElementById('tempValue'); -// currentTemp.textContent = `${currentTemp} °F`; -// } +const state = { + currentTemp: 0, +}; + + +const currentTempValue = () => { + const currentTemp = document.getElementById('currentTempButton'); + currentTemp.textContent = `${state.currentTemp} °F`; +} + +currentTempValue(); + +const loadControls = () => { + +}; const registerEventHandlers = () => { const warmUp = document.querySelector('increaseTempControl'); @@ -45,6 +45,10 @@ const increaseTemp = () => { const decreaseTemp = () => { const coolDown = document.querySelector('decreaseTempControl'); -}; + const tempChangeContainer = document.getElementById('tempValue'); + state.currentTemp -= 1; +}; + +document.addEventListener('DOMContentLoaded', registerEventHandlers); From 27ca974cc39d6393a1e30f47279d8917b724bbcf Mon Sep 17 00:00:00 2001 From: Aleida Vieyra Date: Tue, 3 Dec 2024 20:47:08 -0500 Subject: [PATCH 07/21] modified the registerEventHandlers() function --- src/index.js | 31 +++++++++++++++++-------------- 1 file changed, 17 insertions(+), 14 deletions(-) diff --git a/src/index.js b/src/index.js index 307926685..a04006491 100644 --- a/src/index.js +++ b/src/index.js @@ -15,6 +15,8 @@ const state = { currentTemp: 0, + warmUp: null, + coolDown: null, }; @@ -23,32 +25,33 @@ const currentTempValue = () => { currentTemp.textContent = `${state.currentTemp} °F`; } -currentTempValue(); +// Calling the function above to display the temperature +// currentTempValue(); const loadControls = () => { + state.warmUp = document.querySelector('increaseTempControl'); + state.coolDown = document.querySelector('decreaseTempControl'); + // Currently this element is being treated as our container + const tempChangeContainer = document.getElementById('tempValue'); }; const registerEventHandlers = () => { - const warmUp = document.querySelector('increaseTempControl'); - warmUp.addEventListener("click", increaseTemp); + loadControls(); + state.warmUp.addEventListener('click', increaseTemp); + state.coolDown.addEventListener('click', decreaseTemp); }; -const increaseTemp = () => { - const warmUp = document.querySelector('increaseTempControl'); - - // Currently this element is being treated as our container - const tempChangeContainer = document.getElementById('tempValue'); +const increaseTemp = (event) => { state.currentTemp += 1; - + currentTempValue(); + }; -const decreaseTemp = () => { - const coolDown = document.querySelector('decreaseTempControl'); - const tempChangeContainer = document.getElementById('tempValue'); - - +const decreaseTemp = (event) => { state.currentTemp -= 1; + currentTempValue(); + }; document.addEventListener('DOMContentLoaded', registerEventHandlers); From e551834df820acf0db3341c56f56be5c8322ee24 Mon Sep 17 00:00:00 2001 From: vlada Date: Wed, 4 Dec 2024 09:53:32 -0800 Subject: [PATCH 08/21] fixed parts of wave 1 --- src/index.js | 68 +++++++++++++++++++--------------------------------- 1 file changed, 24 insertions(+), 44 deletions(-) diff --git a/src/index.js b/src/index.js index a04006491..24c41bfe3 100644 --- a/src/index.js +++ b/src/index.js @@ -1,57 +1,37 @@ - -// Notes: -// Select all elements you'll need to change: -// ⬆️ -// -// ⬇️ - -// 1. this element should be set equal to variable currentTemp -// -// 2. Add Button & Behavior to & ⬇️ -// 3. -// -// - const state = { - currentTemp: 0, - warmUp: null, - coolDown: null, + currentTemp: 0, }; +// Function to update the temperature display and apply color changes +const updateTemperatureDisplay = () => { + const tempValueElement = document.getElementById("tempValue"); + tempValueElement.textContent = `${state.currentTemp} °F`; +}; -const currentTempValue = () => { - const currentTemp = document.getElementById('currentTempButton'); - currentTemp.textContent = `${state.currentTemp} °F`; -} - -// Calling the function above to display the temperature -// currentTempValue(); - -const loadControls = () => { - state.warmUp = document.querySelector('increaseTempControl'); - state.coolDown = document.querySelector('decreaseTempControl'); +// Event handler to increase temperature +const increaseTemp = () => { + state.currentTemp += 1; + updateTemperatureDisplay(); +}; - // Currently this element is being treated as our container - const tempChangeContainer = document.getElementById('tempValue'); +// Event handler to decrease temperature +const decreaseTemp = () => { + state.currentTemp -= 1; + updateTemperatureDisplay(); }; +// Register event handlers for temperature controls const registerEventHandlers = () => { - loadControls(); - state.warmUp.addEventListener('click', increaseTemp); - state.coolDown.addEventListener('click', decreaseTemp); -}; + const warmUpButton = document.getElementById("increaseTempControl"); + const coolDownButton = document.getElementById("decreaseTempControl"); -const increaseTemp = (event) => { - state.currentTemp += 1; - currentTempValue(); - -}; + warmUpButton.addEventListener("click", increaseTemp); + coolDownButton.addEventListener("click", decreaseTemp); -const decreaseTemp = (event) => { - state.currentTemp -= 1; - currentTempValue(); - + // Initialize the temperature display + updateTemperatureDisplay(); }; -document.addEventListener('DOMContentLoaded', registerEventHandlers); +// Initialize the application when DOM content is loaded +document.addEventListener("DOMContentLoaded", registerEventHandlers); From 02e81f8ea9b0e74b59aeb7bb2e4b9d76b99bc88d Mon Sep 17 00:00:00 2001 From: vlada Date: Wed, 4 Dec 2024 11:05:07 -0800 Subject: [PATCH 09/21] finished wave 2, worked with live share --- src/index.js | 38 ++++++++++++++++++++++++++++++++++++-- 1 file changed, 36 insertions(+), 2 deletions(-) diff --git a/src/index.js b/src/index.js index 24c41bfe3..714e19d60 100644 --- a/src/index.js +++ b/src/index.js @@ -1,14 +1,48 @@ - const state = { - currentTemp: 0, + currentTemp: 72, }; // Function to update the temperature display and apply color changes const updateTemperatureDisplay = () => { const tempValueElement = document.getElementById("tempValue"); + const landscapeElement = document.getElementById("landscape"); tempValueElement.textContent = `${state.currentTemp} °F`; + + if (state.currentTemp >= 80) { + tempValueElement.style.color = "red"; + landscapeElement.textContent = "🌵 🐍 🦂 🌵🌵 🐍 🏜 🦂"; + } else if (state.currentTemp >= 70) { + tempValueElement.style.color = "orange"; + landscapeElement.textContent = "🌸🌿🌼 🌷🌻🌿 ☘️🌱 🌻🌷"; + } else if (state.currentTemp >= 60) { + tempValueElement.style.color = "salmon"; + landscapeElement.textContent = "🌾🌾 🍃 🪨 🛤 🌾🌾🌾 🍃"; + } else if (state.currentTemp >= 50) { + tempValueElement.style.color = "green"; + landscapeElement.textContent = "🌲🌲⛄️🌲⛄️🍂🌲🍁🌲🌲⛄️🍂🌲"; + } else if (state.currentTemp <= 49) { + tempValueElement.style.color = "blue"; + landscapeElement.textContent = "⛄️ ⛄️ ⛄️"; + } }; +// Function to update the temperature Color and Landscape + +// const designTemp = () => { +// const tempValueElement = document.getElementById("tempValue"); +// const landscape = document.getElementById("landscape"); +// tempValueElement.textContent = `${state.currentTemp} °F`; + +// if (state.currentTemp >= 80) { +// tempValueElement.style.color = "red"; +// } else if (state.currentTemp >= 70) { +// tempValueElement.style.color = "orange"; +// } else if (state.currentTemp >= 70) { +// tempValueElement.style.color = "orange"; +// } + +// }; + // Event handler to increase temperature const increaseTemp = () => { state.currentTemp += 1; From 6e10aaac117700b06bb62bf863da7cd18821e673 Mon Sep 17 00:00:00 2001 From: vlada Date: Wed, 4 Dec 2024 11:43:52 -0800 Subject: [PATCH 10/21] started wave 3 --- index.html | 2 +- src/index.js | 45 ++++++++++++++++++++++++++------------------- 2 files changed, 27 insertions(+), 20 deletions(-) diff --git a/index.html b/index.html index 5f2043369..cc341520c 100644 --- a/index.html +++ b/index.html @@ -15,7 +15,7 @@

Weather Report

For the lovely city of - + Enter Location

Temperature

diff --git a/src/index.js b/src/index.js index 714e19d60..6cb3c9a9e 100644 --- a/src/index.js +++ b/src/index.js @@ -1,7 +1,10 @@ const state = { - currentTemp: 72, + currentTemp: 39, + cityName: "Seattle", }; +/*********** Wave 2 ***********/ + // Function to update the temperature display and apply color changes const updateTemperatureDisplay = () => { const tempValueElement = document.getElementById("tempValue"); @@ -26,23 +29,6 @@ const updateTemperatureDisplay = () => { } }; -// Function to update the temperature Color and Landscape - -// const designTemp = () => { -// const tempValueElement = document.getElementById("tempValue"); -// const landscape = document.getElementById("landscape"); -// tempValueElement.textContent = `${state.currentTemp} °F`; - -// if (state.currentTemp >= 80) { -// tempValueElement.style.color = "red"; -// } else if (state.currentTemp >= 70) { -// tempValueElement.style.color = "orange"; -// } else if (state.currentTemp >= 70) { -// tempValueElement.style.color = "orange"; -// } - -// }; - // Event handler to increase temperature const increaseTemp = () => { state.currentTemp += 1; @@ -55,14 +41,35 @@ const decreaseTemp = () => { updateTemperatureDisplay(); }; -// Register event handlers for temperature controls +/************ Wave 3 ************/ + +const retrieveInput = () => { + + +}; + +const updateCityName = () => { + const currentCity = document.getElementById("headerCityName"); + state.cityName = + +}; + +// // Register eent handlers for temperature controls const registerEventHandlers = () => { + /** Wave 2 events **/ const warmUpButton = document.getElementById("increaseTempControl"); const coolDownButton = document.getElementById("decreaseTempControl"); warmUpButton.addEventListener("click", increaseTemp); coolDownButton.addEventListener("click", decreaseTemp); + /** Wave 3 events **/ + const cityNameInput = document.getElementById("cityNameInput"); + const resetButton = document.getElementById("cityNameReset"); + + cityNameInput.addEventListener("input", retrieveInput); + resetButton.addEventListener("click", updateCityName); + // Initialize the temperature display updateTemperatureDisplay(); }; From 2e1b0b87ce617905464080cac8f8782a8b3e0bb0 Mon Sep 17 00:00:00 2001 From: Aleida Vieyra Date: Wed, 4 Dec 2024 15:05:55 -0500 Subject: [PATCH 11/21] implemented wave 3 --- src/index.js | 17 +++++++++++------ 1 file changed, 11 insertions(+), 6 deletions(-) diff --git a/src/index.js b/src/index.js index 6cb3c9a9e..668fea9f5 100644 --- a/src/index.js +++ b/src/index.js @@ -3,7 +3,9 @@ const state = { cityName: "Seattle", }; -/*********** Wave 2 ***********/ +/************************/ +/******* Wave 2 *********/ +/************************/ // Function to update the temperature display and apply color changes const updateTemperatureDisplay = () => { @@ -41,17 +43,20 @@ const decreaseTemp = () => { updateTemperatureDisplay(); }; -/************ Wave 3 ************/ -const retrieveInput = () => { - +/************************/ +/******* Wave 3 *********/ +/************************/ +const retrieveInput = () => { + const cityNameInput = document.getElementById("cityNameInput"); + return cityNameInput.value; }; const updateCityName = () => { const currentCity = document.getElementById("headerCityName"); - state.cityName = - + state.cityName = retrieveInput(); + currentCity.textContent = state.cityName; }; // // Register eent handlers for temperature controls From 809ec897e25c97a65325c620e95705d0856705ea Mon Sep 17 00:00:00 2001 From: vlada Date: Wed, 4 Dec 2024 13:19:36 -0800 Subject: [PATCH 12/21] wave 5 --- index.html | 4 ++++ src/index.js | 32 ++++++++++++++++++++++++++++++-- 2 files changed, 34 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index cc341520c..1f2bbb8b9 100644 --- a/index.html +++ b/index.html @@ -33,6 +33,10 @@

Temperature

Sky

diff --git a/src/index.js b/src/index.js index 668fea9f5..889b8b332 100644 --- a/src/index.js +++ b/src/index.js @@ -43,7 +43,6 @@ const decreaseTemp = () => { updateTemperatureDisplay(); }; - /************************/ /******* Wave 3 *********/ /************************/ @@ -59,7 +58,7 @@ const updateCityName = () => { currentCity.textContent = state.cityName; }; -// // Register eent handlers for temperature controls +// // Register event handlers for temperature controls const registerEventHandlers = () => { /** Wave 2 events **/ const warmUpButton = document.getElementById("increaseTempControl"); @@ -77,7 +76,36 @@ const registerEventHandlers = () => { // Initialize the temperature display updateTemperatureDisplay(); + updateSky(); }; // Initialize the application when DOM content is loaded document.addEventListener("DOMContentLoaded", registerEventHandlers); + +/************************/ +/******* Wave 4 *********/ +/************************/ + +/************************/ +/******* Wave 5 *********/ +/************************/ + +const skyOptions = { + sunny: "☁️ ☁️ ☁️ ☀️ ☁️ ☁️", + cloudy: "☁️☁️ ☁️ ☁️☁️ ☁️ 🌤 ☁️ ☁️☁️", + rainy: "🌧🌈⛈🌧🌧💧⛈🌧🌦🌧💧🌧🌧", + snowy: "🌨❄️🌨🌨❄️❄️🌨❄️🌨❄️❄️🌨🌨", +}; + +// Function to update the sky display +const updateSky = () => { + const skySelect = document.getElementById("skySelect"); + const skyDisplay = document.getElementById("sky"); + + // Get the selected option value + const selectedSky = skySelect.value; + + // Update the sky display + skyDisplay.textContent = skyOptions[selectedSky]; + skySelect.addEventListener("change", updateSky); +}; From 25a4554d4a86e2d1f7b0ba3114e46ddba4579984 Mon Sep 17 00:00:00 2001 From: Aleida Vieyra Date: Wed, 4 Dec 2024 16:30:30 -0500 Subject: [PATCH 13/21] adding index.js changes --- src/index.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/index.js b/src/index.js index 668fea9f5..ec7044727 100644 --- a/src/index.js +++ b/src/index.js @@ -11,7 +11,7 @@ const state = { const updateTemperatureDisplay = () => { const tempValueElement = document.getElementById("tempValue"); const landscapeElement = document.getElementById("landscape"); - tempValueElement.textContent = `${state.currentTemp} °F`; + tempValueElement.textContent = `${state.currentTemp}°F`; if (state.currentTemp >= 80) { tempValueElement.style.color = "red"; @@ -48,11 +48,13 @@ const decreaseTemp = () => { /******* Wave 3 *********/ /************************/ +// Event handler function to retrieve user input: const retrieveInput = () => { const cityNameInput = document.getElementById("cityNameInput"); return cityNameInput.value; }; +// Event handler function to UPDATE the headerCityName to user's input: const updateCityName = () => { const currentCity = document.getElementById("headerCityName"); state.cityName = retrieveInput(); From 9ca8f911b2e4910bced1007c623c46af6f8fa2af Mon Sep 17 00:00:00 2001 From: vlada Date: Wed, 4 Dec 2024 20:07:53 -0800 Subject: [PATCH 14/21] added comments to wave 4 + 6 --- src/index.js | 60 +++++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 59 insertions(+), 1 deletion(-) diff --git a/src/index.js b/src/index.js index 889b8b332..a56ab9ee6 100644 --- a/src/index.js +++ b/src/index.js @@ -1,6 +1,7 @@ const state = { currentTemp: 39, - cityName: "Seattle", + cityName: "Miami", + // defaultCityName = "Seattle", }; /************************/ @@ -77,6 +78,7 @@ const registerEventHandlers = () => { // Initialize the temperature display updateTemperatureDisplay(); updateSky(); + TempButton(); }; // Initialize the application when DOM content is loaded @@ -86,6 +88,45 @@ document.addEventListener("DOMContentLoaded", registerEventHandlers); /******* Wave 4 *********/ /************************/ +// const trueCityTemp = () => { + +// }: + +// const TempButton = () => { +// const cityNameInput = document.getElementById("currentTempButton"); +// cityNameInput.addEventListener("click", trueCityTemp); +// }; + +// const axios = require("axios"); +// const LOCATIONIQ_KEY = ; + +// const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms)); +// const results = {}; + +// const findLatitudeAndLongitude = (location) => { +// let latitude, longitude; +// axios +// .get("https://us1.locationiq.com/v1/search.php", { +// params: { +// key: LOCATIONIQ_KEY, +// q: location, +// format: "json", +// }, +// }) +// .then((response) => { +// latitude = response.data[0].lat; +// longitude = response.data[0].lon; +// //console.log(location, ":", latitude, longitude); +// results[location] = { +// latitude: latitude, +// longitude: longitude, +// }; +// }) +// .catch((error) => { +// console.log("error in findLatitudeAndLongitude!"); +// }); +// }; + /************************/ /******* Wave 5 *********/ /************************/ @@ -109,3 +150,20 @@ const updateSky = () => { skyDisplay.textContent = skyOptions[selectedSky]; skySelect.addEventListener("change", updateSky); }; + +/************************/ +/******* Wave 6 *********/ +/************************/ + +// reset city name to default + +// const resetCityName = () => { +// const currentCity = document.getElementById("headerCityName"); +// const cityNameInput = document.getElementById("cityNameInput"); + +// state.cityName = state.defaultCityName + +// currentCity.textContent = state.cityName +// cityNameInput.value = state.defaultCityName + +// }; From 00dcbf2d7f2823b9898a4810640a32f9ecc32740 Mon Sep 17 00:00:00 2001 From: Aleida Vieyra Date: Thu, 5 Dec 2024 07:23:17 -0500 Subject: [PATCH 15/21] implemented wave 4 with API calls to the proxy server using axios - to be completed with weather update --- index.html | 2 +- src/index.js | 159 ++++++++++++++++++++++++++++++++------------------- 2 files changed, 101 insertions(+), 60 deletions(-) diff --git a/index.html b/index.html index 1f2bbb8b9..fddbac7a4 100644 --- a/index.html +++ b/index.html @@ -15,7 +15,7 @@

Weather Report

For the lovely city of - Enter Location + Seattle

Temperature

diff --git a/src/index.js b/src/index.js index 7ea4e43e4..b4a86da0f 100644 --- a/src/index.js +++ b/src/index.js @@ -61,73 +61,88 @@ const updateCityName = () => { currentCity.textContent = state.cityName; }; -// // Register event handlers for temperature controls -const registerEventHandlers = () => { - /** Wave 2 events **/ - const warmUpButton = document.getElementById("increaseTempControl"); - const coolDownButton = document.getElementById("decreaseTempControl"); - - warmUpButton.addEventListener("click", increaseTemp); - coolDownButton.addEventListener("click", decreaseTemp); - - /** Wave 3 events **/ - const cityNameInput = document.getElementById("cityNameInput"); - const resetButton = document.getElementById("cityNameReset"); - - cityNameInput.addEventListener("input", retrieveInput); - resetButton.addEventListener("click", updateCityName); - - // Initialize the temperature display - updateTemperatureDisplay(); - updateSky(); - TempButton(); -}; - -// Initialize the application when DOM content is loaded -document.addEventListener("DOMContentLoaded", registerEventHandlers); /************************/ /******* Wave 4 *********/ /************************/ -// const trueCityTemp = () => { +const updateRealtimeTempButton = (location) => { + const realtimeTempValue = document.getElementById("currentTempButton"); + // state.currentTemp = getLatAndLon(location); -// }: +}; -// const TempButton = () => { -// const cityNameInput = document.getElementById("currentTempButton"); -// cityNameInput.addEventListener("click", trueCityTemp); -// }; +const getRealtimeTempButton = () => { + const realtimeTemp = document.getElementById("currentTempButton"); + realtimeTemp.addEventListener("click", updateRealtimeTempButton); +}; -// const axios = require("axios"); -// const LOCATIONIQ_KEY = ; - -// const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms)); -// const results = {}; - -// const findLatitudeAndLongitude = (location) => { -// let latitude, longitude; -// axios -// .get("https://us1.locationiq.com/v1/search.php", { -// params: { -// key: LOCATIONIQ_KEY, -// q: location, -// format: "json", -// }, -// }) -// .then((response) => { -// latitude = response.data[0].lat; -// longitude = response.data[0].lon; -// //console.log(location, ":", latitude, longitude); -// results[location] = { -// latitude: latitude, -// longitude: longitude, -// }; -// }) -// .catch((error) => { -// console.log("error in findLatitudeAndLongitude!"); -// }); -// }; +// ASK IN OFFICE HOURS! +const LOCATIONIQ_KEY = process.env["LOCATION_KEY"]; +const WEATHER_KEY = process.env["WEATHER_KEY"]; + +const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms)); +const coordinateResults = {}; + +const getLatAndLong= (location) => { + let latitude, longitude; + return axios + .get("http://127.0.0.1:5000", { + params: { + "q": location, + "key": LOCATIONIQ_KEY, + "format": "json", + }, + }) + .then((response) => { + latitude = response.data[0].lat; + longitude = response.data[0].lon; + + console.log( + `Location: ${location}, Latitude: ${latitude}, Longitude: ${longitude}` + ); + + return coordinateResults = { + latitude: latitude, + longitude: longitude, + }; + }) + .catch((error) => { + console.log("Error found in getLatAndLong!"); + console.log( + `The value of status inside of error response is: + ${error.response.status}` + ); + + }); +}; + +const getCurrentCityWeather = (lat, long) => { + // Info from OpenWeather API Call documentation: + // https://openweathermap.org/current#geo + + lat = getLatAndLong().latitude; + long = getLatAndLong().longitude; + + return axios + .get("http://127.0.0.1:5000", { + params: { + "lat": lat, + "lon": long, + "appid": WEATHER_KEY, + }}) + .then((response) => { + return Object.keys(response.main.temp); + }) + .catch((error) => { + console.log("Error found in getCurrentCityWeather!"); + console.log( + `The value of status inside of error response is: + ${error.response.status}` + ); + }) + + }; /************************/ /******* Wave 5 *********/ @@ -169,3 +184,29 @@ const updateSky = () => { // cityNameInput.value = state.defaultCityName // }; + + +// Register event handlers for temperature controls +const registerEventHandlers = () => { + /** Wave 2 events **/ + const warmUpButton = document.getElementById("increaseTempControl"); + const coolDownButton = document.getElementById("decreaseTempControl"); + + warmUpButton.addEventListener("click", increaseTemp); + coolDownButton.addEventListener("click", decreaseTemp); + + /** Wave 3 events **/ + const cityNameInput = document.getElementById("cityNameInput"); + const resetButton = document.getElementById("cityNameReset"); + + cityNameInput.addEventListener("input", retrieveInput); + resetButton.addEventListener("click", updateCityName); + + // Initialize the temperature display + updateTemperatureDisplay(); + updateSky(); + getRealtimeTempButton(); +}; + +// Initialize the application when DOM content is loaded +document.addEventListener("DOMContentLoaded", registerEventHandlers); From efe47168d05e64ccda98bb3166c855d29576341f Mon Sep 17 00:00:00 2001 From: Aleida Vieyra Date: Thu, 5 Dec 2024 15:17:31 -0500 Subject: [PATCH 16/21] wave 4 implementation - finish the complete API call --- src/index.js | 33 +++++++++++++++------------------ 1 file changed, 15 insertions(+), 18 deletions(-) diff --git a/src/index.js b/src/index.js index b4a86da0f..6cd4f075c 100644 --- a/src/index.js +++ b/src/index.js @@ -1,5 +1,5 @@ const state = { - currentTemp: 39, + currentTemp: 0, cityName: "Miami", // defaultCityName = "Seattle", }; @@ -66,10 +66,11 @@ const updateCityName = () => { /******* Wave 4 *********/ /************************/ -const updateRealtimeTempButton = (location) => { +// Cannot pass parameters into function +const updateRealtimeTempButton = () => { const realtimeTempValue = document.getElementById("currentTempButton"); - // state.currentTemp = getLatAndLon(location); - + // state.currentTemp = + }; const getRealtimeTempButton = () => { @@ -78,20 +79,15 @@ const getRealtimeTempButton = () => { }; // ASK IN OFFICE HOURS! -const LOCATIONIQ_KEY = process.env["LOCATION_KEY"]; -const WEATHER_KEY = process.env["WEATHER_KEY"]; - const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms)); -const coordinateResults = {}; -const getLatAndLong= (location) => { + +const getLatAndLong = (location) => { let latitude, longitude; return axios - .get("http://127.0.0.1:5000", { + .get("http://127.0.0.1:5000/location", { params: { - "q": location, - "key": LOCATIONIQ_KEY, - "format": "json", + "q": location }, }) .then((response) => { @@ -102,7 +98,7 @@ const getLatAndLong= (location) => { `Location: ${location}, Latitude: ${latitude}, Longitude: ${longitude}` ); - return coordinateResults = { + return { latitude: latitude, longitude: longitude, }; @@ -117,19 +113,20 @@ const getLatAndLong= (location) => { }); }; +// API Call for weather status/temp of current city displayed const getCurrentCityWeather = (lat, long) => { // Info from OpenWeather API Call documentation: // https://openweathermap.org/current#geo - lat = getLatAndLong().latitude; - long = getLatAndLong().longitude; + // Function call is returning a Promise Object - cannot call this + // Create a 3rd separate helper function to chain together location + weather + // by chaining the .then() return axios - .get("http://127.0.0.1:5000", { + .get("http://127.0.0.1:5000/weather", { params: { "lat": lat, "lon": long, - "appid": WEATHER_KEY, }}) .then((response) => { return Object.keys(response.main.temp); From 1a4d42034ea19d16b878bca30e34fb181ad2816d Mon Sep 17 00:00:00 2001 From: Aleida Vieyra Date: Thu, 5 Dec 2024 20:01:43 -0500 Subject: [PATCH 17/21] completed wave 4 API calls to proxy server - getting errors --- src/index.js | 99 +++++++++++++++++++++++++++++----------------------- 1 file changed, 55 insertions(+), 44 deletions(-) diff --git a/src/index.js b/src/index.js index 6cd4f075c..f888421c1 100644 --- a/src/index.js +++ b/src/index.js @@ -49,7 +49,7 @@ const decreaseTemp = () => { /************************/ // Event handler function to retrieve user input: -const retrieveInput = () => { +const retrieveCityInput = () => { const cityNameInput = document.getElementById("cityNameInput"); return cityNameInput.value; }; @@ -57,54 +57,39 @@ const retrieveInput = () => { // Event handler function to UPDATE the headerCityName to user's input: const updateCityName = () => { const currentCity = document.getElementById("headerCityName"); - state.cityName = retrieveInput(); + state.cityName = retrieveCityInput(); currentCity.textContent = state.cityName; }; - /************************/ /******* Wave 4 *********/ /************************/ -// Cannot pass parameters into function -const updateRealtimeTempButton = () => { - const realtimeTempValue = document.getElementById("currentTempButton"); - // state.currentTemp = - -}; - -const getRealtimeTempButton = () => { - const realtimeTemp = document.getElementById("currentTempButton"); - realtimeTemp.addEventListener("click", updateRealtimeTempButton); -}; - -// ASK IN OFFICE HOURS! const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms)); - -const getLatAndLong = (location) => { - let latitude, longitude; +const getCoordinates = () => { + let location = retrieveCityInput(); + return axios .get("http://127.0.0.1:5000/location", { - params: { - "q": location - }, + params: { + "q": location + } }) .then((response) => { - latitude = response.data[0].lat; - longitude = response.data[0].lon; + let latitude = response.data[0].lat; + let longitude = response.data[0].lon; console.log( `Location: ${location}, Latitude: ${latitude}, Longitude: ${longitude}` ); - return { latitude: latitude, longitude: longitude, }; }) .catch((error) => { - console.log("Error found in getLatAndLong!"); + console.log("Error found inside getCoordinates function!"); console.log( `The value of status inside of error response is: ${error.response.status}` @@ -114,33 +99,58 @@ const getLatAndLong = (location) => { }; // API Call for weather status/temp of current city displayed -const getCurrentCityWeather = (lat, long) => { +const getCurrentCityWeather = () => { // Info from OpenWeather API Call documentation: // https://openweathermap.org/current#geo - - // Function call is returning a Promise Object - cannot call this - // Create a 3rd separate helper function to chain together location + weather - // by chaining the .then() - - return axios - .get("http://127.0.0.1:5000/weather", { - params: { - "lat": lat, - "lon": long, - }}) - .then((response) => { - return Object.keys(response.main.temp); + return getCoordinates() + .then((coordinatesResponse) => { + + if (!coordinatesResponse) { + throw new Error("Coordinates could not be retrieved."); + } + + else { + return axios. + get("http://127.0.0.1:5000/weather", { + params: { + lat: coordinatesResponse.latitude, + lon: coordinatesResponse.longitude, + } + }); + } + }) + .then((locationTempResponse) => { + let temp = locationTempResponse.main.temp; // in KELVIN + console.log(`Current Location temperature is: ${temp}`); + return temp; }) .catch((error) => { - console.log("Error found in getCurrentCityWeather!"); + console.log("Error found inside getCurrentCityWeather!"); console.log( `The value of status inside of error response is: ${error.response.status}` ); }) - }; + const updateRealtimeTempBtn = () => { + // Chaining the axios Promise API call/response from above + getCurrentCityWeather() + .then(tempKelvin => { + if (tempKelvin) { + const conversion = (tempKelvin - 273)*((9/5) + 32); + state.currentTemp = conversion; + document.getElementById("currentTempButton").textContent = state.currentTemp; + } + }); + }; + + const getRealtimeTempButton = () => { + const realtimeTemp = document.getElementById("currentTempButton"); + realtimeTemp.addEventListener("click", updateRealtimeTempBtn); + }; + + /************************/ /******* Wave 5 *********/ /************************/ @@ -196,13 +206,14 @@ const registerEventHandlers = () => { const cityNameInput = document.getElementById("cityNameInput"); const resetButton = document.getElementById("cityNameReset"); - cityNameInput.addEventListener("input", retrieveInput); + cityNameInput.addEventListener("input", retrieveCityInput); resetButton.addEventListener("click", updateCityName); // Initialize the temperature display - updateTemperatureDisplay(); + updateSky(); getRealtimeTempButton(); + updateTemperatureDisplay(); }; // Initialize the application when DOM content is loaded From b1bd35e875cc93776fa1a799855f8d21fe6d9246 Mon Sep 17 00:00:00 2001 From: vlada Date: Thu, 5 Dec 2024 17:46:28 -0800 Subject: [PATCH 18/21] add select sky option in html --- index.html | 1 + 1 file changed, 1 insertion(+) diff --git a/index.html b/index.html index fddbac7a4..b3bc9ba29 100644 --- a/index.html +++ b/index.html @@ -33,6 +33,7 @@

Temperature

Sky

+
diff --git a/src/index.js b/src/index.js index f888421c1..94a8b843e 100644 --- a/src/index.js +++ b/src/index.js @@ -104,7 +104,6 @@ const getCurrentCityWeather = () => { // https://openweathermap.org/current#geo return getCoordinates() .then((coordinatesResponse) => { - if (!coordinatesResponse) { throw new Error("Coordinates could not be retrieved."); } @@ -120,7 +119,7 @@ const getCurrentCityWeather = () => { } }) .then((locationTempResponse) => { - let temp = locationTempResponse.main.temp; // in KELVIN + let temp = locationTempResponse.data.main.temp; // in KELVIN console.log(`Current Location temperature is: ${temp}`); return temp; }) @@ -128,7 +127,7 @@ const getCurrentCityWeather = () => { console.log("Error found inside getCurrentCityWeather!"); console.log( `The value of status inside of error response is: - ${error.response.status}` + ${error}` ); }) }; @@ -138,9 +137,9 @@ const getCurrentCityWeather = () => { getCurrentCityWeather() .then(tempKelvin => { if (tempKelvin) { - const conversion = (tempKelvin - 273)*((9/5) + 32); - state.currentTemp = conversion; - document.getElementById("currentTempButton").textContent = state.currentTemp; + const conversion = (tempKelvin - 273)*(9/5) + 32; + state.currentTemp = Math.round(conversion); + updateTemperatureDisplay(); } }); }; From 36887dd893ef519e274e5d4aa46c1c78bc6b3d69 Mon Sep 17 00:00:00 2001 From: vlada Date: Thu, 5 Dec 2024 20:48:59 -0800 Subject: [PATCH 20/21] fixed wave 3 and 6 --- src/index.js | 105 +++++++++++++++++++++++---------------------------- 1 file changed, 47 insertions(+), 58 deletions(-) diff --git a/src/index.js b/src/index.js index 94a8b843e..38b235bd9 100644 --- a/src/index.js +++ b/src/index.js @@ -1,7 +1,7 @@ const state = { currentTemp: 0, cityName: "Miami", - // defaultCityName = "Seattle", + defaultCityName: "Seattle", }; /************************/ @@ -47,18 +47,10 @@ const decreaseTemp = () => { /************************/ /******* Wave 3 *********/ /************************/ - -// Event handler function to retrieve user input: -const retrieveCityInput = () => { +const updateCity = () => { const cityNameInput = document.getElementById("cityNameInput"); - return cityNameInput.value; -}; - -// Event handler function to UPDATE the headerCityName to user's input: -const updateCityName = () => { - const currentCity = document.getElementById("headerCityName"); - state.cityName = retrieveCityInput(); - currentCity.textContent = state.cityName; + const currentCityHeader = document.getElementById("headerCityName"); + currentCityHeader.textContent = cityNameInput.value; }; /************************/ @@ -67,14 +59,20 @@ const updateCityName = () => { const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms)); +// Event handler function to retrieve user input: +const retrieveCityInput = () => { + const cityNameInput = document.getElementById("cityNameInput"); + return cityNameInput.value; +}; + const getCoordinates = () => { let location = retrieveCityInput(); - + return axios .get("http://127.0.0.1:5000/location", { params: { - "q": location - } + q: location, + }, }) .then((response) => { let latitude = response.data[0].lat; @@ -94,7 +92,6 @@ const getCoordinates = () => { `The value of status inside of error response is: ${error.response.status}` ); - }); }; @@ -106,15 +103,12 @@ const getCurrentCityWeather = () => { .then((coordinatesResponse) => { if (!coordinatesResponse) { throw new Error("Coordinates could not be retrieved."); - } - - else { - return axios. - get("http://127.0.0.1:5000/weather", { - params: { - lat: coordinatesResponse.latitude, - lon: coordinatesResponse.longitude, - } + } else { + return axios.get("http://127.0.0.1:5000/weather", { + params: { + lat: coordinatesResponse.latitude, + lon: coordinatesResponse.longitude, + }, }); } }) @@ -129,27 +123,25 @@ const getCurrentCityWeather = () => { `The value of status inside of error response is: ${error}` ); - }) - }; - - const updateRealtimeTempBtn = () => { - // Chaining the axios Promise API call/response from above - getCurrentCityWeather() - .then(tempKelvin => { - if (tempKelvin) { - const conversion = (tempKelvin - 273)*(9/5) + 32; - state.currentTemp = Math.round(conversion); - updateTemperatureDisplay(); - } }); - }; - - const getRealtimeTempButton = () => { - const realtimeTemp = document.getElementById("currentTempButton"); - realtimeTemp.addEventListener("click", updateRealtimeTempBtn); - }; - - +}; + +const updateRealtimeTempBtn = () => { + // Chaining the axios Promise API call/response from above + getCurrentCityWeather().then((tempKelvin) => { + if (tempKelvin) { + const conversion = (tempKelvin - 273) * (9 / 5) + 32; + state.currentTemp = Math.round(conversion); + updateTemperatureDisplay(); + } + }); +}; + +const getRealtimeTempButton = () => { + const realtimeTemp = document.getElementById("currentTempButton"); + realtimeTemp.addEventListener("click", updateRealtimeTempBtn); +}; + /************************/ /******* Wave 5 *********/ /************************/ @@ -180,17 +172,14 @@ const updateSky = () => { // reset city name to default -// const resetCityName = () => { -// const currentCity = document.getElementById("headerCityName"); -// const cityNameInput = document.getElementById("cityNameInput"); - -// state.cityName = state.defaultCityName - -// currentCity.textContent = state.cityName -// cityNameInput.value = state.defaultCityName - -// }; +// Event handler function to UPDATE the headerCityName to user's input: +const ResetCity = () => { + const currentCityHeader = document.getElementById("headerCityName"); + currentCityHeader.textContent = state.defaultCityName; + const cityNameInput = document.getElementById("cityNameInput"); + cityNameInput.value = state.defaultCityName; +}; // Register event handlers for temperature controls const registerEventHandlers = () => { @@ -205,11 +194,11 @@ const registerEventHandlers = () => { const cityNameInput = document.getElementById("cityNameInput"); const resetButton = document.getElementById("cityNameReset"); - cityNameInput.addEventListener("input", retrieveCityInput); - resetButton.addEventListener("click", updateCityName); + cityNameInput.addEventListener("input", updateCity); + resetButton.addEventListener("click", ResetCity); // Initialize the temperature display - + updateSky(); getRealtimeTempButton(); updateTemperatureDisplay(); From 323d8d4c51387ad733da5a228c4a0287b3944b50 Mon Sep 17 00:00:00 2001 From: Aleida Vieyra Date: Fri, 6 Dec 2024 11:55:27 -0500 Subject: [PATCH 21/21] refactored index.js to make code more concise for registerEventHandlers() func --- index.html | 2 +- src/index.js | 49 ++++++++++++++++++++++++++++++++----------------- 2 files changed, 33 insertions(+), 18 deletions(-) diff --git a/index.html b/index.html index 8cf2e5a29..74ca49f0e 100644 --- a/index.html +++ b/index.html @@ -18,7 +18,7 @@

Weather Report

Seattle
-

Temperature

+

Temperature (F)

diff --git a/src/index.js b/src/index.js index 38b235bd9..64b355b0b 100644 --- a/src/index.js +++ b/src/index.js @@ -12,7 +12,7 @@ const state = { const updateTemperatureDisplay = () => { const tempValueElement = document.getElementById("tempValue"); const landscapeElement = document.getElementById("landscape"); - tempValueElement.textContent = `${state.currentTemp}°F`; + tempValueElement.textContent = `${state.currentTemp}°`; if (state.currentTemp >= 80) { tempValueElement.style.color = "red"; @@ -32,27 +32,45 @@ const updateTemperatureDisplay = () => { } }; -// Event handler to increase temperature +// Function to increase temperature const increaseTemp = () => { state.currentTemp += 1; updateTemperatureDisplay(); }; -// Event handler to decrease temperature +// Function to decrease temperature const decreaseTemp = () => { state.currentTemp -= 1; updateTemperatureDisplay(); }; +/** Wave 2 events **/ +const temperatureControls = () => { + const warmUpButton = document.getElementById("increaseTempControl"); + const coolDownButton = document.getElementById("decreaseTempControl"); + + warmUpButton.addEventListener("click", increaseTemp); + coolDownButton.addEventListener("click", decreaseTemp); +}; + + /************************/ /******* Wave 3 *********/ /************************/ + const updateCity = () => { const cityNameInput = document.getElementById("cityNameInput"); const currentCityHeader = document.getElementById("headerCityName"); currentCityHeader.textContent = cityNameInput.value; }; +const handleUpdateCityEvent = () => { + const cityNameInput = document.getElementById("cityNameInput"); + const resetButton = document.getElementById("cityNameReset"); + cityNameInput.addEventListener("input", updateCity); + resetButton.addEventListener("click", ResetCity); +}; + /************************/ /******* Wave 4 *********/ /************************/ @@ -65,6 +83,7 @@ const retrieveCityInput = () => { return cityNameInput.value; }; +// API Call to LocationIQ for location coordinates const getCoordinates = () => { let location = retrieveCityInput(); @@ -171,7 +190,6 @@ const updateSky = () => { /************************/ // reset city name to default - // Event handler function to UPDATE the headerCityName to user's input: const ResetCity = () => { const currentCityHeader = document.getElementById("headerCityName"); @@ -181,25 +199,22 @@ const ResetCity = () => { cityNameInput.value = state.defaultCityName; }; -// Register event handlers for temperature controls + +/************************/ +/**** Event Handling ****/ +/************************/ + const registerEventHandlers = () => { /** Wave 2 events **/ - const warmUpButton = document.getElementById("increaseTempControl"); - const coolDownButton = document.getElementById("decreaseTempControl"); - - warmUpButton.addEventListener("click", increaseTemp); - coolDownButton.addEventListener("click", decreaseTemp); + temperatureControls(); /** Wave 3 events **/ - const cityNameInput = document.getElementById("cityNameInput"); - const resetButton = document.getElementById("cityNameReset"); - - cityNameInput.addEventListener("input", updateCity); - resetButton.addEventListener("click", ResetCity); + handleUpdateCityEvent(); + + /**** Wave 5 events ****/ + updateSky(); - // Initialize the temperature display - updateSky(); getRealtimeTempButton(); updateTemperatureDisplay(); };