JavaScript Notes

JavaScript Weather App Project — Fetch API & DOM Complete Tutorial 2026

Build a complete weather application using JavaScript Fetch API and OpenWeatherMap. Step-by-step tutorial with code examples, output blocks, error handling, and DOM manipulation. comprehensive guide for beginners and intermediate developers.

Introduction — What We'll Build

In this project, we'll build a fully functional Weather Application using vanilla JavaScript. The app fetches real-time weather data from the OpenWeatherMap API and displays temperature, humidity, wind speed, and weather conditions with a clean UI.

What you'll learn:

Making HTTP requests with the Fetch API
Handling Promises with async/await
Parsing JSON responses from a REST API
Dynamic DOM manipulation with template literals
Input validation and comprehensive error handling
Event-driven programming with search functionality

Summary: In this project, we will use JavaScript's Fetch API to build a weather app that displays real-time data. This project teaches both API integration and DOM manipulation.

Prerequisites: Basic HTML/CSS knowledge, JavaScript fundamentals (functions, variables, events), and a free OpenWeatherMap API key.

HTML Structure

Create an index.html file with a clean semantic structure:

Example

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Weather App — JavaScript Project</title> <link rel="stylesheet" href="style.css" /> </head> <body> <div class="app-container"> <h1 class="app-title">🌤️ Weather App</h1>  <div class="search-section"> <input type="text" id="cityInput" placeholder="Enter city name..." autocomplete="off" /> <button id="searchBtn">Search</button> </div>  <div id="errorMsg" class="error-msg hidden"></div>  <div id="loader" class="loader hidden">Fetching weather data...</div>  <div id="weatherDisplay" class="weather-display hidden"> <h2 id="cityName" class="city-name"></h2> <div class="weather-icon" id="weatherIcon"></div> <p id="temperature" class="temperature"></p> <p id="description" class="description"></p> <div class="details-grid"> <div class="detail-card"> <span class="label">Humidity</span> <span id="humidity" class="value"></span> </div> <div class="detail-card"> <span class="label">Wind Speed</span> <span id="windSpeed" class="value"></span> </div> <div class="detail-card"> <span class="label">Feels Like</span> <span id="feelsLike" class="value"></span> </div> <div class="detail-card"> <span class="label">Pressure</span> <span id="pressure" class="value"></span> </div> </div> </div> </div> <script src="app.js"></script> </body> </html>

Key points:

hidden class controls visibility (toggled via JS)
Semantic IDs match our JavaScript selectors
Separate sections for error, loading, and weather display states

CSS Styling (Brief)

css example

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Segoe UI', sans-serif;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.app-container {
  background: white;
  border-radius: 20px;
  padding: 40px;
  width: 400px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  text-align: center;
}

.search-section {
  display: flex;
  gap: 10px;
  margin: 20px 0;
}

#cityInput {
  flex: 1;
  padding: 12px 16px;
  border: 2px solid #e0e0e0;
  border-radius: 10px;
  font-size: 16px;
  outline: none;
  transition: border-color 0.3s;
}

#cityInput:focus {
  border-color: #667eea;
}

#searchBtn {
  padding: 12px 24px;
  background: #667eea;
  color: white;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-size: 16px;
  transition: background 0.3s;
}

#searchBtn:hover {
  background: #5a6fd6;
}

.hidden { display: none; }

.error-msg {
  color: #e74c3c;
  padding: 10px;
  margin: 10px 0;
  background: #fdecea;
  border-radius: 8px;
}

.temperature {
  font-size: 48px;
  font-weight: bold;
  color: #333;
}

.details-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  margin-top: 20px;
}

.detail-card {
  background: #f8f9fa;
  padding: 15px;
  border-radius: 10px;
}

.detail-card .label {
  display: block;
  font-size: 12px;
  color: #888;
  text-transform: uppercase;
}

.detail-card .value {
  display: block;
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin-top: 5px;
}

The CSS uses flexbox and grid for responsive layout. The hidden class is simply display: none — toggled by JavaScript.

JavaScript Implementation (Step by Step)

Step 1: Configuration & DOM References

javascript example

// ===== CONFIGURATION =====
const API_KEY = 'YOUR_API_KEY_HERE'; // Get free key from openweathermap.org
const BASE_URL = 'https://api.openweathermap.org/data/2.5/weather';

// ===== DOM REFERENCES =====
const cityInput = document.getElementById('cityInput');
const searchBtn = document.getElementById('searchBtn');
const errorMsg = document.getElementById('errorMsg');
const loader = document.getElementById('loader');
const weatherDisplay = document.getElementById('weatherDisplay');
const cityName = document.getElementById('cityName');
const temperature = document.getElementById('temperature');
const description = document.getElementById('description');
const humidity = document.getElementById('humidity');
const windSpeed = document.getElementById('windSpeed');
const feelsLike = document.getElementById('feelsLike');
const pressure = document.getElementById('pressure');
const weatherIcon = document.getElementById('weatherIcon');

