JavaScript Weather API Exercise: Build a Forecast App with Fetch

This beginner JavaScript tutorial shows how to build a small weather forecast app with WeatherAPI.com, fetch(), form values, JSON data, and DOM rendering.

This is a learning exercise, so the first version uses a direct request from frontend JavaScript.

You will practice:

1. creating a simple weather search form
2. making a direct fetch() request to WeatherAPI.com
3. rendering weather data on the page
4. handling loading and error states
5. adding attribution for WeatherAPI.com

Main idea

User enters city
-> JavaScript sends request to WeatherAPI.com
-> WeatherAPI.com returns JSON
-> JavaScript shows weather on the page

1. Can WeatherAPI.com be used for an exercise?

Yes, WeatherAPI.com can be used for a learning or portfolio exercise if you follow their rules.

At the time these notes were checked, the Free plan included:

• $0 per month
• 100K API calls per month
• realtime weather
• 3-day forecast/future weather
• commercial and non-commercial use

WeatherAPI terms also say that Free API users must credit WeatherAPI.com as the source of the data.

Simple answer

Legal for a practice project: yes, if you follow the terms
Free: yes, if you stay inside the Free plan limits
Required: credit WeatherAPI.com as the data source

2. Direct frontend request

For this exercise, put the API key directly in your JavaScript code.

This is the simplest way to understand how API requests work.

It helps you check that:

• your API key works
• the API URL is correct
• the city parameter is correct
• you understand the response data

Example direct request:

fetch("https://api.weatherapi.com/v1/current.json?key=YOUR_KEY&q=Berlin")

For a learning project, this is okay.

In a bigger future project, you can improve this by moving the API key to a backend.

3. Exercise 1: Build the HTML

Create a simple weather search form.

<form class="weather-form">
  <label>
    City
    <input class="weather-input" type="text" name="city" placeholder="Berlin" required>
  </label>
  <button type="submit">Search</button>
</form>

<p class="weather-status"></p>
<div class="weather-result"></div>

<p>
  Weather data by
  <a href="https://www.weatherapi.com/" target="_blank" rel="noopener noreferrer">
    WeatherAPI.com
  </a>
</p>

The attribution link is important for the Free plan.

4. Exercise 2: Get form values

Before making the weather request, first get the values from the form.

When the form is submitted, the browser gives the handler function an event object.

This object contains information about what happened: which event happened, which element started it, and which element is handling it.

form.addEventListener("submit", handlerSubmit);

function handlerSubmit(event) {
  event.preventDefault();

  console.log(event);

  const city = event.currentTarget.elements.city.value;
  const days = event.currentTarget.elements.days.value;

  console.log("City:", city);
  console.log("Days:", days);
}

If you open DevTools and look in the Console, you can inspect this event object.

In DevTools, open the logged event object and look for properties like target, currentTarget, and elements.

target is the element where the event started. For example, it can be the button or input that was used.

currentTarget is the element where the event listener is attached.

In this example, the listener is attached to the form:

form.addEventListener("submit", handlerSubmit);

So inside handlerSubmit, event.currentTarget is the form.

A form has an elements collection. It contains all form controls inside the form, such as inputs and selects.

The important detail is that the HTML name attribute becomes a key inside elements.

Because the input has name="city", the form creates an elements.city key:

<input name="city">

event.currentTarget.elements.city

Because the select has name="days", the form creates an elements.days key:

<select name="days">

event.currentTarget.elements.days

Then .value gives the value that the user typed or selected.

Here city and days already store the final values because .value is written at the end of each line.

const city = event.currentTarget.elements.city.value;
const days = event.currentTarget.elements.days.value;

For example, if the user types Berlin and selects 3 days, then:

city = "Berlin"
days = "3"

Because the variables already contain the values, log them directly:

console.log("City:", city);
console.log("Days:", days);

Another possible style is to first get the elements, and then read .value later.

const city = event.currentTarget.elements.city;
const days = event.currentTarget.elements.days;

console.log("City:", city.value);
console.log("Days:", days.value);

Both ways work. The important idea is:

element = input or select element
element.value = actual user value

After you understand these values, you can use cityValue and daysValue in the WeatherAPI request.

