I designed this web app for my project during the Using APIs module at HackYourFuture journey of learning web development. The web version of this project can be seen here.
The app fetches data from three sources.
- First of all, if allowed by the user, the app will access the user's location and fetch the weather data for the user from openweathermap.
- Secondly, it fetches the Picture of the Day from NASA's Astronomy Picture of the Day API.
- Lastly, we can access NASA's database for images related to any search word the user may have. Including videos in the search result is optional.
Foreseeable errors like location access denied, failing to fetch data and unavailable data are handled such that the user can see on the screen what went wrong.
The app was built using the knowledge gained by studying different modules of HTML HackYourFuture curriculum especially:
This is a basic app that fulfills the requirements for the assignment at HackYourFuture. But I intend to keep improving upon it with the following roadmap.
- Responsive app
- Use atleast one API to fetch data
- Loading/error handling for the interaction with the API
- Fetch the forecast
- Additional Options
- Add option to get weather for any location
- Utilise the Get Details button to fetch more details about the search results
This is in no way a perfect application. I am in the process of learning and implementing knowledge. Therefore, contributions, suggestions and feedbacks are heartily welcome. If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature) - Commit your Changes (
git commit -m 'Add some AmazingFeature') - Push to the Branch (
git push origin feature/AmazingFeature) - Open a Pull Request
Nida ul Zafar
I would like to express my deepest appreciation to a number of people and resources that helped me get through this project.
- Martijn My mentor for this project who not only guided me with the project but also on the principles of development.
- Rob van Kruijsdijk For helping me out with the bugs.
- Abdullah My homework mentor who explained me patiently the concepts of try / catch and async / await.
- OpenWeather For their informative and easy to handle API that I used in this project.
- NASA For their APIs to display an astonishing Picture of the Day and the Image database.
- Carla Codes For the wonderful stars twinkling animation I have used for the background.
- GetCSSScans For the beautiful button design.
- Bas Milius For the incredible animated icons for weather conditions.
- Alvaro For the cool checkbox button.
- Othneil Drew For his carefully designed readme template that helped me design mine.
- Shields For their easy to design badges that I have used above.
- Last but not least the HackYourFuture Team for their untiring guidance and efforts.