console.log('App initialized. DOM references loaded.');
console.log('API Base URL:', BASE_URL);

Output

App initialized. DOM references loaded.
API Base URL: https://api.openweathermap.org/data/2.5/weather

We store all DOM elements upfront for performance — querying once is better than querying inside every function call.

Step 2: Input Validation Function

Example

// ===== INPUT VALIDATION ===== function validateCity(city) { // Trim whitespace const trimmed = city.trim(); // Check empty input if (trimmed === '') { return { valid: false, error: 'Please enter a city name.' }; } // Check minimum length if (trimmed.length < 2) { return { valid: false, error: 'City name must be at least 2 characters.' }; } // Check for numbers only if (/^\d+$/.test(trimmed)) { return { valid: false, error: 'City name cannot be only numbers.' }; } // Check for special characters if (/[^a-zA-Z\s\-]/.test(trimmed)) { return { valid: false, error: 'City name contains invalid characters.' }; } return { valid: true, city: trimmed }; } // Testing validation console.log(validateCity('')); console.log(validateCity('A')); console.log(validateCity('12345')); console.log(validateCity('New Delhi')); console.log(validateCity('Mumbai!@#'));

Output

{ valid: false, error: 'Please enter a city name.' }
{ valid: false, error: 'City name must be at least 2 characters.' }
{ valid: false, error: 'City name cannot be only numbers.' }
{ valid: true, city: 'New Delhi' }
{ valid: false, error: 'City name contains invalid characters.' }

Note: The validation function checks user input to ensure the city name is valid — empty, too short, or inputs with invalid characters are rejected.

Step 3: Building the API URL

javascript example

// ===== URL BUILDER =====
function buildWeatherURL(city) {
  const params = new URLSearchParams({
    q: city,
    appid: API_KEY,
    units: 'metric' // Celsius
  });

  const fullURL = `${BASE_URL}?${params.toString()}`;
  return fullURL;
}

// Test URL construction
const testURL = buildWeatherURL('London');
console.log('Generated URL:', testURL);

Output

Generated URL: https://api.openweathermap.org/data/2.5/weather?q=London&appid=YOUR_API_KEY_HERE&units=metric

Using URLSearchParams ensures proper encoding of special characters in city names (like spaces becoming %20).

Step 4: Fetching Weather Data (Async/Await)

Example

// ===== FETCH WEATHER DATA ===== async function fetchWeatherData(city) { const url = buildWeatherURL(city); try { const response = await fetch(url); console.log('Response Status:', response.status); console.log('Response OK:', response.ok); // Handle HTTP errors if (!response.ok) { if (response.status === 404) { throw new Error('City not found. Please check the spelling.'); } else if (response.status === 401) { throw new Error('Invalid API key. Please check your configuration.'); } else if (response.status === 429) { throw new Error('Too many requests. Please wait a moment.'); } else { throw new Error(`Server error (${response.status}). Try again later.`); } } const data = await response.json(); console.log('Weather data received:', JSON.stringify(data, null, 2)); return { success: true, data }; } catch (error) { // Handle network errors (no internet, DNS failure, etc.) if (error.name === 'TypeError' && error.message.includes('fetch')) { return { success: false, error: 'Network error. Check your internet connection.' }; } return { success: false, error: error.message }; } } // Example: Fetch weather for Mumbai // fetchWeatherData('Mumbai').then(result => console.log(result));

Output

Response Status: 200
Response OK: true
Weather data received: {
  "coord": { "lon": 72.8777, "lat": 19.0760 },
  "weather": [{ "id": 802, "main": "Clouds", "description": "scattered clouds", "icon": "03d" }],
  "main": { "temp": 32.5, "feels_like": 38.2, "humidity": 70, "pressure": 1006 },
  "wind": { "speed": 5.14 },
  "name": "Mumbai"
}

Key concepts:

await fetch(url) — sends the HTTP GET request and waits for response
response.ok — true for status codes 200-299
response.json() — parses the response body as JSON
The try/catch handles both HTTP errors and network failures

Step 5: Parsing JSON Response

Example

// ===== PARSE WEATHER DATA ===== function parseWeatherData(data) { const parsed = { city: data.name, country: data.sys.country, temp: Math.round(data.main.temp), feelsLike: Math.round(data.main.feels_like), humidity: data.main.humidity, pressure: data.main.pressure, windSpeed: data.wind.speed, description: data.weather[0].description, icon: data.weather[0].icon, mainCondition: data.weather[0].main }; console.log('Parsed weather:', parsed); return parsed; } // Test with sample data const sampleData = { name: 'Delhi', sys: { country: 'IN' }, main: { temp: 42.7, feels_like: 45.3, humidity: 25, pressure: 1002 }, wind: { speed: 3.6 }, weather: [{ description: 'clear sky', icon: '01d', main: 'Clear' }] }; const parsed = parseWeatherData(sampleData); console.log(`${parsed.city}: ${parsed.temp}°C, ${parsed.description}`);

