This application is a weather dashboard which offers dynamically updated HTML and CSS with data provided by the OpenWeather API. This apps runs in a browser and provides users with the current and 5 day weather forecasts. Users may choose to search for new cities, select them from their search history or based on their geo coordinates.
AS A traveler I WANT to see the weather outlook for multiple cities SO THAT I can plan a trip accordingly
- GIVEN a weather dashboard with form inputs
- WHEN I search for a city
- THEN I am presented with current and future conditions for that city and that city is added to the search history
- WHEN I view current weather conditions for that city
- THEN I am presented with the city name, the date, an icon representation of weather conditions, the temperature, the humidity, the wind speed, and the UV index
- WHEN I view the UV index
- THEN I am presented with a color that indicates whether the conditions are favorable, moderate, or severe
- WHEN I view future weather conditions for that city
- THEN I am presented with a 5-day forecast that displays the date, an icon representation of weather conditions, the temperature, and the humidity
- WHEN I click on a city in the search history
- THEN I am again presented with current and future conditions for that city
- WHEN I open the weather dashboard
- THEN I am presented with the last searched city forecast
- Find Me functionality provided by browser geo coordinates
- Ability to change from metric to imperial measurement that is saved in the localStorage preferences
- Ability to clear all search history
- Ability to delete individual search history items
| File | Relative Path | Description |
|---|---|---|
| index.html | index.html | Home page |
| style.css | assets/css/style.css | Main stylesheet |
| index.js | assets/js/index.js | All JavaScript logic |
Please visit the site hosted on GitHub Pages.
MIT License
- OpenWeather - OpenWeather API
- Bootstrap - Bootstrap CSS framework
- Google Fonts - The Roboto font
- Moment - Moment.js and Moment Time Zone
- Font Awesome - Font Awesome 5 icons
- GitHub - Code repository and page hosting via GitHub Pages
- Visual Studio Code - For editing and authoring code
- Prettier - For opinionated code formatting
- Chrome Devtools - For editing pages on the fly and diagnosing problems
- iTerm2 - For all my terminal needs on macOS
- MacDown - For creating the README.md and all things Markdown related