Conversation
| } else if (state.temp >= 80) { | ||
| tempColor.style.color = 'red'; | ||
| newLS.src = `assets/hot1.jpeg`; | ||
| } |
There was a problem hiding this comment.
The logic here is correct, the only thing that is that you didn't need to put state.temp >= 50 && state.temp < 59 and then (state.temp >= 60 && state.temp < 69). You could just do state.temp > 50 and state.temp > 60. These take care of the range between these two numbers.
| .catch((error) => { | ||
| console.log('error!', error); | ||
| }); | ||
| }; |
There was a problem hiding this comment.
You handled this nested promise chaining very well! However there is a way we can make this code more concise! Making use of the async & await functionality in Javascript:
const findLocation = async (query) => {
try {
const coordinates = await axios.get('http://127.0.0.1:5000/location', {
params: {
q: query,
format: 'json',
}})
let latitude = coordinates.data[0].lat;
let longitude = coordinates.data[0].lon;
findWeather(latitude, longitude)
} catch (err) {
console.log(err)
}
} Essentially, the await keyword allows for us to stop the execution of the function we are in and wait for the promise it is attached to be fulfilled and resolved. Then we can save that returned data to a variable and go about our business! We will put this logic inside of try/catch blocks to handle errors. I also would suggest breaking the two functionalities (location and weather) into separate functions to avoid nesting.
|
|
||
| selectSky.addEventListener('change', (event) => { | ||
| const result = document.querySelector('.result'); | ||
| result.textContent = `The sky is ${event.target.value}`; |
There was a problem hiding this comment.
I love this use of the event object!
| realTimeButton.addEventListener('click', realTimeClick); | ||
| const reset = document.getElementById('resetButton'); | ||
| reset.addEventListener('click', resetCity); | ||
| }; |
2 participants
No description provided.