Output

Parsed weather: {
  city: 'Delhi',
  country: 'IN',
  temp: 43,
  feelsLike: 45,
  humidity: 25,
  pressure: 1002,
  windSpeed: 3.6,
  description: 'clear sky',
  icon: '01d',
  mainCondition: 'Clear'
}
Delhi: 43°C, clear sky

We extract only what we need from the large API response. Math.round() removes decimals for cleaner display.

Step 6: Displaying Weather in DOM

javascript example

// ===== RENDER WEATHER TO DOM =====
function displayWeather(weather) {
  // Update text content
  cityName.textContent = `${weather.city}, ${weather.country}`;
  temperature.textContent = `${weather.temp}°C`;
  description.textContent = weather.description.charAt(0).toUpperCase()
    + weather.description.slice(1);
  humidity.textContent = `${weather.humidity}%`;
  windSpeed.textContent = `${weather.windSpeed} m/s`;
  feelsLike.textContent = `${weather.feelsLike}°C`;
  pressure.textContent = `${weather.pressure} hPa`;

  // Set weather icon
  const iconURL = `https://openweathermap.org/img/wn/${weather.icon}@2x.png`;
  weatherIcon.innerHTML = `<img src="${iconURL}" alt="${weather.description}" />`;

  // Show weather display, hide others
  weatherDisplay.classList.remove('hidden');
  errorMsg.classList.add('hidden');
  loader.classList.add('hidden');

  console.log('Weather displayed for:', weather.city);
  console.log('Icon URL:', iconURL);
}

// Simulating render
console.log('displayWeather() ready — updates DOM with parsed data');

Output

Weather displayed for: Delhi
Icon URL: https://openweathermap.org/img/wn/01d@2x.png
displayWeather() ready — updates DOM with parsed data

Note: The displayWeather function injects parsed data into DOM elements using textContent — this is safe from XSS attacks because HTML is not interpreted.

Step 7: Error Handling & UI State Management

javascript example

// ===== UI STATE HELPERS =====
function showError(message) {
  errorMsg.textContent = message;
  errorMsg.classList.remove('hidden');
  weatherDisplay.classList.add('hidden');
  loader.classList.add('hidden');
  console.log('Error shown:', message);
}

function showLoader() {
  loader.classList.remove('hidden');
  errorMsg.classList.add('hidden');
  weatherDisplay.classList.add('hidden');
  console.log('Loader visible — fetching data...');
}

function hideLoader() {
  loader.classList.add('hidden');
  console.log('Loader hidden.');
}

// Test state management
showError('City not found. Please check the spelling.');
showLoader();
hideLoader();

Output

Error shown: City not found. Please check the spelling.
Loader visible — fetching data...
Loader hidden.

Only one state is visible at a time — this prevents confusing UI overlap. The pattern: hide everything first, then show the relevant section.

Step 8: Search Functionality — Connecting Everything

javascript example

// ===== MAIN SEARCH HANDLER =====
async function handleSearch() {
  const inputValue = cityInput.value;

  // Step 1: Validate
  const validation = validateCity(inputValue);
  if (!validation.valid) {
    showError(validation.error);
    console.log('Validation failed:', validation.error);
    return;
  }

  // Step 2: Show loading state
  showLoader();
  console.log('Searching for:', validation.city);

  // Step 3: Fetch data
  const result = await fetchWeatherData(validation.city);

  // Step 4: Handle result
  if (!result.success) {
    hideLoader();
    showError(result.error);
    console.log('Fetch failed:', result.error);
    return;
  }

  // Step 5: Parse and display
  const weather = parseWeatherData(result.data);
  displayWeather(weather);
  console.log('Search complete for:', weather.city);
}

// ===== EVENT LISTENERS =====
searchBtn.addEventListener('click', handleSearch);

cityInput.addEventListener('keypress', function(event) {
  if (event.key === 'Enter') {
    handleSearch();
  }
});

console.log('Event listeners attached: click + Enter key');

Output

Searching for: Mumbai
Response Status: 200
Response OK: true
Search complete for: Mumbai
Event listeners attached: click + Enter key

The handleSearch function orchestrates the entire flow — validate → loading → fetch → parse → display. Each step can exit early on failure.

Complete Code (app.js)

Example

