Skip to content

bolah2009/js-weather

master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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