Weatherio Interface
- Current Weather: View detailed weather info for your current location
- 5-Day Forecast: Detailed forecast for the next 5 days
- Location Search: Search weather by city name
- Auto Location Detection: Automatically fetch weather info using GPS
- Detailed Info:
- Air quality index
- Sunrise and sunset time
- Humidity, pressure, visibility
- Feels-like temperature
- Hourly forecast with wind speed and direction
- Frontend: HTML5, CSS3, JavaScript
- API: OpenWeatherMap API
- Hosting: GitHub Pages
- Design: Responsive Web Design, Mobile-first approach
- Dark theme with a modern and elegant look
- Responsive design - compatible with all devices
- Card-based layout for organized data presentation
- Realtime data display with detailed metrics
- Weather icons and intuitive visuals
- Color-coded air quality indicators
- Enter the city name into the search box
- Select a city from the suggestion list
- View detailed weather info
- Click the "Current Location" button
- Allow location access when prompted by your browser
- View weather info for your current location
- See 5-day forecasts with temperature and weather details
- Check hourly forecast for the current day
- View wind speed by the hour
weatherio/
│
├── assets/ # Assets folder
│ ├── css/ # Stylesheets
│ ├── font/ # Web fonts
│ ├── images/ # Images, icons
│ └── js/ # JavaScript modules
│ ├── api.js # API handling
│ ├── app.js # Main application logic
│ ├── module.js # Utility modules
│ └── route.js # Routing logic
├── favicon_weatherio.svg # Website favicon
├── index.html # Main page
└── README.md # Documentation
- Desktop: 2-column layout with sidebar
- Tablet: Adaptive layout
- Mobile: Optimized single-column layout
- Lazy loading for images
- Debounced search to reduce API calls
- Weather data caching
- Optimized JavaScript and CSS
- Loading states for all API calls
- Friendly error handling
- Smooth transitions and animations
- Accessible design (keyboard navigation, screen reader support)
QuangThoIT: https://github.com/quangthoIT/
This project was built based on the tutorial by codewithsadee on YouTube. Big thanks for the valuable content!
⭐ If you find this project useful, please consider giving it a star on GitHub!