Conversation
| city: 'Seattle', | ||
| lat: '47.6038321', | ||
| long: '-122.330062', | ||
| }; |
There was a problem hiding this comment.
I love this! Building your own version of state will allow for you to better understand the inner workings of state in React!
| .catch((error) => { | ||
| console.log('Error in find the latitude and longitude!', error.response); | ||
| }); | ||
| }; |
There was a problem hiding this comment.
Very nice chain promising! A refactor that you could have made is something like this
const getLatAndLong = async () => {
try {
const response = await axios.get('http://127.0.0.1:5000/location', {
params: {
q: state.city,
format: 'json',
}})
state.lat = response.data[0].lat;
state.long = response.data[0].lon;
getWeather();
} catch (err) {
console.log(err)
}
};Making use of the async & await functionality in Javascript allows us to stop at the axios call and wait for it to finish that logic until the promise is fulfilled then continue! It is really nice for making out code concise! Then we can put this in a try catch block in order to do some error handling.
| // const cityForm = document.querySelector('form'); | ||
| // const landscape = document.querySelector('.card'); | ||
| // const card = document.querySelector('.details') | ||
|
|
There was a problem hiding this comment.
I don't think you needed to pass in the key param for the call to the backend. That should have been on server side. In general, you never want to store valuable information like API keys in your frontend.
| } else { | ||
| color = 'teal'; | ||
| landscape = '🌲🌲⛄️🌲⛄️🍂🌲🍁🌲🌲⛄️🍂🌲'; | ||
| } |
There was a problem hiding this comment.
I love this! This is exactly how it was solved in the solution!
|
|
||
| document.addEventListener('DOMContentLoaded', registerEventHandlers); | ||
|
|
||
|
|
There was a problem hiding this comment.
Very very good code, Sika! There were not many things to correct or refactor in your code! A textbook example of weather report! Just keep in mind the async & await refractor that I commented earlier in the PR. Awesome work! ✨
2 participants
No description provided.