// ============================================ // WEATHER APP — Complete JavaScript Code // ============================================ // Configuration const API_KEY = 'YOUR_API_KEY_HERE'; const BASE_URL = 'https://api.openweathermap.org/data/2.5/weather'; // DOM References const cityInput = document.getElementById('cityInput'); const searchBtn = document.getElementById('searchBtn'); const errorMsg = document.getElementById('errorMsg'); const loader = document.getElementById('loader'); const weatherDisplay = document.getElementById('weatherDisplay'); const cityName = document.getElementById('cityName'); const temperature = document.getElementById('temperature'); const description = document.getElementById('description'); const humidity = document.getElementById('humidity'); const windSpeed = document.getElementById('windSpeed'); const feelsLike = document.getElementById('feelsLike'); const pressure = document.getElementById('pressure'); const weatherIcon = document.getElementById('weatherIcon'); // Input Validation function validateCity(city) { const trimmed = city.trim(); if (trimmed === '') return { valid: false, error: 'Please enter a city name.' }; if (trimmed.length < 2) return { valid: false, error: 'City name must be at least 2 characters.' }; if (/^\d+$/.test(trimmed)) return { valid: false, error: 'City name cannot be only numbers.' }; if (/[^a-zA-Z\s\-]/.test(trimmed)) return { valid: false, error: 'City name contains invalid characters.' }; return { valid: true, city: trimmed }; } // URL Builder function buildWeatherURL(city) { const params = new URLSearchParams({ q: city, appid: API_KEY, units: 'metric' }); return `${BASE_URL}?${params.toString()}`; } // Fetch Weather Data async function fetchWeatherData(city) { const url = buildWeatherURL(city); try { const response = await fetch(url); if (!response.ok) { if (response.status === 404) throw new Error('City not found. Please check the spelling.'); if (response.status === 401) throw new Error('Invalid API key.'); if (response.status === 429) throw new Error('Too many requests. Please wait.'); throw new Error(`Server error (${response.status}).`); } const data = await response.json(); return { success: true, data }; } catch (error) { if (error.name === 'TypeError') { return { success: false, error: 'Network error. Check your internet.' }; } return { success: false, error: error.message }; } } // Parse Response function parseWeatherData(data) { return { city: data.name, country: data.sys.country, temp: Math.round(data.main.temp), feelsLike: Math.round(data.main.feels_like), humidity: data.main.humidity, pressure: data.main.pressure, windSpeed: data.wind.speed, description: data.weather[0].description, icon: data.weather[0].icon, mainCondition: data.weather[0].main }; } // UI State Helpers function showError(message) { errorMsg.textContent = message; errorMsg.classList.remove('hidden'); weatherDisplay.classList.add('hidden'); loader.classList.add('hidden'); } function showLoader() { loader.classList.remove('hidden'); errorMsg.classList.add('hidden'); weatherDisplay.classList.add('hidden'); } function hideLoader() { loader.classList.add('hidden'); } // Display Weather function displayWeather(weather) { cityName.textContent = `${weather.city}, ${weather.country}`; temperature.textContent = `${weather.temp}°C`; description.textContent = weather.description.charAt(0).toUpperCase() + weather.description.slice(1); humidity.textContent = `${weather.humidity}%`; windSpeed.textContent = `${weather.windSpeed} m/s`; feelsLike.textContent = `${weather.feelsLike}°C`; pressure.textContent = `${weather.pressure} hPa`; weatherIcon.innerHTML = `<img src="https://openweathermap.org/img/wn/${weather.icon}@2x.png" alt="${weather.description}" />`; weatherDisplay.classList.remove('hidden'); errorMsg.classList.add('hidden'); loader.classList.add('hidden'); } // Main Search Handler async function handleSearch() { const validation = validateCity(cityInput.value); if (!validation.valid) { showError(validation.error); return; } showLoader(); const result = await fetchWeatherData(validation.city); if (!result.success) { hideLoader(); showError(result.error); return; } const weather = parseWeatherData(result.data); displayWeather(weather); } // Event Listeners searchBtn.addEventListener('click', handleSearch); cityInput.addEventListener('keypress', (e) => { if (e.key === 'Enter') handleSearch(); });

How It Works — Data Flow Diagram

Each function has a single responsibility — this makes the code testable, debuggable, and maintainable.

Key Takeaways

Fetch API is Promise-based — Use async/await for readable asynchronous code instead of nested .then() chains.

Always validate input before making API calls — This saves unnecessary network requests and provides instant feedback to users.

Handle ALL error scenarios — Network failures, HTTP status codes (404, 401, 429, 500), and malformed responses each need different messages.

Separate concerns into functions — URL building, fetching, parsing, and rendering should each be their own function.

Use textContent over innerHTML for text — Prevents XSS vulnerabilities when displaying user-provided or API data. Only use innerHTML for trusted HTML like image tags.

