A responsive, mobile-friendly weather web app featuring real-time forecasts, city temperature comparisons, and an interactive mini-game called StormDodger. With a clean UI, dynamic weather-based backgrounds, and full bilingual support (Finnish & English), the app provides a sleek and practical user experience.

Built using HTML, CSS, and JavaScript.

▶️ View it live

• Introduction
• Live Demo
• Directory Structure
• Features
• Technology Stack
• Installation & Setup
• API Key Handling
• License

weather-app/
├── index.html           # Landing page
├── calculator.html      # City comparison page
├── weather.html         # Weather details page
├── game.html            # StormDodger mini-game
├── about.html           # About & info page
├── css/
│   └── style.css        # Main stylesheet
├── img/
│   ├── clear.jpg        # Background for clear weather
│   ├── cloudy.jpg       # Background for cloudy weather
│   ├── default.jpg      # Default background image
│   ├── player.png       # Game player sprite
│   ├── rain.jpg         # Background for rain
│   └── snow.jpg         # Background for snow
├── js/
│   ├── calculator.js    # Comparison logic
│   ├── game.js          # StormDodger game logic
│   └── script.js        # Core app logic and translation
├── .gitignore
├── LICENSE
└── README.md

• Real-Time Weather — Search weather by city or geolocation
• Weather Details — Shows temperature, description, humidity, wind, dressing tips, and weather-based background
• City Comparison — Compare temperatures between two cities
• StormDodger Mini-Game — Dodge falling raindrops in a weather-themed arcade experience
• Language Toggle — Switch between Finnish and English
• Storage Support — Uses sessionStorage for API key and localStorage for city/background memory
• Responsive Design — Optimized for both desktop and mobile

• Frontend: HTML5, CSS3, JavaScript
• API: OpenWeatherMap
• Storage: sessionStorage & localStorage

1. Clone the Repository

git clone https://github.com/andytrix/weather-app.git
cd weather-app

2. Open Locally

Open index.html in your browser.

3. Add Your API Key

The app will prompt for your OpenWeatherMap API key. Get one here.

• Your key is not saved permanently
• Stored temporarily using sessionStorage
• Keeps your API key private and safe from exposure

This project is licensed under the terms described in the LICENSE file.