[Unit 6, Server-Side APIs Assignment]
This is a weather dashboard that retrieves weather data for cities. It shows the searched city's current weather condition and five-day forecast using OpenWeather API and uses localStorage to store any persistent data. It runs in a browser and features dynamically updated HTML and CSS.
This application has the following interface:
The deployed version can be viewed here: https://jbtiglao.github.io/about-the-weather/.
While the repository can be accessed here: https://github.com/jbtiglao/about-the-weather.
Clone my GitHub repository.
To open the application, on Visual Studio Code:
- Click File, select Open Folder from the drop-down list, and navigate to the cloned repository. Click Open.
- On the upper left-hand side, click on the Explorer icon, then the repository's
index.htmlfile. Click on the .HTML document and choose Open in Default Browser, or the browser of your choice, to open and run the application.
Data from OpenWeather's Current Weather and One Call services are accessed through the creation of an API Key and free subscription to the said services on openweathermap.org.
For instructions on how to use the application, please refer to the deployed site, as well as the following features and functionalities.
The application has the following features and functionalities:
- A search field and search button.
- To look for a city's weather condition, enter the city name in the search field and click on the Search button.
- The city's current weather condition is displayed on the column containing the search result (current weather column).
- The city's weather condition for the next five days are displayed below the current weather column.
- The column containing the city's current weather displays the following information:
- the current city;
- date;
- weather icon that represents the current weather condition;
- current temperature;
- current humidity;
- current wind speed; and
- current UV index.
- The UV index's color shows whether the condition is favorable or low (green), moderate (yellow), or severe (orange, yellow, or violet).
- A UV index of
2 or lessmeans the condition is favorable or low and will display a green color. - A UV index of
3 to 5means the condition is moderate and will display a yellow color. - A UV index of
6 to 7means the condition is severe (high) and will display an orange color. - A UV Index of
8 to 10is severe (very high) and will display a red color. - A UV index of
11+is severe (extreme) and will display a violet color.
(Note: A UV Index of 2.1 to 2.99 will still be displayed as green since a UV index is considered to be in the yellow or moderate level only when it reaches 3. The same is true with the UV index of 5.1 to 5.99, which will be displayed as yellow or moderate since the orange level or high UVI starts at 6. The UVI of 7.1 to 7.99 will also be displayed as orange or high because very high or red UVI starts at 8.)
- When the user views the future weather condition for the current city, the city's weather forecast for the next five days are displayed in five separate columns below the current weather condition. Each of the columns contains the following information:
- date;
- weather icon;
- temperature;
- humidity; and
- wind speed.
- When the user enters the name of a city and clicks on the Search button, the city name is saved on the Search History list below the Search button.
- Clicking on a city in the search history will show the city's current weather condition and five-day forecast.
- When the application is opened or the page is refreshed, the last searched city with its current weather and five-day forecast will appear.
- The application is responsive when viewed and accessed using different devices with different-sized screens:
License used for this project - MIT
For more information on the above license, please see the following website:
To contribute to this application: Please email the author for guidelines.
The OpenWeather APIs, as well as the application's features and functionalities are tested using Chrome Dev Tools and running the application in a browser.
The following people/resources were consulted and/or utilized in the development of this application:
- UCI Boot Camp study materials, videos, and internet resources
- Jeff Howell for the Homework Walk Through videos (They are a big help. Thank you!)
- OpenWeather
- Postman API Platform
- Bootstrap
- jQuery
- Moment.js
- Fontawesome
- cdnjs
- stackoverflow
- How to Understand the UV Index
- Ultraviolet Index
- ColorHexa
- The amazing Natalie Merchant and the 10,000 Maniacs whose song Like The Weather inspired the application's title and kept me company while developing this app.
Jane Tiglao
For questions or issues, please contact:
- Jane Tiglao
- Email: janeytiglao@gmail.com
- GitHub Username: jbtiglao
- GitHub Profile: https://github.com/jbtiglao