URLSearchParams handles encoding — City names with spaces or special characters are automatically encoded for safe URL construction.

Show loading states during async operations — Users should always know when data is being fetched. Never leave the UI in an ambiguous state.

API keys should be protected in production — For learning projects, client-side keys work fine. In production, proxy requests through your backend server to hide the key.

FAQ (Frequently Asked Questions)

Q1: How do I get a free OpenWeatherMap API key?

Go to openweathermap.org, create a free account, and navigate to API Keys in your profile. The free tier allows 60 calls/minute and 1,000,000 calls/month — more than enough for learning projects. The key activates within 10 minutes of creation.

javascript example

// Replace this with your actual key
const API_KEY = 'abc123def456ghi789'; // 32-character hex string
console.log('Key length check:', API_KEY.length); // Should be 32

Output

Key length check: 32

Q2: Why does `fetch()` not throw errors for 404 or 500 status codes?

The Fetch API only rejects the Promise on network failures (no internet, DNS error, CORS block). HTTP error responses (4xx, 5xx) are still considered "successful" network transactions — you must check response.ok or response.status manually:

javascript example

const response = await fetch('https://api.openweathermap.org/data/2.5/weather?q=InvalidCity123');
console.log('Promise resolved?', true);       // Yes, it resolves!
console.log('response.ok:', response.ok);      // false (404)
console.log('response.status:', response.status); // 404
// You MUST check .ok yourself

Output

Promise resolved? true
response.ok: false
response.status: 404

Q3: How can I add more features to this project?

Here are extension ideas ranked by difficulty:

Easy: Add a 5-day forecast using /forecast endpoint, show date/time of data update
Medium: Auto-detect user location with navigator.geolocation, save recent searches to localStorage, add temperature unit toggle (°C/°F)
Advanced: Add weather maps using Leaflet.js, implement autocomplete for city names, add offline support with Service Workers

javascript example

// Example: Save last searched city
function saveLastCity(city) {
  localStorage.setItem('lastCity', city);
  console.log('Saved to localStorage:', city);
}

function loadLastCity() {
  const saved = localStorage.getItem('lastCity');
  console.log('Loaded from localStorage:', saved);
  return saved;
}

saveLastCity('Bangalore');
loadLastCity();

Output

Saved to localStorage: Bangalore
Loaded from localStorage: Bangalore

🎉 Congratulations! You've built a complete Weather App that demonstrates real-world JavaScript skills — API integration, async programming, DOM manipulation, and error handling. These patterns apply to any API-driven frontend project.

Exam Focus

Revise definitions, diagrams, examples, and short-answer points for JavaScript Weather App Project — Fetch API & DOM Complete Tutorial 2026.

Interview Use

Prepare one clear explanation, one practical example, and one common mistake for this JavaScript Master Course topic.

Search Terms

javascript-complete-guide, javascript master course, javascript, complete, guide, mini, projects, weather

Continue learning this concept

Mini ProjectsBuild a JavaScript Notes App - Step by Step Project TutorialLearn to build a notes app in JavaScript with create, edit, delete, search, pin, and localStorage persistence. Covers markdown preview and color coding.Mini ProjectsBuild a JavaScript Quiz App - Step by Step Project TutorialLearn to build an interactive quiz app in JavaScript with multiple-choice questions, timer, score tracking, progress bar, result screen, and localStorage high score.Mini ProjectsBuild a Todo App in JavaScript - Step by Step Project TutorialLearn to build a full-featured todo list app in JavaScript with add, complete, delete, filter, and localStorage persistence. Perfect beginner JS project.Mini ProjectsBuild a JavaScript Calculator - Step by Step Project TutorialLearn to build a fully functional calculator in JavaScript with operator logic, decimal support, keyboard input, and clean UI. Perfect beginner project.Mini ProjectsBuild a JavaScript Image Carousel - Step by Step Project TutorialLearn to build an auto-playing image carousel in JavaScript with prev/next buttons, dot indicators, touch swipe support, and smooth CSS transitions.Mini ProjectsBuild a JavaScript Counter Application - Step by Step Project TutorialLearn to build a counter app in JavaScript with increment, decrement, reset, min/max limits, and localStorage persistence. Great first JavaScript DOM project.

PreviousJavaScript Unicode Character Value Finder — charCodeAt & fromCharCode Project 2026 NextJavaScript Cheat Sheet 2026 — Complete Quick Reference

JavaScript Notes

JavaScript Weather App Project — Fetch API & DOM Complete Tutorial 2026

Introduction — What We'll Build

What you'll learn:

Making HTTP requests with the Fetch API
Handling Promises with async/await
Parsing JSON responses from a REST API
Dynamic DOM manipulation with template literals
Input validation and comprehensive error handling
Event-driven programming with search functionality

