My Weather Dashboard is a useful Weather Forecasting tool that could help me plan a range of trips.
As a bushwalker the dashboard suits my trip planning requirement right now - day walks and multi-day trips in remote areas of the Australian bush.
As an astrophotographer, photographing the Milky Way, Deep Sky Objects and night timelapse sequences in a range of locations I can see the potential for extending the Weather Dashboard to get more detailed weather information I need to plan these trips. At the moment I have to use 3 or 4 different apps or websites to get the information required.
Data available through the OpenWeatherMap API will let me tailor my Weather Dashboard to provide the detailed information I need in one place. It's pretty exciting!
Click the link to visit the deployed website: Weather Dashboard.
In my implementation:
- JavaScript/jQuery is used to add/delete/modify elements as required to allow a dynamic interactive page
- Materialize is used as the CSS Framework
- Locations are saved automatically to the Weather Collection
- When the Dashboard loads it displays data for the 1st location in the collection (top button)
- Locations can be deleted
- Locations are automatically added to the Weather Collection in Local Storage
- Each location's Name, Latitude and Longitude is stored in the collection
- The Weather Colection is updated immediately if a Location is deleted
Navigation is very simple: 1: To add a Location
-
Click in the Location Name field
-
Enter the Name of a Location & click Search
- For Australia - just enter the Location Name: ',AU' will be added to automatically (eg: Orange)
- For other countries - enter the Location Name followed by a comma ',' and the 2 Character County Code (eg: Whitby, GB)
2: To view a Saved Location click on the button with the Location Name 3. To delete a saved location click on the Garbage Can icon at the right hand end of the button
- Bootcamp Materials - Lesson Material from Weeks 1 - 8
- Prior knowlege and experience
- Group tutorial sessions
- jQuery jQuery API Documentation
- Day.js Day.js Documentation
- Materialize Documentation
- Open Weather API Documentation
- MDM Web Docs Attribute Selectors
- MDM Web Docs Array.prototype.findindex()
- MDM Web Docs Array.prototype.includes()
- MDM Web Docs Array.prototype.splice()
- MDM Web Docs Arrow function expressions