MyWeather weather app

Custom weather app using the OpenWeatherMap OneCall API and Geocoding API.

Features

• Current weather info

  • Weather icon (according to the current weather)

  • Video background (according to the current weather)

  • Temperature

  • Sunrise / -set

  • Moonrise / -set

  • Winddirection

  • Windspeed

  • Pressure

  • Humidity

  • Probability of precipitation

  • UV Index

• Hourly weather report

  • Weather icon (according to the hourly weather forecast)

  • Temperature

  • Time

• Daily weather report

  • Day

  • Date

  • Weather icon (according to the hourly weather forecast)

  • Temperature (including min / max values)

  • Probability of precipitation

  • Windspeed

• Bonus

  • Animated icons avaiable on the branch "animated icons" (wip)

User Guide

1. Clone / Download repository

2. Create an OpenWeather account ( Signup )

3. Go to "My API Keys" ( Link ) and generate a new key

4. Open script.js from the repository you just cloned in a text editor

5. Replace YOUR API KEY HERE at the top of the file with the key you just generated

6. Save changes

7. Upload files to your desired hosting platform

8. Visit the URL where you uploaded everything in mobile Safari or Chrome browser

9. Select "Add to startscreen" in the browser menu

10. The app is now avaiable on your home screen 🎉

Developer Guide

• Run npm run watch for development
• Run npm run build for a production build
  • The production build will be available under the public directory
• Run npx stylelint "**/*.scss" --fix for style linting and auto fixes of SCSS files

UI Design

See UI mockups here:

Adobe XD