Weather Dashboard with 3-Day Forecast & Dark Mode

Description:

This comprehensive weather dashboard provides real-time weather information with detailed forecasts and intuitive user interactions. Built with vanilla JavaScript and WeatherAPI integration, it demonstrates external API consumption, dynamic data visualization, and responsive design principles.

Unlike basic weather widgets, this implementation features 3-day forecasting, localized time display, and seamless dark mode functionality to create a professional weather monitoring experience that adapts to user preferences.

The application showcases asynchronous API handling, error management, and real-time data updates - essential skills for building data-driven web applications that rely on external services.

The Challenge:

Most weather applications either lack detailed forecasting or have cluttered interfaces. I wanted to create a clean, informative weather dashboard that provides comprehensive data while maintaining excellent usability across all devices.

Development Story:

This project combined my interest in meteorology with the technical challenge of building a real-time data application. The most complex aspect was implementing the timezone-aware date formatting and multi-endpoint API integration for both current conditions and forecasts.

Key Challenge: Handling API rate limits and error states gracefully while providing users with clear feedback and maintaining application stability.

Technologies Used:

• WeatherAPI - Comprehensive weather data provider with global coverage
• Fetch API - Modern asynchronous data fetching with error handling
• CSS3/SCSS - Responsive grid system and dark mode theming
• JavaScript ES6+ - Async/await, DOM manipulation, and event handling
• Intl.DateTimeFormat - Localized time and date formatting

Technical Architecture:

• API-First Design - Centralized data fetching with multiple endpoint integration
• Modular Component Structure - Separate current weather and forecast components
• Responsive Grid Layout - Adaptive card-based design for all screen sizes
• Error Boundary Pattern - Comprehensive error handling and user feedback

Technical Implementation:

• API Integration: Dual endpoints for current weather and 5-day forecasts
• Timezone Handling: Localized time display based on city timezone
• Error Management: Graceful error handling with user-friendly messages
• Dynamic Rendering: Real-time DOM updates based on API responses

Core Functionality:

• Real-time city search with instant weather updates
• Current weather conditions with temperature, humidity, and wind speed
• 3-day weather forecast with daily averages and conditions
• Localized time display based on searched city's timezone

User Experience:

• Dark mode interface with smooth theme transitions
• Responsive design optimized for mobile and desktop
• Clear visual hierarchy with intuitive data presentation
• Instant search feedback with error state handling

Technical Features:

• WeatherAPI integration with multiple data endpoints
• Automatic timezone detection and formatting
• Comprehensive error handling for network and API issues
• Efficient DOM updates with minimal re-rendering

How to Use:

• Enter a city name in the search bar and press Enter or click search
• View current weather conditions including temperature, humidity, and wind
• Scroll through the 3-day forecast for upcoming weather patterns
• Toggle dark mode for comfortable viewing in different lighting conditions

Code Highlight:

function updateCurrentWeather(data) {
   const { location, current } = data;
   cityName.textContent = location?.name || 'N/A';
   temperature.textContent = current?.temp_c ? `${current.temp_c}°C` : 'N/A';
   description.textContent = current?. condition?.text || 'N/A';
   humidity.textContent = current?.humidity ? `${current.humidity}%` : 'N/A';
   windSpeed.textContent = current?.wind_kph ? `${current.wind_kph} km/h` : 'N/A';
   // weatherIcon.src = current?.condition?.icon ? `https:${current.condition.icon}` : '';
}

Key Learnings:

• Mastered external API integration with comprehensive error handling
• Improved understanding of timezone management and internationalization
• Learned to create responsive data visualizations for complex information
• Gained experience with async/await patterns for multiple API calls

Future Enhancements:

• Geolocation-based automatic city detection
• Extended 7-day forecasting with hourly breakdowns
• Weather maps and radar integration
• User preferences and favorite cities storage

Github:

Live demo:

Recommended Tools:

This project is hosted on Hostinger - get 20% off your first plan with my referral code.

Features:

• Responsive design
• Minimal design
• 🔍 City search functionality
• 💧 Humidity information
• 💨 Wind speed data
• 📅 3-day weather forecast
• 🌙 Dark mode interface
• 📱 Fully responsive design
• ⏰ Local time display
• 🎨 Modern and clean UI
• ⚡ Fast and efficient performance

Tags:

• #javascript
• #web-development
• #api-integration
• #data-visualization
• #responsive-design
• #weather
• #real-time