A modern, mobile-first weather application providing real-time weather information and forecasts.
MobileWeatherReportApp is a single-page application (SPA) that displays comprehensive weather information including:
- Current weather conditions for your location
- Hourly forecast for the next 24 hours
- Daily forecast for the next 7 days
- Automatic geolocation with fallback to default location
- Night mode weather icons (moon displayed between 10 PM - 6 AM)
Fully functional demo => (https://gzifoto-spec.github.io/MobileWeatherReportApp/)
|
|
Desktop view
|
|---|
- HTML5 - Semantic markup structure
- CSS3 - Custom styling with modern features
- Bootstrap 5 - Responsive grid system
- JavaScript (ES6+) - Modern vanilla JavaScript
- Open-Meteo API - Free weather data API
- No API key required
- Real-time weather data
- Hourly and daily forecasts
- CORS enabled for browser requests
- Git & GitHub - Version control
- VS Code - Code editor
- Live Server - Development server
Color Palette:
- Primary Dark:
#1B3C53 - Primary Medium:
#234C6A - Primary Light:
#456882 - Neutral Light:
#E3E3E3
Design Philosophy:
- Mobile-first responsive design
- Clean and modern interface
- Intuitive user experience
- Accessibility-focused
- Modern web browser (Chrome, Firefox, Safari, Edge)
- Internet connection
- Code editor (VS Code recommended)
- Clone the repository:
git clone https://github.com/your-username/MobileWeatherReportApp.git- Navigate to the project directory:
cd MobileWeatherReportApp- Open with VS Code:
code .-
Install Live Server extension (if not already installed):
- Open VS Code Extensions (Ctrl+Shift+X)
- Search for "Live Server"
- Install the extension by Ritwick Dey
-
Launch the application:
- Right-click on
index.html - Select "Open with Live Server"
- The app will open in your default browser at
http://127.0.0.1:5500
- Right-click on
Simply open index.html in your web browser. Note: Geolocation may not work with the file:// protocol.
✅ Real-time temperature display
✅ Weather condition description with emoji icons
✅ Humidity percentage
✅ Wind speed in km/h
✅ Automatic location detection
✅ Next 24 hours forecast
✅ Temperature per hour
✅ Weather conditions with icons
✅ Horizontal scrollable layout
✅ 7-day weather forecast
✅ Maximum and minimum temperatures
✅ Weather condition icons
✅ Date display in local format
✅ Night mode icons (moon icon for clear skies at night)
✅ Fallback location (A Coruña, Spain) if geolocation fails
✅ Responsive design for all screen sizes
✅ Loading states and error handling
MobileWeatherReportApp/
├── src/
│ ├── css/
│ │ ├── styles.css # Main stylesheet
│ │ └── responsive.css # Responsive design rules
│ ├── js/
│ │ ├── main.js # Application entry point
│ │ ├── api.js # API communication layer
│ │ ├── ui.js # UI rendering functions
│ │ └── utils.js # Utility functions
│ └── assets/
│ ├── images/ # Image resources
│ └── icons/ # Icon resources
├── index.html # Main HTML file
├── README.md # Documentation (this file)
└── .gitignore # Git ignore rules
index.html
- Semantic HTML5 structure
- Header, main content, and footer sections
- Script loading order (utils → api → ui → main)
main.js
- Application initialization
- Event handlers
- Orchestrates data flow between modules
api.js
- Open-Meteo API integration
- HTTP requests using Fetch API
- Error handling for network requests
ui.js
- DOM manipulation
- Weather data rendering
- Dynamic content creation
utils.js
- Geolocation wrapper
- Date and time formatting
- Weather code to description mapping
- Weather icon logic (including night mode)
- When you open the app, it will request permission to access your location
- Allow location access for accurate weather data
- If denied, the app defaults to A Coruña, Spain
- Click the "Cambiar ubicación" button in the header
- The app will request your location again and update all data
- Horizontal scroll on mobile devices to view all hourly forecasts
- Hover effects on desktop for better interactivity
- ✅ Chrome 90+
- ✅ Firefox 88+
- ✅ Safari 14+
- ✅ Edge 90+
Problem: Geolocation fails with error code 2
Solutions:
- Check if location services are enabled in your OS
- Verify browser has location permission
- Ensure WiFi is enabled (browsers use WiFi for location)
- Disable VPN if active
Fallback: The app automatically uses A Coruña coordinates if geolocation fails
Problem: Weather data doesn't appear
Solutions:
- Check internet connection
- Open browser console (F12) to see error messages
- Verify Open-Meteo API is accessible
- Hard refresh the page (Ctrl+Shift+R)
Problem: CSS not loading properly
Solutions:
- Clear browser cache
- Check file paths in
index.html - Ensure
src/css/folder exists with both CSS files
Potential features for future versions:
- Save favorite locations
- Dark/Light theme toggle
- Temperature graphs and charts
- Weather alerts and notifications
- Multiple language support
- Weather radar integration
- Offline functionality with Service Workers
Current Weather:
GET https://api.open-meteo.com/v1/forecast
Parameters:
- latitude: float
- longitude: float
- current: temperature_2m,relative_humidity_2m,weather_code,wind_speed_10m
- timezone: auto
Hourly Forecast:
GET https://api.open-meteo.com/v1/forecast
Parameters:
- latitude: float
- longitude: float
- hourly: temperature_2m,weather_code,relative_humidity_2m
- timezone: auto
- forecast_days: 2
Daily Forecast:
GET https://api.open-meteo.com/v1/forecast
Parameters:
- latitude: float
- longitude: float
- daily: temperature_2m_max,temperature_2m_min,weather_code
- timezone: auto
- forecast_days: 7
| Code | Description |
|---|---|
| 0 | Clear sky |
| 1 | Mainly clear |
| 2 | Partly cloudy |
| 3 | Overcast |
| 45, 48 | Fog |
| 51-55 | Drizzle |
| 61-65 | Rain |
| 71-77 | Snow |
| 80-82 | Rain showers |
| 85-86 | Snow showers |
| 95-99 | Thunderstorm |
This project follows a feature branch workflow:
main (production)
└── dev (development)
├── feature/html-structure
├── feature/css-styling
├── feature/javascript-utils
├── feature/api-integration
├── feature/ui-components
├── feature/main-app-logic
└── feature/city-search
feat:New featurefix:Bug fixstyle:Code style changes (formatting)test:Adding tests
- JavaScript: ES6+ features, async/await for asynchronous code
- CSS: BEM-inspired naming, mobile-first approach
- HTML: Semantic elements, accessibility attributes
This project is open source and available for educational purposes.
- Coding asistance by Claude
- Weather data provided by Open-Meteo
- Color palette from Color Hunt
- Icons: Native emoji support
- Bootstrap 5 for responsive grid system
For questions, suggestions, or issues, please open an issue on GitHub.
Made with ☀️ by Xavier (Ghato)
Academic Project - 2026