The Odin Project

Project: Weather app

Live version of the site can be found here

This weather app gets the user's local coordinates through the Geolocation API and displays the weather data of that location. You can also search for the weather data of cities around the world.

This weather app displays the weather data of any city around the world! Just type whichever city in the search bar and the display will populate the data.

Features:

1. Get local weather data The app gets the user's location data on initialization if the user has location access turned on. The local weather will then be displayed shortly afterwards. If location access is disabled, the app defaults to London, UK.

2. Search for any city in the world The GeoDB cities API allows the app to get city data all over the world which is then used to display the local weather for that area. Search results are sorted by decreasing population order.

3. Get units in either metric or imperial You can get your weather data--including temperature, wind speed, atmospheric pressure, etc.--in either metric or imperial units.

Built With

• Vanilla JS
• HTML5
• CSS

Getting Started

In order to setup and work on this project on your own, you will need to:

1. Clone this project:
   git clone https://github.com/renchester/top-weather-app.git

2. Once you have cloned this project, you can install the required dependencies by using:
   npm install

3. A live demo of the project can be started by using:
   npm start

4. Distribution files can be produced using:
   npm run build

Acknowledgments

The app uses the following APIs to receive pertinent data:

1. GeoDB Cities API
2. Open Weather API

Background images used to display the weather are from the following creators on Unsplash:

1. Olena Sergienko
2. elCarito
3. Adam Chang
4. Artem Sapegin
5. Alex Gindin
6. Andreas Brun
7. Andrew Seaman
8. Antoine Barres
9. Peyman Farmani
10. Anne Nygard
11. Anant Chandra
12. Elia Clerici
13. Priya Bhagtani
14. Magnus Ostberg
15. Ben Owen

Weather icons used for the project are from Erik Flowers / Weather Icons.

Loading spinner icon used for the project is from Loading.io

Deployed on GitHub Pages

Deployed on GitHub Pages

Display

Nighttime weather view

Daytime weather view

---

Developed by Renchester Ramos