get yo weather

learning goals

• implement the html template tag to make rendering in vanillaJS less tedious
• practice making api requests to public apis to retrieve data
• build generic data parsing functions
• using promises and async/await along with fetch to do all of the above
• leverage aynchronous data to populate dropdown autocomplete
• implement autocomplete (with external library)
• build program specific fetch wrapper to increase readability and organization
• build a typesafe program with typescript
• learn and implement a data visualization library: chartjs

features

• search for cities worldwide
• select city from auto-complete dropdown
• display current forecast
• display 5 day forecast along with highs and lows
• display chart of 5 day forecast with 3hr step
• highlights of current weather
• animated icons
• wind speed icon displays beaufort scale calculation

Built with

• Typescript
• GeoDBCities API
• OpenWeather API
• Webpack
• Chart.js
• Algolia Autocomplete

Next steps

• Add dynamic background based on conditions