🌤️ A modern web application that displays current weather information based on your location

Live Demo: binghuan.github.io/weather/

• 📍 Location-based Weather: Automatically detects your current location using geolocation API
• 🌡️ Real-time Temperature: Shows current temperature in both Celsius and Fahrenheit
• 🖼️ Weather Icons: Visual weather conditions with dynamic icons
• 📱 Responsive Design: Works seamlessly on desktop and mobile devices
• 🔄 Auto-refresh: Automatically updates weather data every hour
• ⚡ Modern UI: Built with Material Design components using Polymer.js

• Frontend Framework: Polymer.js v0.3.4
• UI Components:
  • Core Elements (Polymer core components)
  • Paper Elements (Material Design components)
• Weather API: World Weather Online API
• Geolocation: HTML5 Geolocation API
• Package Manager: Bower
• Styling: Material Design principles

weather/
├── index.html              # Main application page
├── main.js                 # Core JavaScript functionality
├── post-card.html          # Custom Polymer element for weather card
├── bower.json              # Dependencies configuration
├── components/             # Bower components (Polymer, jQuery, etc.)
├── icon/                   # Application icons in various sizes
├── stylesheets/            # CSS styling files
└── javascripts/            # Additional JavaScript files

1. Clone the repository

   git clone https://github.com/binghuan/weather.git
   cd weather

2. Install dependencies

   bower install

3. Serve the application Since this uses Polymer.js, you'll need to serve it from a web server:

   # Using Python 3
   python -m http.server 8000
   
   # Using Python 2
   python -m SimpleHTTPServer 8000
   
   # Using Node.js http-server
   npx http-server

4. Open in browser Navigate to http://localhost:8000

1. Location Detection: The app requests permission to access your location using the browser's geolocation API
2. Weather Fetching: Once location is obtained, it makes an API call to World Weather Online with your coordinates
3. Data Display: Weather information is displayed in a clean, card-based interface showing:
   • Current temperature (°C/°F)
   • Weather description
   • Weather icon
   • Last update timestamp
4. Auto-refresh: The app automatically updates weather data every hour

The application uses the World Weather Online API. You may need to update the API key in main.js:

var requesturl = location.protocol + "//api.worldweatheronline.com/premium/v1/weather.ashx?q=" + lat + "," + lng +
    "&format=json&num_of_days=1&key=YOUR_API_KEY_HERE";

• Modern browsers with ES5 support
• HTML5 Geolocation API support required
• Mobile browsers (iOS Safari, Chrome Mobile)