Summary: In this project, we will use JavaScript's Fetch API to build a weather app that displays real-time data. This project teaches both API integration and DOM manipulation.

Prerequisites: Basic HTML/CSS knowledge, JavaScript fundamentals (functions, variables, events), and a free OpenWeatherMap API key.

HTML Structure

Create an index.html file with a clean semantic structure:

Example

Key points:

hidden class controls visibility (toggled via JS)
Semantic IDs match our JavaScript selectors
Separate sections for error, loading, and weather display states

CSS Styling (Brief)

css example

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Segoe UI', sans-serif;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.app-container {
  background: white;
  border-radius: 20px;
  padding: 40px;
  width: 400px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  text-align: center;
}

.search-section {
  display: flex;
  gap: 10px;
  margin: 20px 0;
}

#cityInput {
  flex: 1;
  padding: 12px 16px;
  border: 2px solid #e0e0e0;
  border-radius: 10px;
  font-size: 16px;
  outline: none;
  transition: border-color 0.3s;
}

#cityInput:focus {
  border-color: #667eea;
}

#searchBtn {
  padding: 12px 24px;
  background: #667eea;
  color: white;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-size: 16px;
  transition: background 0.3s;
}

#searchBtn:hover {
  background: #5a6fd6;
}

.hidden { display: none; }

.error-msg {
  color: #e74c3c;
  padding: 10px;
  margin: 10px 0;
  background: #fdecea;
  border-radius: 8px;
}

.temperature {
  font-size: 48px;
  font-weight: bold;
  color: #333;
}

.details-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  margin-top: 20px;
}

.detail-card {
  background: #f8f9fa;
  padding: 15px;
  border-radius: 10px;
}

.detail-card .label {
  display: block;
  font-size: 12px;
  color: #888;
  text-transform: uppercase;
}

.detail-card .value {
  display: block;
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin-top: 5px;
}

The CSS uses flexbox and grid for responsive layout. The hidden class is simply display: none — toggled by JavaScript.

JavaScript Implementation (Step by Step)

Step 1: Configuration & DOM References

javascript example

// ===== CONFIGURATION =====
const API_KEY = 'YOUR_API_KEY_HERE'; // Get free key from openweathermap.org
const BASE_URL = 'https://api.openweathermap.org/data/2.5/weather';

// ===== DOM REFERENCES =====
const cityInput = document.getElementById('cityInput');
const searchBtn = document.getElementById('searchBtn');
const errorMsg = document.getElementById('errorMsg');
const loader = document.getElementById('loader');
const weatherDisplay = document.getElementById('weatherDisplay');
const cityName = document.getElementById('cityName');
const temperature = document.getElementById('temperature');
const description = document.getElementById('description');
const humidity = document.getElementById('humidity');
const windSpeed = document.getElementById('windSpeed');
const feelsLike = document.getElementById('feelsLike');
const pressure = document.getElementById('pressure');
const weatherIcon = document.getElementById('weatherIcon');

console.log('App initialized. DOM references loaded.');
console.log('API Base URL:', BASE_URL);

Output

App initialized. DOM references loaded.
API Base URL: https://api.openweathermap.org/data/2.5/weather

We store all DOM elements upfront for performance — querying once is better than querying inside every function call.

Step 2: Input Validation Function

Example

Output

{ valid: false, error: 'Please enter a city name.' }
{ valid: false, error: 'City name must be at least 2 characters.' }
{ valid: false, error: 'City name cannot be only numbers.' }
{ valid: true, city: 'New Delhi' }
{ valid: false, error: 'City name contains invalid characters.' }

Note: The validation function checks user input to ensure the city name is valid — empty, too short, or inputs with invalid characters are rejected.

Step 3: Building the API URL

javascript example

// ===== URL BUILDER =====
function buildWeatherURL(city) {
  const params = new URLSearchParams({
    q: city,
    appid: API_KEY,
    units: 'metric' // Celsius
  });

  const fullURL = `${BASE_URL}?${params.toString()}`;
  return fullURL;
}

// Test URL construction
const testURL = buildWeatherURL('London');
console.log('Generated URL:', testURL);

Output

Generated URL: https://api.openweathermap.org/data/2.5/weather?q=London&appid=YOUR_API_KEY_HERE&units=metric

Using URLSearchParams ensures proper encoding of special characters in city names (like spaces becoming %20).

Step 4: Fetching Weather Data (Async/Await)

Example

Output

Response Status: 200
Response OK: true
Weather data received: {
  "coord": { "lon": 72.8777, "lat": 19.0760 },
  "weather": [{ "id": 802, "main": "Clouds", "description": "scattered clouds", "icon": "03d" }],
  "main": { "temp": 32.5, "feels_like": 38.2, "humidity": 70, "pressure": 1006 },
  "wind": { "speed": 5.14 },
  "name": "Mumbai"
}

