CodingNic

Weather API & Current Conditions

Get and Configure Your OpenWeather API Key

Weather API & Current Conditions 25 min read

Get and Configure Your OpenWeather API Key

Get and Configure Your OpenWeather API Key

What you’ll build

The weather application needs an OpenWeather API key before it can request live weather data. In this lesson you’ll create an OpenWeather account, find your API key, add it to your local project, and make sure you do not accidentally publish the key in your Git repository.

1. Create an OpenWeather account

Open the official OpenWeather registration page:

https://home.openweathermap.org/users/sign_up

Create an account using your email address and complete the registration process. OpenWeather says that you need to verify your email address before using the API.

2. Find your API key

After your account is created and your email is verified:

  1. Sign in to OpenWeather.
  2. Open your account area.
  3. Go to the API keys tab.
  4. Copy the API key shown there.

OpenWeather’s official API setup documentation is also available here:

https://openweathermap.org/appid

The API key is sent as the appid parameter when the application makes an API request.

Important: OpenWeather notes that a newly created key may take up to about two hours to become active. If you receive an authentication error immediately after creating the key, give it some time before troubleshooting your code.

3. Add the key to the starter

Open the starter project’s script.js. At the top of the file, locate:

javascript
const API_KEY = "";

Paste your personal key between the quotation marks:

javascript
const API_KEY = "YOUR_API_KEY";

Replace YOUR_API_KEY with the actual value from your OpenWeather account.

Do not add extra spaces or quotes inside the key.

4. Do not commit your personal key

Your API key is a credential. Do not commit your real key to the course repository or push it to a public GitHub repository. The starter’s .gitignore and the course workflow are intended to keep local configuration out of source control.

For this learning project, the key is used by browser-side JavaScript, which means it can be visible to someone inspecting the application’s network requests. This is acceptable for learning the API integration, but a production application should use an appropriate server-side/proxy architecture and follow the API provider’s security guidance.

5. Verify the local configuration

Save script.js and reload the WeatherNow page. At this point the application does not need to make a successful weather request yet—the request code is added in the next lesson.

Instead, check that:

  • script.js still parses without a syntax error.
  • The WeatherNow interface loads normally.
  • Your API key is present only in your local working copy.

What you should expect

You should finish this lesson with a verified OpenWeather account, a personal API key, and that key configured locally in script.js. The next lesson will use it to make the first live weather request.

Checkpoint

Do not continue until you can answer yes to all three:

  • I have created and verified my OpenWeather account.
  • I can find my API key in the API keys area.
  • I have added the key locally without committing it to Git.