Weather App Using JavaScript

A simple, responsive weather application built with vanilla JavaScript that fetches real-time weather data from the OpenWeatherMap API.

Features

• 🌤️ Real-time weather information for any city worldwide
• 🌡️ Temperature display in Celsius
• 💧 Humidity and wind speed details
• 🎨 Dynamic weather icons based on current conditions
• 📱 Responsive design for mobile and desktop
• ⚠️ Error handling for invalid city names
• 🔍 Clean and intuitive search interface

Technologies Used

• HTML5 - Structure and layout
• CSS3 - Styling and responsive design
• Vanilla JavaScript - Functionality and API integration
• OpenWeatherMap API - Weather data source

Prerequisites

• A modern web browser
• OpenWeatherMap API key (free tier available)
• Internet connection

Setup Instructions

1. Clone or download this repository to your local machine

2. Get an API key from OpenWeatherMap:

   • Sign up for a free account
   • Navigate to the API keys section
   • Generate a new API key

3. Configure the API key:

   • Open config.js
   • Replace the placeholder API key with your actual key

   WEATHER_API_KEY: "your_actual_api_key_here";

4. Run the application:

   • Open index.html in your web browser
   • Or use a local server (recommended for development)

Usage

1. Enter a city name in the search box
2. Click the search button or press Enter
3. View the current weather information including:
   • Temperature
   • Weather condition with icon
   • Humidity percentage
   • Wind speed

File Structure

Weather App Using JavaScript/
├── images/              # Weather condition icons
│   ├── clear.png
│   ├── clouds.png
│   ├── drizzle.png
│   ├── humidity.png
│   ├── mist.png
│   ├── rain.png
│   ├── search.png
│   ├── snow.png
│   └── wind.png
├── index.html          # Main HTML file
├── style.css           # Stylesheet
├── config.js           # Configuration file (API key & URL)
└── README.md           # Project documentation

Weather Conditions Supported

The app displays appropriate icons for the following weather conditions:

• ☀️ Clear skies
• ☁️ Cloudy
• 🌧️ Rain
• 🌦️ Drizzle
• 🌫️ Mist
• ❄️ Snow
• ⛈️ Thunderstorm

API Information

This app uses the OpenWeatherMap Current Weather Data API:

• Base URL: https://api.openweathermap.org/data/2.5/weather
• Units: Metric (Celsius, km/h)
• Rate Limit: 1000 calls/day (free tier)

Security Considerations

⚠️ Important: The current implementation exposes the API key in the client-side code. For production applications, consider:

1. Backend Proxy: Create a server-side endpoint that makes API calls
2. Environment Variables: Use build tools like Vite or Webpack with environment variables
3. API Key Restrictions: Configure domain restrictions in your OpenWeatherMap dashboard
4. Rate Limiting: Implement client-side rate limiting to prevent API abuse

Browser Compatibility

• Chrome 60+
• Firefox 55+
• Safari 12+
• Edge 79+

Troubleshooting

Common Issues:

1. "Please enter a valid city name" error:

   • Check spelling of the city name
   • Try using the full city name
   • Ensure internet connection is active

2. No weather data displayed:

   • Verify your API key is correct in config.js
   • Check if your API key is activated (may take a few minutes)
   • Open browser console for error messages

3. CORS errors:

   • Serve the app through a local server instead of opening the HTML file directly
   • Use tools like Live Server (VS Code extension) or Python's http.server

Future Enhancements

• 5-day weather forecast
• Geolocation-based weather detection
• Temperature unit toggle (Celsius/Fahrenheit)
• Search history
• Weather alerts and notifications
• Dark/light theme toggle
• Animated weather backgrounds

Contributing

Feel free to submit issues, fork the repository, and create pull requests for any improvements.

License

This project is open source and available under the MIT License.

---

Note: This is a learning project demonstrating JavaScript API integration and DOM manipulation. Always follow security best practices when deploying to production.