A beautiful, animated weather application focused on providing accurate, detailed weather information with a clean, intuitive interface. Inspired by Breezy Weather for Android.
Live Demo • Features • Installation • Usage • Technology • API Keys • License
- Beautiful Animated Visuals - Dynamic backgrounds and icons that change based on current conditions
- Detailed Information - Presenting the weather information that you need:
- Current conditions,
- 7 day forecast
- Precipitation nowcasting
- Hourly forecasts
- Weather alerts
- Weather radar, with integrated severe weather alert polygons in it's own larger popout modal
- Astronomical data, including sunrise/sunset times, day length, and moon phases (more to come!)
- Modular API System - Uses the Open-Meteo API globally for weather by default
- Other API options include Pirate Weather (Global, requires a free API key) or the National Weather Service (US)
- The modular API system allows new sources to be added easily as well (Documentation for this will be completed soon!)
- Smart Location Detection - Automatic geolocation with manual search options
- Progressive Web App (PWA) - Install on any device with automatic updates
- Built Using Plain JS - No heavy frameworks such as React or Vue, built using standard HTML/CSS/JS
- Unit Conversion - Toggle between imperial (°F) and metric (°C) units
- Responsive Design - Optimized for all devices from desktop to mobile
- Weather Alerts - Color-coded severity indicators for active weather alerts
- More To Come - More features are to be added... Stay tuned!
- Visit Variable Weather in your browser
- Your browser will show an "Install" or "Add to Home Screen" option
- Click to install the app on your device
- The app will now be available from your home screen or app launcher
Please note: Because the PWA is currently setup to operate from GitHub Pages, you may need to adjust the manifest and service workers files to allow for the PWA function to be activated if you are hosting this on your own machine or elsewhere.
Note on NWS User-Agent: If you deploy this app elsewhere, please change the user-agent string found in the config.js file to match your contact information.
# Clone the repository
git clone https://github.com/JoshuaKimsey/variable-weather.git
# Navigate to the project directory
cd variable-weather
# You can use a live preview extension in VS Code to test this.
# Alternatively, you can use your own web server of choice.- Automatic Location: Click the location arrow icon to use your current location
- Manual Search: Enter a location (city, state, country) in the search box
- Current Conditions: The main display shows current temperature, conditions, and weather icon
- Details: View wind speed, humidity, pressure, and visibility information
- Forecast: Scroll horizontally to view the 7-day and hourly forecast
- Nowcast: Click on individual bars to see the precipitation type, probability, and intensity for that time period
- Alerts: Any active weather alerts will appear at the top (US location for now) - click to expand for details
- Weather Radar: See precipitation in your area or around the world, click the radar icon in the bottom-right to view it
- Integrated Severe Alert Polygons: See Severe Weather Alerts on the map (US only currently)
- Astronomical Data: Progression of the sun, when it rises and sets, and the phases of the moon
- Unit Toggle: Switch between Fahrenheit and Celsius using the settings menu
- Icon Switching: Switch between the dynamically generated icons or meteocons
- Note: On mobile devices, Meteocons will be enabled as the default choice upon first start. However, once this is changed, the user's choice will become the default instead.
- API Settings: Choose which API sources to use for global, regional, and nowcasting weather
- For sources requiring an API key, selecting such a source will reveal the box for inputting your key
When a new version is available, and it has not already automatically updated, you will see an update notification. Click "Update Now" to get the latest features and improvements.
- Frontend: HTML5, CSS3, & Plain JavaScript (ES6+), with Bootstrap for styling and font-icons
- Weather Data: Open_Meteo (CC BY 4.0), Pirate Weather API, The National Weather Service (US), Rain Viewer
- Geocoding: OpenStreetMap Nominatim API, Leaflet
- Timezone Lookup: TZ-Lookup
- Astronomical Data: SunCalc3
- Weather Icons: Dynamically generated icons, Meteocons
- Animation: CSS Animations, SVG Graphics
Variable Weather uses free weather data providers when possible, however, options with API keys also exist:
- Non-US Locations: Pirate Weather API (requires free API key)
To add your Pirate Weather API key:
- Get a free key from Pirate Weather
- Click the settings gear icon in the app
- Enter your API key and save
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the repository
- Create your feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add some amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is licensed under the BSD 3-Clause License - see the LICENSE file for details.
- Inspired by Breezy Weather
- Weather data provided by Open-Meteo, Pirate Weather, and the National Weather Service
- Radar data provided by Rain Viewer
- Mapping data provided by OpenStreetMap contributors via Leaflet
- Timezone lookup functionality provided by PhotoStructure's tz-lookup
- Astronomical data functionality provided by SunCalc3
- Dynamic icons and animations created with CSS and SVG
- Meteocons created and provided by Bas Milius
- Special thanks to Anthropic's Claude 3.7 Sonnet for helping in the building and creation of this app