dingogap / weather-dashboard

5 Day Weather Forecast Ap

Weather Dashboard

Description

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!

Server-Side APIs: Weather Dashboard Link

Click the link to visit the deployed website: Weather Dashboard.

In my implementation:

1. JavaScript/jQuery is used to add/delete/modify elements as required to allow a dynamic interactive page
2. Materialize is used as the CSS Framework
3. Locations are saved automatically to the Weather Collection
4. When the Dashboard loads it displays data for the 1st location in the collection (top button)
5. Locations can be deleted

Data

1. Locations are automatically added to the Weather Collection in Local Storage
2. Each location's Name, Latitude and Longitude is stored in the collection
3. The Weather Colection is updated immediately if a Location is deleted

Navigation

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

Resources Used

1. Bootcamp Materials - Lesson Material from Weeks 1 - 8
2. Prior knowlege and experience
3. Group tutorial sessions
4. jQuery jQuery API Documentation
5. Day.js Day.js Documentation
6. Materialize Documentation
7. Open Weather API Documentation
8. MDM Web Docs Attribute Selectors
9. MDM Web Docs Array.prototype.findindex()
10. MDM Web Docs Array.prototype.includes()
11. MDM Web Docs Array.prototype.splice()
12. MDM Web Docs Arrow function expressions