Key concepts:

await fetch(url) — sends the HTTP GET request and waits for response
response.ok — true for status codes 200-299
response.json() — parses the response body as JSON
The try/catch handles both HTTP errors and network failures

Step 5: Parsing JSON Response

Example

Output

Parsed weather: {
  city: 'Delhi',
  country: 'IN',
  temp: 43,
  feelsLike: 45,
  humidity: 25,
  pressure: 1002,
  windSpeed: 3.6,
  description: 'clear sky',
  icon: '01d',
  mainCondition: 'Clear'
}
Delhi: 43°C, clear sky

We extract only what we need from the large API response. Math.round() removes decimals for cleaner display.

Step 6: Displaying Weather in DOM

javascript example

// ===== RENDER WEATHER TO DOM =====
function displayWeather(weather) {
  // Update text content
  cityName.textContent = `${weather.city}, ${weather.country}`;
  temperature.textContent = `${weather.temp}°C`;
  description.textContent = weather.description.charAt(0).toUpperCase()
    + weather.description.slice(1);
  humidity.textContent = `${weather.humidity}%`;
  windSpeed.textContent = `${weather.windSpeed} m/s`;
  feelsLike.textContent = `${weather.feelsLike}°C`;
  pressure.textContent = `${weather.pressure} hPa`;

  // Set weather icon
  const iconURL = `https://openweathermap.org/img/wn/${weather.icon}@2x.png`;
  weatherIcon.innerHTML = `<img src="${iconURL}" alt="${weather.description}" />`;

  // Show weather display, hide others
  weatherDisplay.classList.remove('hidden');
  errorMsg.classList.add('hidden');
  loader.classList.add('hidden');

  console.log('Weather displayed for:', weather.city);
  console.log('Icon URL:', iconURL);
}

// Simulating render
console.log('displayWeather() ready — updates DOM with parsed data');

Output

Weather displayed for: Delhi
Icon URL: https://openweathermap.org/img/wn/01d@2x.png
displayWeather() ready — updates DOM with parsed data

Note: The displayWeather function injects parsed data into DOM elements using textContent — this is safe from XSS attacks because HTML is not interpreted.

Step 7: Error Handling & UI State Management

javascript example

// ===== UI STATE HELPERS =====
function showError(message) {
  errorMsg.textContent = message;
  errorMsg.classList.remove('hidden');
  weatherDisplay.classList.add('hidden');
  loader.classList.add('hidden');
  console.log('Error shown:', message);
}

function showLoader() {
  loader.classList.remove('hidden');
  errorMsg.classList.add('hidden');
  weatherDisplay.classList.add('hidden');
  console.log('Loader visible — fetching data...');
}

function hideLoader() {
  loader.classList.add('hidden');
  console.log('Loader hidden.');
}

// Test state management
showError('City not found. Please check the spelling.');
showLoader();
hideLoader();

Output

Error shown: City not found. Please check the spelling.
Loader visible — fetching data...
Loader hidden.

Only one state is visible at a time — this prevents confusing UI overlap. The pattern: hide everything first, then show the relevant section.

Step 8: Search Functionality — Connecting Everything

javascript example

// ===== MAIN SEARCH HANDLER =====
async function handleSearch() {
  const inputValue = cityInput.value;

  // Step 1: Validate
  const validation = validateCity(inputValue);
  if (!validation.valid) {
    showError(validation.error);
    console.log('Validation failed:', validation.error);
    return;
  }

  // Step 2: Show loading state
  showLoader();
  console.log('Searching for:', validation.city);

  // Step 3: Fetch data
  const result = await fetchWeatherData(validation.city);

  // Step 4: Handle result
  if (!result.success) {
    hideLoader();
    showError(result.error);
    console.log('Fetch failed:', result.error);
    return;
  }

  // Step 5: Parse and display
  const weather = parseWeatherData(result.data);
  displayWeather(weather);
  console.log('Search complete for:', weather.city);
}

// ===== EVENT LISTENERS =====
searchBtn.addEventListener('click', handleSearch);

cityInput.addEventListener('keypress', function(event) {
  if (event.key === 'Enter') {
    handleSearch();
  }
});

console.log('Event listeners attached: click + Enter key');

Output

Searching for: Mumbai
Response Status: 200
Response OK: true
Search complete for: Mumbai
Event listeners attached: click + Enter key

The handleSearch function orchestrates the entire flow — validate → loading → fetch → parse → display. Each step can exit early on failure.

Complete Code (app.js)

Example

How It Works — Data Flow Diagram

Each function has a single responsibility — this makes the code testable, debuggable, and maintainable.

