Skycast — Weather Dashboard

A responsive weather application built using vanilla HTML, CSS, and JavaScript, fetching real-time weather data from the OpenWeatherMap REST API.

Live Demo: [https://weathersproject.netlify.app/]

---

Features

• Real-Time Weather Search — Search any city worldwide and get live weather data
• Fetch API + Async/Await — Asynchronous API calls with clean error handling
• Dynamic UI — Background theme changes based on current weather condition (clear, rainy, cloudy, snowy, etc.)
• Detailed Weather Info — Temperature, "feels like", humidity, wind speed, pressure, and visibility
• Error Handling — Graceful messages for invalid city names or failed API requests
• Responsive Design — Works smoothly across mobile and desktop screens

Tech Stack

• HTML5
• CSS3 (Flexbox, Grid, CSS custom properties for dynamic theming)
• JavaScript (ES6+) — Fetch API, async/await, DOM Manipulation
• OpenWeatherMap API

How It Works

1. User enters a city name and submits the search form
2. fetchWeather() makes an asynchronous call to the OpenWeatherMap API using fetch() and async/await
3. The response is parsed as JSON and rendered dynamically into the weather card
4. Invalid searches or failed requests are caught and shown as user-friendly error messages
5. The page background updates dynamically based on the weather condition returned by the API

Setup — Adding Your API Key

This project requires a free OpenWeatherMap API key to fetch live data.

1. Sign up at openweathermap.org/api
2. Go to the API keys tab and copy your key
3. Open script.js and replace the placeholder:

   const API_KEY = "YOUR_OPENWEATHERMAP_API_KEY";

   with your actual key

Note: New API keys can take up to a couple of hours to activate.

Running Locally

git clone https://github.com/your-username/weather-dashboard.git
cd weather-dashboard

Add your API key in script.js, then open index.html in your browser.

Project Structure

weather-dashboard/
├── index.html
├── style.css
├── script.js
└── README.md

Author

Shivam Jha