C24 Crow Tatiana and Crow Hok Yin Iris Cheung, Weather Report by FluenceMind · Pull Request #9 · Ada-C24/weather-report

FluenceMind · 2025-12-06T17:21:36Z

No description provided.

… change and weather garden lanscape change

mikellewade

@FluenceMind and @Iris-Cheung-HY, nice work on your weather report. Thank you for the patience! Even instructors can have a back log!

mikellewade · 2026-01-08T21:45:38Z

+      longitude = response.data[0].lon;
+      console.log('success in findLatitudeAndLongitude!', latitude, longitude);
+
+      return{latitude, longitude};


Suggested change

return{latitude, longitude};

return { latitude, longitude };

mikellewade · 2026-01-08T21:46:38Z

+const axios = window.axios
+
+export const findLatitudeAndLongitude = (cityName) => {
+  let latitude, longitude;


Declaring these variable here makes me think that they will be accessed somewhere in addition to the assignment located in your .then chain. Being they are only being declared here, I would suggest you move the declaration/assignment into the .then entirely. This would also be more secure since it would be locally scoped to the callback of the .then.

Suggested change

let latitude, longitude;

mikellewade · 2026-01-08T22:11:21Z

+export const findLatitudeAndLongitude = (cityName) => {
+  let latitude, longitude;
+
+  return axios.get('http://localhost:5000/location',


Since you would be using the base of this URL in multiple places, to make your code more D.R.Y by assigning a constant variable to it.

const BASE_URL = 'http://localhost:5000/'

Then it could be used in the following manner:

return axios.get(`${BASE_URL}location',

mikellewade · 2026-01-08T22:11:50Z

+      latitude = response.data[0].lat;
+      longitude = response.data[0].lon;


Suggested change

latitude = response.data[0].lat;

longitude = response.data[0].lon;

const latitude = response.data[0].lat;

const longitude = response.data[0].lon;

mikellewade · 2026-01-08T22:12:26Z

+    .then((response) => {
+      latitude = response.data[0].lat;
+      longitude = response.data[0].lon;
+      console.log('success in findLatitudeAndLongitude!', latitude, longitude);


Don't forget to remove your console logs from your production code.

mikellewade · 2026-01-08T22:26:59Z

+const resetInputButton = () => {
+    state.tempValue = '';
+    state.tempDisplay.textContent = `${state.tempValue}`;
+    state.skyDisplay.textContent = '';
+    state.landscapeDisplay.textContent = '';
+    state.cityNameInput.value = 'Seattle';
+    state.headerCityName.textContent = 'Seattle'; 
+};


mikellewade · 2026-01-08T22:28:46Z

+const tempValueColorPatternChange = () => {
+    if (state.tempValue >= 80) {
+        state.tempDisplay.style.color = 'red';
+        state.landscapeDisplay.textContent = `🌵__🐍_🦂_🌵🌵__🐍_🏜_🦂`;
+    } else if (state.tempValue >= 70 && state.tempValue <= 79) {
+        state.tempDisplay.style.color = 'orange';
+        state.landscapeDisplay.textContent = `"🌸🌿🌼__🌷🌻🌿_☘️🌱_🌻🌷"`;
+    } else if (state.tempValue >= 60 && state.tempValue <= 69) {
+        state.tempDisplay.style.color = 'yellow';
+        state.landscapeDisplay.textContent = `"🌾🌾_🍃_🪨__🛤_🌾🌾🌾_🍃"` ;
+    } else if (state.tempValue >= 50 && state.tempValue <= 59) {
+        state.tempDisplay.style.color = 'green';
+        state.landscapeDisplay.textContent = `"🌲🌲⛄️🌲⛄️🍂🌲🍁🌲🌲⛄️🍂🌲"`;
+    } else if (state.tempValue <= 49) {
+        state.tempDisplay.style.color = 'teal';
+        state.landscapeDisplay.textContent = `"🌲🌲⛄️🌲⛄️🍂🌲🍁🌲🌲⛄️🍂🌲"`;
+    }
+};


Often when we find ourselves writing a plethora of conditional statements, we can usually make it more concise with a refactor. One possible refactor could be:
To make this a little more concise and avoid the multiple if statements we could use a loop and a list to do something like this instead:

const temperatureRanges = [ { min: 80, color: "red", landscape: "🌵 🐍 🦂 🌵🌵 🐍 🏜 🦂" }, { min: 70, color: "orange", landscape: "🌸🌿🌼 🌷🌻🌿 ☘️🌱 🌻🌷" }, { min: 60, color: "salmon", landscape: "🌾🌾 🍃 🪨 🛤 🌾🌾🌾 🍃" }, { min: 50, color: "green", landscape: "🌲🌲⛄️🌲⛄️🍂🌲🍁🌲🌲⛄️🍂🌲" }, { min: -Infinity, color: "blue", landscape: "⛄️ ⛄️ ⛄️" }, // Default for temperatures <= 49 ]; for (const range of temperatureRanges) { if (state.currentTemp >= range.min) { tempValueElement.style.color = range.color; landscapeElement.textContent = range.landscape; break; // Stop once the matching range is found } }

What you gain in this implementation is DRY code and maintainability/scalability.

mikellewade · 2026-01-08T22:31:20Z

+const updateSky = () => {
+    const skyChoice = state.skySelect.value;
+
+    if (skyChoice === 'Sunny') {
+        state.skyDisplay.textContent = '☁️ ☁️ ☁️ ☀️ ☁️ ☁️';
+    } else if (skyChoice === 'Cloudy') {
+        state.skyDisplay.textContent = '☁️☁️ ☁️ ☁️☁️ ☁️ 🌤 ☁️ ☁️☁️';
+    } else if (skyChoice === 'Rainy') {
+        state.skyDisplay.textContent = '🌧🌈⛈🌧🌧💧⛈🌧🌦🌧💧🌧🌧';
+    } else if (skyChoice === 'Snowy') {
+        state.skyDisplay.textContent = '🌨❄️🌨🌨❄️❄️🌨❄️🌨❄️❄️🌨🌨';
+    }
+};


Note the consideration for the updating the temperature color.

mikellewade · 2026-01-08T22:31:34Z

+const realTimeWeatherTemp = () => {
+    findLatitudeAndLongitude(state.cityNameInput.value)
+      .then(({latitude, longitude}) => getWeatherTemp(latitude,longitude))
+      .then(({weatherTemp})=> {
+        state.tempValue = weatherTemp;
+        state.tempDisplay.textContent = `${state.tempValue}`;
+        tempValueColorPatternChange();
+      }).catch((error) => {
+        console.log('error');
+      });
+};


mikellewade · 2026-01-08T22:32:14Z

+const loadControls = () => {
+    state.addOneButton = document.getElementById('increaseTempControl');
+    state.minusOneButton = document.getElementById('decreaseTempControl');
+    state.tempDisplay = document.getElementById('tempValue');
+    state.landscapeDisplay = document.getElementById('landscape');
+    state.cityNameInput = document.getElementById('cityNameInput');
+    state.headerCityName = document.getElementById('headerCityName');
+    state.realTimeButton = document.getElementById('currentTempButton');
+    state.skySelect = document.getElementById('skySelect');
+    state.skyDisplay = document.getElementById('sky');
+    state.resetButton = document.getElementById('cityNameReset');
+};
+const registerEvents = () => {
+    state.addOneButton.addEventListener('click', addtempButton);
+    state.minusOneButton.addEventListener('click', minustempButton);
+    state.realTimeButton.addEventListener('click', realTimeWeatherTemp);
+    state.resetButton.addEventListener('click', resetInputButton);
+    state.cityNameInput.addEventListener('input', updateCityName);
+    state.skySelect.addEventListener('change', updateSky);
+};
+
+const onLoaded = () => {
+    loadControls();
+    registerEvents();
+    updateCityName();
+    updateSky();
+};
+
+
+onLoaded();


✅

I would suggest moving the logic of adding event handlers to their respective HTML elements into something like document.addEventListener("DOMContentLoaded", RegisterEventHandlers);. That way we register the event handler functions to run when the DOM content has fully loaded. This ensures all HTML elements and resources are available before attempting to attach event handlers or manipulate the DOM.

Iris-Cheung-HY and others added 15 commits December 3, 2025 10:19

run npm i

ce17f41

completed coworking agreement

b9e29da

started html and js

c233778

added closing section tag on line 29, completed addOne and minusOne

35ee4d3

Complete Wave 1 HTML & CSS layout

b322b0f

Resolve merge conflict in index.html and finish Wave 1 layout

f96c8a2

psuh

c62ad8e

git pull with conflict, merged

3f076e0

revised html line 29 and 31 from span to button, completed temp color…

e8eaa46

… change and weather garden lanscape change

Implement Wave 3: live city name update with input event

53466db

worked on calling API for temperature

4b98ed0

wave 4 completed, get lat and lon, use coord to get the temperature

12bded8

Fix script loading, remove module import, enable Waves 2-5 functionality

7484237

Wave 6 completed

6f630e6

uncomment line 119 in index.js, tested all work

6787384

mikellewade reviewed Jan 8, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

C24 Crow Tatiana and Crow Hok Yin Iris Cheung, Weather Report#9

C24 Crow Tatiana and Crow Hok Yin Iris Cheung, Weather Report#9
FluenceMind wants to merge 15 commits into
Ada-C24:mainfrom
FluenceMind:main

FluenceMind commented Dec 6, 2025

Uh oh!

mikellewade left a comment

Uh oh!

mikellewade Jan 8, 2026

Uh oh!

mikellewade Jan 8, 2026

Uh oh!

mikellewade Jan 8, 2026

Uh oh!

mikellewade Jan 8, 2026

Uh oh!

mikellewade Jan 8, 2026

Uh oh!

mikellewade Jan 8, 2026

Uh oh!

mikellewade Jan 8, 2026

Uh oh!

mikellewade Jan 8, 2026

Uh oh!

mikellewade Jan 8, 2026

Uh oh!

mikellewade Jan 8, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

		latitude = response.data[0].lat;
		longitude = response.data[0].lon;

Conversation

FluenceMind commented Dec 6, 2025

Uh oh!

mikellewade left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants