C22 Dana Delgado & Rong Jiang

[cornetto9]

No description provided.

[yangashley]

Good work on weather-report, team!

[yangashley]

Notice that the difference between these two sections of code is += and -=. Consider creating a helper function that could handle increasing and decreasing the temperature and registering the callback for both buttons.

const handleTempChange = (event) => {
    if (event.target.id === 'increaseTempControl') {
       currentTemp += 1;
    } else {
       currentTemp -= 1;
    }
  updateTemperature();
};

[yangashley]

Prefer the logic that gets registered with an event to be written in a helper function and then you pass the function when you add an event listener.

It makes your code more readable and it can be easier to debug.

[yangashley]

I like how the logic on lines 61-62 are in a helper function and then you pass the function to addEventListener (instead of passing all of the logic in as an anonymous function on line 65).

[yangashley]

It's descriptive and makes your code self-documenting when your variable names also indicate what the element is.

Suggested change

	const tempValue = document.getElementById('tempValue');
	const tempIncrease = document.getElementById('increaseTempControl');
	const tempDecrease = document.getElementById('decreaseTempControl');
	const landscape = document.getElementById('landscapeDisplay');
	const tempValueDisplay = document.getElementById('tempValue');
	const tempIncreaseButton = document.getElementById('increaseTempControl');
	const tempDecreaseButton = document.getElementById('decreaseTempControl');
	const landscapeDisplay= document.getElementById('landscapeDisplay');

[yangashley]

Recall that we can also use minimized syntax that comes from ES6 with arrow functions syntax. For our curriculum, we prefer the arrow syntax.

const updateTemperature = () => {
  // your logic here
}

[yangashley]

Like you use a data structure for skies, consider using a data structure here to store this info because a bunch of conditional logic like if/else if/else if/else, etc can be brittle and bug-prone.

A list could work here, then you can iterate over the list and check tempVaue against the first element of the list and get the color and landscape values.

temperatureColorsAndLandscapes = [
    [80, "red", "🌵__🐍_🦂_🌵🌵__🐍_🏜_🦂"],
    [70, "orange", "🌸🌿🌼__🌷🌻🌿_☘️🌱_🌻🌷"],
    [60, "yellow", "🌾🌾_🍃_🪨__🛤_🌾🌾🌾_🍃"],
    [50, "green", "🌲🌲⛄️🌲⛄️🍂🌲🍁🌲🌲⛄️🍂🌲"],
    [40, "teal", "🌲🌲⛄️🌲⛄️🍂🌲🍁🌲🌲⛄️🍂🌲"],
]

[yangashley]

Prefer to refer to this url string with a constant variable. When possible refer to constant values like this with a variable name to make your code more self documenting and help other devs understand what's going on with your code.

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

return axios
    .get(`${baseURL}/location`)

[yangashley]

Reference this string with a constant variable

[yangashley]

Consider organizing your file so that all the elements are in one section. I'd move lines 50-51 up to the top with lines 2-5.

[yangashley]

Prefer to use a catch block for error handling instead of manually throwing an error.

[yangashley]

Nice job using a catch block here.