5. Exercise 3: Make the API request

Put your API key in a variable and use it inside the request URL.

const form = document.querySelector(".weather-form");
const input = document.querySelector(".weather-input");
const statusText = document.querySelector(".weather-status");
const result = document.querySelector(".weather-result");

const API_KEY = "YOUR_WEATHER_API_KEY";

form.addEventListener("submit", event => {
  event.preventDefault();

  const city = input.value.trim();

  if (!city) {
    statusText.textContent = "Please enter a city.";
    return;
  }

  statusText.textContent = "Loading weather...";
  result.textContent = "";

  const url = `https://api.weatherapi.com/v1/current.json?key=${API_KEY}&q=${encodeURIComponent(city)}`;

  fetch(url)
    .then(response => {
      if (!response.ok) {
        throw new Error("Weather request failed");
      }

      return response.json();
    })
    .then(weather => {
      statusText.textContent = "";
      renderWeather({
        city: weather.location.name,
        country: weather.location.country,
        tempC: weather.current.temp_c,
        condition: weather.current.condition.text,
      });
    })
    .catch(error => {
      statusText.textContent = "Could not load weather. Try again later.";
      console.log(error);
    });
});

After this works, open DevTools and look at the Network tab. You should see the request and the JSON response.

6. Exercise 4: Render safely

When showing API data, use textContent for values.

This avoids inserting unexpected HTML into the page.

Unexpected HTML means text that the browser reads as real HTML code instead of normal text.

For example, imagine an API or user input returns a city name like this:

<img src="x" onerror="alert('Bad code')">

If you insert that value with innerHTML, the browser may create a real <img> element and run the JavaScript inside the attribute.

This kind of attack is called XSS, which means Cross-Site Scripting.

XSS is dangerous because bad code can run inside the user's browser.

It can be used to:

• show fake content on the page
• steal data from the page
• send requests as the user
• break the layout or behavior of the website

Dangerous way

result.innerHTML = weather.city;

Here the browser treats the value as HTML.

Safer way

title.textContent = weather.city;

Here the browser treats the value as text only. Even if the value looks like HTML, it is displayed as text and not executed as code.

function renderWeather(weather) {
  // Render using innerHTML (example)
  result.innerHTML = `
    
${weather.city}, ${weather.country}
    
Temperature: ${weather.tempC} C
    
Condition: ${weather.condition}
  `;
}

The page still uses innerHTML only to clear the container. The user-visible API values are inserted with textContent.

7. Common mistakes

• Writing the API URL incorrectly.
• Forgetting key= or q= in the query string.
• Forgetting to use encodeURIComponent(city).
• Forgetting to credit WeatherAPI.com when using the Free plan.
• Not handling request errors.
• Not handling empty city input.
• Using innerHTML for city names or other API values.
• Not checking the current Free plan limits before publishing.

8. Future improvement

In this exercise, the API key is visible in frontend JavaScript.

That is acceptable for a simple learning project.

Later, when you want to make the project more professional, you can move the key to a backend.

Future structure

Frontend
-> asks your backend for weather

Backend
-> keeps API key private
-> asks WeatherAPI.com
-> sends weather data back to frontend

For now, focus on understanding the API request and rendering the response.

9. Final checklist

Create form
Read city from input
Build WeatherAPI URL
Add API key
Use encodeURIComponent(city)
Fetch weather data
Check response.ok
Convert response to JSON
Render weather with textContent
Show loading and error messages
Credit WeatherAPI.com
Watch the monthly request limit

10. Practice: Write the HTML, CSS, and JavaScript

Use this part to write the full weather app code yourself.

Start with the HTML structure, then add CSS styles, and finish with JavaScript logic.

HTML

<!-- Write your HTML code here -->

CSS

/* Write your CSS code here */

JavaScript

// Write your JavaScript code here

11. Quick summary

WeatherAPI.com is a good API for practicing backend interaction.

For this exercise, use a direct frontend request so the idea stays simple.

The most important flow is:

City input
-> fetch WeatherAPI URL
-> receive JSON
-> render result on the page

A backend version can be added later when the project becomes more advanced.