For SheCodes React Workshop, we went through the process of creating a Weather App. It started with the design and creating a wireframe of how I wanted it to look. The workshop led you step by step how to create the app, but the design they focused on was very different to mine. I found I came across challenges where I needed to create different components for sections of my page and figure out for myself how they worked together. Moving away from their design helped me to learn more and deepen my understanding of React.
I started with the search functionality. I learnt how to get the current geolocation to create a current location button. This search result was then used to call the API to find the current weather for that location.
Next up I added the forecast component. This looked quite intimidating at first but learning how components could be reused and I mapped the daily forecast to give 6 days of weather. For this section I used a different API call to allow for multiple days to be retrieved. The API used for current forecast only pulled in one day of data.
- React
- HTML
- CSS
- API intergration
- Bootstrap
- I would really like to remove the dark mode toggle and have it automatically change when the sun sets and rises in the default or current location.
- I would add an alert if you've made a spelling mistake, not entered a location or it's unknown in the search bar.
- Celcius to Fahrenheit conversion. As part of the course I did learn to do this and it was implemented in the current weather. I removed the functionality as I hadn't given this ability to the forecast or the wind speed. In the future I would like to add this functionality back fully.
Debbie Dann @debbie_digital
Project link: React weather app