This is a weather dashboard with form inputs that will run in the browser and feature dynamically updated HTML and CSS. It allows the user to search to view weather outlook for multiple cities so travelers can plan a trip accordingly.
-
When searched for a city, the current and future conditions for that city will be presented and that city is added to the search history
-
When viewing current weather conditions for the city, the following is shown:
- City name
- Date
- An icon representation of weather conditions
- Temperature
- Humidity
- Wind speed
- UV index
-
When viewing the UV index, it is presented with a color indicating severity (reference: Ultraviolet Index Wikipeadia)
0-2 Low
3-5 Moderate
6-7 Orange
8-10 Very High
11+ Extreme
-
When viewing the future weather conditions for the city, a 5-day forecast will be presented with the following information:
- Date
- An icon representation of weather conditions
- Temperature
- Humidity
- When a city in the search history is clicked, the current and future conditions for that city is presented again
-
OpenWeather API is used to retrieve weather data for cities. And
localStorageis used to store persistent data.
- Download or clone repository
- Open the main page (index.html) on your browser to view
- Use a text editor to view all coding, Visual Studio Coding is recommended.
- Checking current weather
- Checking weather according to a 5-day forecast
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent