Create a Weather Dashboard with JavaScript: Free API Project 2026

Build a Real-Time Weather Dashboard with Vanilla JavaScript

📅 Published: Today ⏱️ Reading Time: 15 min 🛠️ Difficulty: Intermediate

What You'll Learn

• Working with free weather APIs (OpenWeatherMap)
• JavaScript async/await for API calls
• DOM manipulation without frameworks
• Local storage for recent searches

Project Setup

<!-- Basic HTML structure -->
<div id="weather-app">
  <input type="text" id="city-input" placeholder="Enter city...">
  <button id="search-btn">Get Weather</button>
  <div id="weather-display"></div>
</div>

JavaScript Implementation

const API_KEY = 'your_api_key_here';
const BASE_URL = 'https://api.openweathermap.org/data/2.5/weather';

async function getWeather(city) {
  try {
    const response = await fetch(
      `${BASE_URL}?q=${city}&appid=${API_KEY}&units=metric`
    );
    const data = await response.json();
    
    if (data.cod === 200) {
      displayWeather(data);
      saveToHistory(city);
    } else {
      throw new Error(data.message);
    }
  } catch (error) {
    console.error('Error fetching weather:', error);
    document.getElementById('weather-display').innerHTML = 
      `<p class="error">${error.message}</p>`;
  }
}

function displayWeather(data) {
  const display = document.getElementById('weather-display');
  display.innerHTML = `
    <div class="weather-card">
      <h2>${data.name}, ${data.sys.country}</h2>
      <img src="https://openweathermap.org/img/wn/${data.weather[0].icon}@2x.png">
      <p>${data.weather[0].description}</p>
      <h3>${Math.round(data.main.temp)}°C</h3>
      <p>Feels like: ${Math.round(data.main.feels_like)}°C</p>
      <p>Humidity: ${data.main.humidity}%</p>
    </div>
  `;
}

Complete CSS Styling

#weather-app {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  font-family: 'Segoe UI', system-ui;
}

#city-input {
  padding: 12px;
  width: 70%;
  border: 2px solid #3498db;
  border-radius: 5px;
  font-size: 16px;
}

#search-btn {
  padding: 12px 24px;
  background: #2ecc71;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
}

.weather-card {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 30px;
  border-radius: 15px;
  margin-top: 20px;
  text-align: center;
}

Key Features Added

1. Real-time weather data from OpenWeather API
2. Error handling for invalid cities
3. Responsive design with CSS Grid
4. Search history using localStorage
5. Temperature unit toggle (Celsius/Fahrenheit)

Deployment Options

Platform	Free Tier	Difficulty
GitHub Pages	Yes	Easy
Netlify	Yes	Easy
Vercel	Yes	Medium

📁 Complete Source Code: Download the full project from GitHub Repository Link