Skip to main content

​
Prerequisites

  • A free OpenWeatherMap account and API key
  • A modern browser (Chrome, Firefox, Safari, Edge)

​
Get the app running

1

Clone or download the repository

Clone the repo with Git:
git clone https://github.com/yash2000-star/weather-app.git
cd weather-app
Or download the ZIP from GitHub and extract it. The project contains three files: index.html, script.js, and style.css.
2

Get an OpenWeatherMap API key

  1. Sign up at openweathermap.org.
  2. Go to API keys in your account dashboard.
  3. Copy your default key or generate a new one.
New keys on the free tier can take up to 2 hours to activate.
3

Update script.js with your API key

Open script.js. The API URL is defined at the top of the file:
const link = "https://api.openweathermap.org/data/2.5/weather?q=jaipur&appid=a41b6d64a06f2c61e7c1975a953f6cc8";
Replace q=jaipur with your target city and swap in your own API key:
const link = "https://api.openweathermap.org/data/2.5/weather?q={city}&appid={apiKey}";
For example, to show weather for London:
const link = "https://api.openweathermap.org/data/2.5/weather?q=london&appid=YOUR_API_KEY_HERE";
The app defaults to Jaipur (q=jaipur) with a placeholder key. You must replace the API key before the app will work reliably — the hardcoded key in the source is not guaranteed to be valid.
4

Open the app in your browser

Open index.html directly in your browser:
open index.html       # macOS
start index.html      # Windows
xdg-open index.html   # Linux
The weather card loads immediately and fetches live data for the configured city.
Some browsers restrict fetch() requests from file:// URLs due to CORS policies. If you see a network error in the console, serve the files over HTTP instead:
npx serve .
Then open http://localhost:3000 in your browser.

​
What you should see

Once the app loads, the weather card displays:
  • Location — the city name returned by the API
  • Description — e.g., “light rain” or “clear sky”
  • Temperature — in Celsius (converted from Kelvin by the app)
  • Humidity — relative humidity percentage
  • Wind speed — in meters per second
Click the refresh button at the bottom of the card to re-fetch the latest conditions.

Build docs developers (and LLMs) love

Get started for freeTalk to us