A modern, responsive weather application with real-time data, dark/light theme, and beautiful animations
cloudCtrl is a modern, feature-rich weather application that provides real-time weather information with a stunning user interface. Built with vanilla JavaScript, it delivers accurate weather data, 24-hour forecasts, 7-day predictions, and air quality information with smooth animations and a responsive design.
| Feature | Description |
|---|---|
| 🌤️ Current Weather | Real-time temperature, conditions, feels-like temperature |
| 📊 Weather Details | Visibility, humidity, wind speed, pressure, UV index, precipitation |
| ⏰ 24-Hour Forecast | Hourly weather predictions with icons and conditions |
| 📅 7-Day Forecast | Daily forecasts with high/low temperatures |
| 🌍 Air Quality | Real-time AQI with PM2.5, PM10, O₃, NO₂ data |
| 📍 Location Search | Search any city worldwide with autocomplete suggestions |
| 📱 Current Location | GPS-based weather for your exact location |
| 🌗 Dark/Light Theme | Beautiful dark and light modes with smooth transitions |
| 🎨 Weather Animations | Dynamic backgrounds for sunny, rainy, snowy, stormy weather |
| 🔄 Auto-Refresh | One-click refresh for latest data |
| 📱 Responsive Design | Optimized for all devices (mobile, tablet, desktop) |
View Live Demo (Replace with your actual URL)
- HTML5: Semantic markup structure
- CSS3: Custom styling with CSS variables for theming
- JavaScript (ES6+): Application logic, API integration, DOM manipulation
- Font Awesome 6: Professional iconography
- Google Fonts (Inter): Modern typography
- WeatherAPI.com: Real-time weather, forecasts, and air quality data
- localStorage: Theme preference persistence
- Geolocation API: User location detection
- Service Worker: Offline functionality support (optional)
cloudCtrl/
├── index.html # Main HTML structure
├── styles.css # Complete styling & theming
├── script.js # Application logic & API integration
├── LICENSE # MIT License
└── README.md # Project documentation
- Any modern web browser (Chrome, Firefox, Edge, Safari)
- WeatherAPI.com API Key (Get one here)
- Clone the repository
git clone https://github.com/yourusername/cloudCtrl.git
cd cloudCtrl- Get your API Key
- Sign up at WeatherAPI.com
- Get your free API key
- Configure the API Key
- Open
script.js - Replace
'5d8227f1161e43a189d33628240210'with your actual API key:
this.apiKey = 'YOUR_API_KEY_HERE'; // Replace with your WeatherAPI.com API key
- Open the application
# Simply open index.html in your browser
open index.html
# Or double-click the file in your file explorer
- Start exploring the weather!
WeatherAPI.com Endpoints Used
| Endpoint | Purpose |
|---|---|
/current.json |
Current weather data with AQI |
/forecast.json |
7-day forecast with hourly data |
/search.json |
Location autocomplete suggestions |
The app handles:
- ✅ Current weather conditions
- ✅ Temperature (in Celsius)
- ✅ Feels-like temperature
- ✅ Weather condition icons
- ✅ Visibility, humidity, wind speed
- ✅ Pressure, UV index, precipitation
- ✅ Air quality index (US EPA)
- ✅ 24-hour detailed forecast
- ✅ 7-day forecast with high/low temps
- Dark Mode: Elegant dark theme with reduced eye strain
- Light Mode: Clean, bright interface
- Persistent: Theme preference saved in localStorage
- Smooth Transitions: Seamless theme switching with animations
- Sunny: Warm glow effect
- Rainy: Animated rain drops
- Snowy: Snowfall effect
- Stormy: Lightning animations
- Cloudy: Floating cloud effects
- Search Autocomplete: Smart location suggestions
- Location Button: One-click GPS positioning
- Refresh Button: Instant data refresh
- Hover Effects: Interactive card animations
- Smooth Scroll: Navigation transitions
| Device | Optimization |
|---|---|
| Desktop | Full layout with detailed cards and grid views |
| Tablet | Adjusted grid layouts and spacing |
| Mobile | Single-column layout with touch-friendly targets |
| Small Mobile | Compact cards and simplified display |
- Type a city name in the search box
- View autocomplete suggestions
- Select a location
- Weather data updates instantly
- Click the location button (📍)
- Browser requests location permission
- Weather loads for your exact coordinates
- Fallback to Bangalore if permission denied
- Click the moon/sun icon
- Theme switches with animation
- Preference saved automatically
- System-wide consistent theming
- Click the refresh button (🔄)
- Fetches latest weather data
- Animated spin effect during loading
- All sections update simultaneously
The app includes comprehensive weather condition mapping:
| Condition | Icon |
|---|---|
| ☀️ Sunny/Clear | fa-sun / fa-moon |
| ⛅ Partly Cloudy | fa-cloud-sun / fa-cloud-moon |
| ☁️ Cloudy | fa-cloud |
| 🌧️ Rainy | fa-cloud-rain |
| ⛈️ Thunderstorm | fa-bolt |
| 🌨️ Snowy | fa-snowflake |
| 🌫️ Foggy | fa-smog |
| 💨 Windy | fa-wind |
// In script.js
this.apiKey = 'YOUR_API_KEY_HERE';
/* In styles.css - Light Theme */
:root {
--primary-color: #667eea; /* Change to your brand color */
--secondary-color: #764ba2; /* Change to your accent color */
--background-primary: #ffffff; /* Change background color */
}
/* In styles.css - Dark Theme */
[data-theme="dark"] {
--background-primary: #0f172a; /* Change dark background */
}
// In script.js - Add new weather condition
if ([NEW_CODE].includes(conditionCode)) {
body.classList.add('weather-new');
this.createNewEffect();
}
// In script.js - Change forecast days (max 7)
const response = await fetch(
`${this.baseUrl}/forecast.json?key=${this.apiKey}&q=${encodeURIComponent(location)}&days=7&aqi=yes&alerts=yes`
);
// Change 'days=7' to any number between 1-7
# Install Vercel CLI
npm i -g vercel
# Deploy
vercel
- Drag and drop the project folder to Netlify
- Or connect your GitHub repository
- Build command: (none needed - static site)
- Publish directory:
.
- Push to GitHub
- Enable GitHub Pages in repository settings
- Select branch and folder
- Access via
https://yourusername.github.io/cloudCtrl
- ✅ Lazy loading of weather effects
- ✅ Debounced search input
- ✅ Cached API responses
- ✅ Optimized animations with
will-change - ✅ Efficient DOM updates
- ✅ Service worker for offline support (optional)
- API Key: Keep your API key secure
- CORS: WeatherAPI.com supports CORS
- HTTPS: Always use HTTPS in production
- Input Validation: Sanitize search input
Contributions are welcome! Here's how you can help:
- Fork the repository
- Create a feature branch (
git checkout -b feature/improvement) - Make your changes
- Commit your changes (
git commit -m 'Add improvement') - Push to the branch (
git push origin feature/improvement) - Open a Pull Request
- Follow existing code style
- Use meaningful variable names
- Comment complex logic
- Test across multiple browsers
- Update documentation as needed
This project is licensed under the MIT License - see the LICENSE file for details.
- WeatherAPI.com: Free and reliable weather data
- Font Awesome: Beautiful icons
- Google Fonts: Typography
- Contributors: All who helped improve this project
For issues, feature requests, or questions:
- GitHub Issues: Submit an issue
- Email: support@cloudctrl.com
- Map integration for weather visualization
- Weather alerts and warnings
- Multiple location saving
- Temperature unit toggle (°C/°F)
- Weather widgets for other sites
- Push notifications for weather changes
- Weather history and trends
- Social sharing features
**cloudCtrl - Your Weather, Under Control** ☁️✨