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

🛠️ 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.

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

🤝🏾 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

• Microverse Team
• The Odin Project

👨🏽‍💻 Author

• @bolah2009

📝 License

• MIT licensed.