Masi Nakhjiri-Cheetahs Group #75
Conversation
There was a problem hiding this comment.
Great work on this project Masi! The code you wrote for wave 4 is really close, I've put in a suggested solution, but I didn't have time to test it so it may need some adjustments. The code in this project is really clean and easy to read. This project is green.
| if (e.target.id == 'tempUp') { | ||
| state.temp += 1; | ||
| console.log(state); | ||
| showTemperature(); | ||
| } else if (e.target.id == 'tempDown') { | ||
| state.temp -= 1; | ||
| showTemperature(); | ||
| } |
There was a problem hiding this comment.
Great solution, nice use of the event target id!
| increaseArrow.addEventListener('click', changeTemp); | ||
| increaseArrow.addEventListener('click', tempColorAndLandscape); |
There was a problem hiding this comment.
This works, but I recommend refactoring so that changeTemp calls tempColorAndLandscape rather than adding tempColorAndLandscape as a separate event listener. tempColorAndLandscape relies on the change to state.temp that happens in changeTemp, but adding it as a separate event listener implies that these are two completely separate actions, rather than connected.
| state.temp -= 1; | ||
| showTemperature(); | ||
| } | ||
| }; |
There was a problem hiding this comment.
Please see my note on line 135, this is the refactor change that I recommend.
| }; | |
| tempColorAndLandscape(); | |
| }; |
| // const getWeather = async () => { | ||
| // let latitude, longitude; | ||
|
|
||
| // await axios | ||
| // .get('http://127.0.0.1:5000/location', { | ||
| // params: { | ||
| // q: state.city, | ||
| // }, | ||
| // }) | ||
| // .then((response) => { | ||
| // latitude = response.data[0].lat; | ||
| // longitude = response.data[0].lon; | ||
| // }) | ||
| // .catch((error) => { | ||
| // console.log('error in finding location!'); | ||
| // }); | ||
|
|
||
| // axios | ||
| // .get('http://127.0.0.1:5000/weather', { | ||
| // params: { | ||
| // lat: latitude, | ||
| // lon: longitude, | ||
| // }, | ||
| // }) | ||
| // .then((response) => { | ||
| // // console.log(response.data); | ||
| // const kelvinTemperature = response.data.main.temp; | ||
| // // console.log(kelvinTemperature); | ||
| // const fahrenheitTemperature = Math.round( | ||
| // (kelvinTemperature - 273.15) * 1.8 + 32 | ||
| // ); | ||
| // state.temp = fahrenheitTemperature; | ||
| // tempValue.innerText = `${state.temp + '\u00B0F'}`; | ||
| // tempColorAndLandscape(); | ||
| // }) | ||
| // .catch((error) => { | ||
| // console.log('error in finding temperature!', error); | ||
| // }); | ||
| // }; |
There was a problem hiding this comment.
This is so close to working! I think with a few changes (although I didn't test it) you could get it to work. The big change is moving the second axios call to a separate function, and then calling that function inside the .then handler of the first axios call:
| // const getWeather = async () => { | |
| // let latitude, longitude; | |
| // await axios | |
| // .get('http://127.0.0.1:5000/location', { | |
| // params: { | |
| // q: state.city, | |
| // }, | |
| // }) | |
| // .then((response) => { | |
| // latitude = response.data[0].lat; | |
| // longitude = response.data[0].lon; | |
| // }) | |
| // .catch((error) => { | |
| // console.log('error in finding location!'); | |
| // }); | |
| // axios | |
| // .get('http://127.0.0.1:5000/weather', { | |
| // params: { | |
| // lat: latitude, | |
| // lon: longitude, | |
| // }, | |
| // }) | |
| // .then((response) => { | |
| // // console.log(response.data); | |
| // const kelvinTemperature = response.data.main.temp; | |
| // // console.log(kelvinTemperature); | |
| // const fahrenheitTemperature = Math.round( | |
| // (kelvinTemperature - 273.15) * 1.8 + 32 | |
| // ); | |
| // state.temp = fahrenheitTemperature; | |
| // tempValue.innerText = `${state.temp + '\u00B0F'}`; | |
| // tempColorAndLandscape(); | |
| // }) | |
| // .catch((error) => { | |
| // console.log('error in finding temperature!', error); | |
| // }); | |
| // }; | |
| const getWeather = () => { | |
| //let latitude, longitude; | |
| axios | |
| .get('http://127.0.0.1:5000/location', { | |
| params: { | |
| q: state.city, | |
| }, | |
| }) | |
| .then((response) => { | |
| const latitude = response.data[0].lat; | |
| const longitude = response.data[0].lon; | |
| getTempForLocation(latitude, longitude); | |
| }) | |
| .catch((error) => { | |
| console.log('error in finding location!'); | |
| }); | |
| }; | |
| const getTempForLocation = (latitude, longitude) => { | |
| axios | |
| .get('http://127.0.0.1:5000/weather', { | |
| params: { | |
| lat: latitude, | |
| lon: longitude, | |
| }, | |
| }) | |
| .then((response) => { | |
| // console.log(response.data); | |
| const kelvinTemperature = response.data.main.temp; | |
| // console.log(kelvinTemperature); | |
| const fahrenheitTemperature = Math.round( | |
| (kelvinTemperature - 273.15) * 1.8 + 32 | |
| ); | |
| state.temp = fahrenheitTemperature; | |
| tempValue.innerText = `${state.temp + '\u00B0F'}`; | |
| tempColorAndLandscape(); | |
| }) | |
| .catch((error) => { | |
| console.log('error in finding temperature!', error); | |
| }); | |
| }; |
No description provided.