/new-weather-app

This project uses Weather API to take and show weather information based on the location data taking from MapBox API. Enjoy the background image, which is provided by Pexels API and is changed randomly corresponding to the weather of the location you've searched.

Primary LanguageSCSSMIT LicenseMIT

Weather App

Top Page Screenshot

About the Project

This project is based on the Odin project: Weather App. I used Weather API to take and show weather information based on the location data taking from MapBox API. Also, the background image, which is provided by Pexels API, is changed randomly corresponding to the weather of the location you've searched.

Users can do actions like below in this application:

  • Search the location they want to know the weather
  • Get the current weather information including temperature and humidity
  • Select the unit of temperature that users want to know
  • Enjoy random image changed corresponding to the weather result

A list of commonly used resources that I find helpful is listed in the acknowledgments.

Table of Contents

Built With

Live Demo

Live Demo Link

Getting Started

To get a local copy up and running follow these simple example steps.

  1. On the project GitHub page, navigate to the main page of the repository.
  2. Under the repository name, locate and click on a green button named Code.
  3. Copy the project URL as displayed.
  4. If you're running the Windows Operating System, open your command prompt. On Linux, Open your terminal.
  5. Change the current working directory to the location where you want the cloned directory to be made. Leave as it is if the current location is where you want the project to be.
  6. Type git clone, and then paste the URL you copied in Step 3.
    e.g. $ git clone https://github.com/yourUsername/yourProjectName
  7. Press Enter. Your local copy will be created.
  8. In the console, go to the place where you cloned this folder, and run npm install
  9. Go to each API's website and create your free account to get token/key/id
  1. create .env file in the top level of the directory, and write your token/key/id like below: MAPBOX_ACCESS_TOKEN=<YOURTOKENHERE> WEATHER_APP_ID=<YOURTOKENHERE> PEXELS_API_KEY=<YOURTOKENHERE>
  2. Run npm run dev, and the server will be opened, then click "dist" folder

Author

👤 Yoko Saka

Contributing

Contributions, issues, and feature requests are welcome! Feel free to check the issues page.

  1. Fork the Project
  2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
  3. Commit your Changes (git commit -m 'Add some AmazingFeature')
  4. Push to the Branch (git push origin feature/AmazingFeature)
  5. Open a Pull Request

Show your support

Give a ⭐️ if you like this project!

License

This project is MIT licensed.

Acknowledgements