---
title: "How to build a weather app with a public api"
description: "Discover how to build a weather app with a public api with this in-depth guide, providing actionable insights and practical tips to boost your knowledge and results."
date: 2025-04-11
tags:
  - "build"
  - "weather"
  - "with"
  - "public"
authors:
  - "Cojocaru David"
  - "ChatGPT"
slug: "how-to-build-a-weather-app-with-a-public-api"
updatedDate: 2025-05-02
---

# How to Build a Weather App Using a Public API: A Step-by-Step Guide  

Want to build a weather app quickly using a public API? This guide walks you through the process step by step—from fetching real-time weather data to displaying it in a clean, user-friendly interface. Whether you're a beginner or an experienced developer, you'll learn how to create a fully functional weather app with just HTML, CSS, JavaScript, and a free weather API.  

## Why Use a Public Weather API?  

Public weather APIs provide instant access to accurate, up-to-date weather data without the hassle of manual collection. Here’s why they’re ideal for your project:  

- **Real-time updates** – Get current temperature, humidity, wind speed, and more.  
- **Detailed forecasts** – Access hourly, daily, and weekly predictions.  
- **Geolocation support** – Automatically detect user location for personalized results.  
- **Easy integration** – Most APIs use RESTful endpoints, making setup straightforward.  

Popular free weather APIs include **OpenWeatherMap**, **WeatherAPI**, and **AccuWeather**.  

## What You Need Before Starting  

Before coding, ensure you have:  

1. **Basic HTML, CSS, and JavaScript knowledge** – Essential for structuring and scripting your app.  
2. **A code editor** – VS Code, Sublime Text, or Atom work well.  
3. **An API key** – Sign up for a free account with your chosen weather API provider.  
4. **A local development server (optional)** – Tools like Live Server (VS Code) streamline testing.  

## Step 1: Set Up Your Project Files  

Organize your project with these files:  

- `index.html` – Main HTML file.  
- `style.css` – Handles styling.  
- `script.js` – Manages API calls and logic.  

## Step 2: Fetch Weather Data from the API  

Use JavaScript’s `fetch()` to retrieve weather data. Here’s an example using OpenWeatherMap:  

```javascript
const apiKey = "YOUR_API_KEY";  
const city = "New York";  
const url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric`;  

fetch(url)  
  .then(response => response.json())  
  .then(data => displayWeather(data))  
  .catch(error => console.error("Error fetching data:", error));  
```  

**Pro Tip:** Always check the API documentation for required parameters and response formats.  

## Step 3: Display Weather Data on the Page  

Create a function to render weather data in your HTML:  

```javascript
function displayWeather(data) {  
  const weatherDiv = document.getElementById("weather");  
  weatherDiv.innerHTML = `  
    <h2>${data.name}, ${data.sys.country}</h2>  
    <p>Temperature: ${data.main.temp}°C</p>  
    <p>Humidity: ${data.main.humidity}%</p>  
    <p>Wind: ${data.wind.speed} m/s</p>  
  `;  
}  
```  

Ensure your HTML includes a `<div id="weather"></div>` placeholder.  

## Step 4: Add Geolocation for Auto-Detection  

Enhance user experience by detecting their location automatically:  

```javascript
if (navigator.geolocation) {  
  navigator.geolocation.getCurrentPosition(  
    position => {  
      const { latitude, longitude } = position.coords;  
      fetchWeatherByCoords(latitude, longitude);  
    },  
    error => console.error("Location access denied:", error)  
  );  
}  
```  

## Step 5: Style Your App with CSS  

Make your app visually appealing with clean CSS:  

```css
#weather {  
  background: white;  
  border-radius: 8px;  
  padding: 20px;  
  text-align: center;  
  width: 300px;  
}  
```  

## Step 6: Deploy Your App  

Share your weather app using:  
- **Netlify** (easiest for static sites)  
- **Vercel** (great for frontend projects)  
- **GitHub Pages** (free for public repos)  

_"The best way to learn is by building—and a weather app is the perfect project to start."_  

#webdev #coding #weatherapp #API #javascript