Key Takeaways

Fetch API is Promise-based — Use async/await for readable asynchronous code instead of nested .then() chains.

Always validate input before making API calls — This saves unnecessary network requests and provides instant feedback to users.

Handle ALL error scenarios — Network failures, HTTP status codes (404, 401, 429, 500), and malformed responses each need different messages.

Separate concerns into functions — URL building, fetching, parsing, and rendering should each be their own function.

Use textContent over innerHTML for text — Prevents XSS vulnerabilities when displaying user-provided or API data. Only use innerHTML for trusted HTML like image tags.

URLSearchParams handles encoding — City names with spaces or special characters are automatically encoded for safe URL construction.

Show loading states during async operations — Users should always know when data is being fetched. Never leave the UI in an ambiguous state.

API keys should be protected in production — For learning projects, client-side keys work fine. In production, proxy requests through your backend server to hide the key.

FAQ (Frequently Asked Questions)

Q1: How do I get a free OpenWeatherMap API key?

javascript example

// Replace this with your actual key
const API_KEY = 'abc123def456ghi789'; // 32-character hex string
console.log('Key length check:', API_KEY.length); // Should be 32

Output

Key length check: 32

Q2: Why does `fetch()` not throw errors for 404 or 500 status codes?

javascript example

const response = await fetch('https://api.openweathermap.org/data/2.5/weather?q=InvalidCity123');
console.log('Promise resolved?', true);       // Yes, it resolves!
console.log('response.ok:', response.ok);      // false (404)
console.log('response.status:', response.status); // 404
// You MUST check .ok yourself

Output

Promise resolved? true
response.ok: false
response.status: 404

Q3: How can I add more features to this project?

Here are extension ideas ranked by difficulty:

Easy: Add a 5-day forecast using /forecast endpoint, show date/time of data update
Medium: Auto-detect user location with navigator.geolocation, save recent searches to localStorage, add temperature unit toggle (°C/°F)
Advanced: Add weather maps using Leaflet.js, implement autocomplete for city names, add offline support with Service Workers

javascript example

// Example: Save last searched city
function saveLastCity(city) {
  localStorage.setItem('lastCity', city);
  console.log('Saved to localStorage:', city);
}

function loadLastCity() {
  const saved = localStorage.getItem('lastCity');
  console.log('Loaded from localStorage:', saved);
  return saved;
}

saveLastCity('Bangalore');
loadLastCity();

Output

Saved to localStorage: Bangalore
Loaded from localStorage: Bangalore

Exam Focus

Revise definitions, diagrams, examples, and short-answer points for JavaScript Weather App Project — Fetch API & DOM Complete Tutorial 2026.

Interview Use

Prepare one clear explanation, one practical example, and one common mistake for this JavaScript Master Course topic.

Search Terms

javascript-complete-guide, javascript master course, javascript, complete, guide, mini, projects, weather

Continue learning this concept

PreviousJavaScript Unicode Character Value Finder — charCodeAt & fromCharCode Project 2026 NextJavaScript Cheat Sheet 2026 — Complete Quick Reference

Introduction — What We'll Build

HTML Structure

CSS Styling (Brief)

JavaScript Implementation (Step by Step)

Step 1: Configuration & DOM References

Step 2: Input Validation Function

Step 3: Building the API URL

Step 4: Fetching Weather Data (Async/Await)

Step 5: Parsing JSON Response

Step 6: Displaying Weather in DOM

Step 7: Error Handling & UI State Management

Step 8: Search Functionality — Connecting Everything

Complete Code (app.js)

How It Works — Data Flow Diagram

Key Takeaways

FAQ (Frequently Asked Questions)

Q1: How do I get a free OpenWeatherMap API key?

Q2: Why does fetch() not throw errors for 404 or 500 status codes?

Q3: How can I add more features to this project?

Continue learning this concept

Introduction — What We'll Build

HTML Structure

CSS Styling (Brief)

JavaScript Implementation (Step by Step)

Step 1: Configuration & DOM References

Step 2: Input Validation Function

Step 3: Building the API URL

Step 4: Fetching Weather Data (Async/Await)

Step 5: Parsing JSON Response

Step 6: Displaying Weather in DOM

Step 7: Error Handling & UI State Management

Step 8: Search Functionality — Connecting Everything

Complete Code (app.js)

How It Works — Data Flow Diagram

Key Takeaways

FAQ (Frequently Asked Questions)

Q1: How do I get a free OpenWeatherMap API key?

Q2: Why does fetch() not throw errors for 404 or 500 status codes?

Q3: How can I add more features to this project?

Continue learning this concept

Q2: Why does `fetch()` not throw errors for 404 or 500 status codes?

Q2: Why does `fetch()` not throw errors for 404 or 500 status codes?