Skip to content

Using Open Weather map API, Google Places API and Geolocation API, the app was built to forecast five-day weather details in both empirical and metric units.

License

Notifications You must be signed in to change notification settings

bolah2009/js-weather

Repository files navigation

Netlify Status

PROJECT: Weather Forecast App

This is the fifth project of the Main JavaScript curriculum at Microverse - @microverseinc

The objective is to create a weather forecast app using the weather API. The features of the app also include:

  • Use async/await and Fetch API to get data from the OpenWeatherMap API and populate data to the DOM
  • Format unit appropriately, add %, ยฐF, ยฐC, mph, km/h, etc
  • Add unit conversions from metric to imperial and vice versa
  • Style background to change according to weather conditions
  • Improve city search using Google Places API
  • Add current location functionality using Geolocation API

๐ŸŒ Live link

๐Ÿ–ผ๏ธ Screenshots

Small Screen Medium Screen
Small Screen Medium Screen

๐Ÿ› ๏ธ Development

  • Clone the project
git clone https://github.com/bolah2009/js-weather.git
  • Install Dependencies
yarn install
  • Run linter (eslint and stylelint)
yarn lint:check
  • Run Prettier
yarn format:check
  • Set up environment variables:

To use in the development environment, please, configure dotenv by running the command below to copy .env.sample into .env:

cp .env.sample .env

and replacing YOUR_API_KEY_HERE to appropriate API keys.

See OpenWeatherMap API guide for WEATHER_API and Places API guide for PLACES_API.

  • Start server (Development mode)
yarn start

๐Ÿงพ TODO

  • Improve UI/UX

๐Ÿ‘จ๐Ÿฝโ€๐Ÿซ Usage

The placeholder of the search input shows the format it accepts which is a city name city. e.g. lagos, london, Abuja and it's not case sensitive. See the demo below.

weather_app_preview

The input also generates location predictions using Google Place API, clicking on one of the suggestions gives a weather information. See the demo below.

weather_app_predictions

๐Ÿค๐Ÿพ Contributing

  • Contributions, issues and feature requests are welcome!

  • Feel free to check the issues page.

โญ๏ธ Show your support

  • Give a โญ๏ธ if you like this project!

๐Ÿ™๐Ÿพ Acknowledgments

๐Ÿ‘จ๐Ÿฝโ€๐Ÿ’ป Author

๐Ÿ“ License

About

Using Open Weather map API, Google Places API and Geolocation API, the app was built to forecast five-day weather details in both empirical and metric units.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published