Project: Weather Dashboard

Checking access...

This project brings together everything from the Advanced JavaScript module — async/await, Fetch API, error handling, ES6 modules, and modern JavaScript features — to build a complete weather dashboard.

Project Overview

You’ll build a weather dashboard that:

Fetches real weather data from the OpenWeatherMap API
Displays temperature, humidity, wind speed, and weather conditions
Shows a 5-day forecast
Caches results in localStorage to reduce API calls
Handles loading states, errors, and empty states
Uses ES6 modules to organise the code

Step 1: Get an API Key

Go to OpenWeatherMap and sign up for a free account
Navigate to the API Keys section in your account dashboard
Copy your API key (the free tier allows 60 calls/minute, which is plenty for development)

Step 2: Project Structure

weather-dashboard/
├── index.html          # Main HTML file
├── styles.css          # Styles
├── app.js             # Entry point — imports and initialises
├── modules/
│   ├── api.js         # API calls
│   ├── ui.js          # DOM rendering functions
│   ├── storage.js     # localStorage caching
│   └── utils.js       # Helper utilities

Step 3: The API Module

1
const API_KEY = "YOUR_API_KEY_HERE";
2
const BASE_URL = "https://api.openweathermap.org/data/2.5";
3

4
export async function fetchCurrentWeather(city) {
5
  const url = `${BASE_URL}/weather?q=${encodeURIComponent(city)}&units=metric&appid=${API_KEY}`;
6

7
  const response = await fetch(url);
8

9
  if (!response.ok) {
10
    if (response.status === 404) {
11
      throw new Error(`City "${city}" not found. Please check the spelling.`);
12
    }
13
    if (response.status === 401) {
14
      throw new Error("Invalid API key. Please check your configuration.");
15
    }
16
    throw new Error(`Weather service error: ${response.status}`);
17
  }
18

19
  return response.json();
20
}
21

22
export async function fetchForecast(city) {
23
  const url = `${BASE_URL}/forecast?q=${encodeURIComponent(city)}&units=metric&appid=${API_KEY}`;
24

25
  const response = await fetch(url);
26

27
  if (!response.ok) {
28
    throw new Error(`Forecast fetch failed: ${response.status}`);
29
  }
30

31
  return response.json();
32
}

Step 4: The Storage Module

Cache API responses to avoid rate limits and improve performance:

1
const CACHE_KEY = "weather_cache";
2
const CACHE_DURATION = 10 * 60 * 1000; // 10 minutes
3

4
export function getCachedWeather(city) {
5
  try {
6
    const cache = JSON.parse(localStorage.getItem(CACHE_KEY)) || {};
7

8
    if (cache[city] && Date.now() - cache[city].timestamp < CACHE_DURATION) {
9
      return cache[city].data;
10
    }
11

12
    return null;
13
  } catch {
14
    return null; // if localStorage is corrupted, ignore cache
15
  }
16
}
17

18
export function setCachedWeather(city, data) {
19
  try {
20
    const cache = JSON.parse(localStorage.getItem(CACHE_KEY)) || {};
21

22
    cache[city] = {
23
      data,
24
      timestamp: Date.now(),
25
    };
26

27
    // Limit cache size to prevent quota issues
28
    const entries = Object.entries(cache);
29
    if (entries.length > 20) {
30
      // Remove oldest entry
31
      entries.sort((a, b) => a[1].timestamp - b[1].timestamp);
32
      delete cache[entries[0][0]];
33
    }
34

35
    localStorage.setItem(CACHE_KEY, JSON.stringify(cache));
36
  } catch (err) {
37
    console.warn("Failed to cache weather data:", err.message);
38
  }
39
}

Step 5: The UI Module

1
const app = document.querySelector("#app");
2

3
export function showLoading() {
4
  app.innerHTML = `
5
    <div class="loading">
6
      <div class="spinner"></div>
7
      <p>Fetching weather data...</p>
8
    </div>
9
  `;
10
}
11

12
export function showError(message) {
13
  app.innerHTML = `
14
    <div class="error">
15
      <span class="error-icon">⚠️</span>
16
      <p>${escapeHtml(message)}</p>
17
      <button onclick="window.location.reload()">Try Again</button>
18
    </div>
19
  `;
20
}
21

22
export function showEmpty() {
23
  app.innerHTML = `
24
    <div class="empty">
25
      <p>Enter a city name above to see the weather.</p>
26
    </div>
27
  `;
28
}
29

30
export function renderWeather(data) {
31
  const { name, main, weather, wind, sys } = data;
32
  const temp = Math.round(main.temp);
33
  const feelsLike = Math.round(main.feels_like);
34
  const description = weather[0].description;
35
  const iconCode = weather[0].icon;
36

37
  app.innerHTML = `
38
    <div class="weather-card">
39
      <div class="weather-header">
40
        <h2>${escapeHtml(name)}</h2>
41
        <span class="country">${sys.country}</span>
42
      </div>
43

44
      <div class="weather-main">
45
        <img
46
          src="https://openweathermap.org/img/wn/${iconCode}@2x.png"
47
          alt="${description}"
48
          class="weather-icon"
49
        />
50
        <div class="temperature">${temp}°C</div>
51
      </div>
52

53
      <div class="weather-details">
54
        <div class="detail">
55
          <span class="detail-label">Feels Like</span>
56
          <span class="detail-value">${feelsLike}°C</span>
57
        </div>
58
        <div class="detail">
59
          <span class="detail-label">Humidity</span>
60
          <span class="detail-value">${main.humidity}%</span>
61
        </div>
62
        <div class="detail">
63
          <span class="detail-label">Wind</span>
64
          <span class="detail-value">${wind.speed} m/s</span>
65
        </div>
66
        <div class="detail">
67
          <span class="detail-label">Pressure</span>
68
          <span class="detail-value">${main.pressure} hPa</span>
69
        </div>
70
      </div>
71

72
      <div class="weather-description">${capitalize(description)}</div>
73
    </div>
74
  `;
75
}
76

77
export function renderForecast(forecastData) {
78
  // Group by day and get midday forecast
79
  const daily = forecastData.list.reduce((acc, item) => {
80
    const date = item.dt_txt.split(" ")[0];
81
    if (!acc[date] || item.dt_txt.includes("12:00")) {
82
      acc[date] = item;
83
    }
84
    return acc;
85
  }, {});
86

87
  const forecastHtml = Object.entries(daily)
88
    .slice(0, 5)
89
    .map(([date, item]) => {
90
      const dayName = new Date(date).toLocaleDateString("en-US", { weekday: "short" });
91
      const temp = Math.round(item.main.temp);
92
      const icon = item.weather[0].icon;
93

94
      return `
95
        <div class="forecast-day">
96
          <span class="forecast-day-name">${dayName}</span>
97
          <img src="https://openweathermap.org/img/wn/${icon}.png" alt="" />
98
          <span class="forecast-temp">${temp}°</span>
99
        </div>
100
      `;
101
    })
102
    .join("");
103

104
  const forecastSection = document.querySelector(".forecast") || document.createElement("div");
105
  forecastSection.className = "forecast";
106
  forecastSection.innerHTML = `
107
    <h3>5-Day Forecast</h3>
108
    <div class="forecast-grid">${forecastHtml}</div>
109
  `;
110

111
  app.appendChild(forecastSection);
112
}
113

114
// Helper functions
115
function escapeHtml(str) {
116
  const div = document.createElement("div");
117
  div.textContent = str;
118
  return div.innerHTML;
119
}
120

121
function capitalize(str) {
122
  return str.replace(/\b\w/g, (c) => c.toUpperCase());
123
}

Step 6: The Entry Point (app.js)

1
import { fetchCurrentWeather, fetchForecast } from "./modules/api.js";
2
import { getCachedWeather, setCachedWeather } from "./modules/storage.js";
3
import { showLoading, showError, showEmpty, renderWeather, renderForecast } from "./modules/ui.js";
4

5
const searchForm = document.querySelector("#search-form");
6
const searchInput = document.querySelector("#search-input");
7

8
let currentRequestId = 0;
9

10
async function handleSearch(event) {
11
  event.preventDefault();
12
  const city = searchInput.value.trim();
13

14
  if (!city) {
15
    showError("Please enter a city name");
16
    return;
17
  }
18

19
  // Increment to track latest request (prevents race conditions)
20
  const requestId = ++currentRequestId;
21

22
  showLoading();
23

24
  try {
25
    // Check cache first
26
    const cached = getCachedWeather(city);
27
    if (cached && requestId === currentRequestId) {
28
      renderWeather(cached.current);
29
      renderForecast(cached.forecast);
30
      return;
31
    }
32

33
    // Fetch fresh data
34
    const [currentData, forecastData] = await Promise.all([
35
      fetchCurrentWeather(city),
36
      fetchForecast(city),
37
    ]);
38

39
    // Only update UI if this is still the latest request
40
    if (requestId !== currentRequestId) return;
41

42
    // Cache the results
43
    setCachedWeather(city, {
44
      current: currentData,
45
      forecast: forecastData,
46
    });
47

48
    renderWeather(currentData);
49
    renderForecast(forecastData);
50

51
  } catch (error) {
52
    if (requestId === currentRequestId) {
53
      showError(error.message);
54
    }
55
  }
56
}
57

58
// Initialise
59
searchForm.addEventListener("submit", handleSearch);
60
showEmpty();

Step 7: HTML & CSS

1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
  <meta charset="UTF-8" />
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
  <title>Weather Dashboard</title>
7
  <link rel="stylesheet" href="styles.css" />
8
</head>
9
<body>
10
  <div class="container">
11
    <header>
12
      <h1>Weather Dashboard</h1>
13
      <form id="search-form" class="search-form">
14
        <input
15
          type="text"
16
          id="search-input"
17
          placeholder="Enter city name..."
18
          required
19
        />
20
        <button type="submit">Search</button>
21
      </form>
22
    </header>
23
    <main id="app"></main>
24
  </div>
25
  <script type="module" src="app.js"></script>
26
</body>
27
</html>

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

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: 100vh;
  color: #333;
}

.container {
  max-width: 600px;
  margin: 0 auto;
  padding: 2rem 1rem;
}

header {
  text-align: center;
  margin-bottom: 2rem;
}

header h1 {
  color: white;
  font-size: 2rem;
  margin-bottom: 1rem;
}

.search-form {
  display: flex;
  gap: 0.5rem;
  max-width: 400px;
  margin: 0 auto;
}

.search-form input {
  flex: 1;
  padding: 0.75rem 1rem;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
}

.search-form button {
  padding: 0.75rem 1.5rem;
  background: #ff6b6b;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.2s;
}

.search-form button:hover {
  background: #ee5a5a;
}

/* Loading */
.loading {
  text-align: center;
  color: white;
  padding: 3rem;
}

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid rgba(255, 255, 255, 0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin: 0 auto 1rem;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Error */
.error {
  background: #fff3f3;
  border: 1px solid #ffcdd2;
  border-radius: 12px;
  padding: 2rem;
  text-align: center;
  color: #c62828;
}

.error button {
  margin-top: 1rem;
  padding: 0.5rem 1rem;
  border: 1px solid #c62828;
  border-radius: 6px;
  background: white;
  color: #c62828;
  cursor: pointer;
}

/* Empty state */
.empty {
  text-align: center;
  color: white;
  padding: 3rem;
  opacity: 0.9;
}

/* Weather card */
.weather-card {
  background: white;
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.weather-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.country {
  background: #667eea;
  color: white;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  font-size: 0.8rem;
}

.weather-main {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.weather-icon {
  width: 80px;
  height: 80px;
}

.temperature {
  font-size: 3rem;
  font-weight: bold;
}

.weather-details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1rem;
}

.detail {
  background: #f5f5f5;
  padding: 0.75rem;
  border-radius: 8px;
  text-align: center;
}

.detail-label {
  display: block;
  font-size: 0.8rem;
  color: #666;
  margin-bottom: 0.25rem;
}

.detail-value {
  font-size: 1.1rem;
  font-weight: 600;
}

.weather-description {
  text-align: center;
  color: #666;
  font-size: 1.1rem;
}

/* Forecast */
.forecast {
  margin-top: 2rem;
  background: white;
  border-radius: 16px;
  padding: 1.5rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.forecast h3 {
  margin-bottom: 1rem;
  text-align: center;
}

.forecast-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.5rem;
}

.forecast-day {
  text-align: center;
  padding: 0.5rem;
}

.forecast-day-name {
  display: block;
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.forecast-temp {
  display: block;
  color: #666;
  font-size: 0.9rem;
}

Step 8: Run It

Open index.html in your browser (no server needed since we’re using ES modules), or use a local server:

npx serve .

Search for cities like “London”, “Tokyo”, “New York” — the dashboard will fetch and display current weather and a 5-day forecast.

Extension Ideas

Geolocation: Use the browser’s navigator.geolocation API to auto-detect the user’s city on load
Unit toggle: Add a °C / °F toggle button
Search history: Store recent searches and show them as quick-select buttons
Background images: Use the weather condition to set dynamic gradients or background images
Hourly forecast: Expand the forecast to show hourly data for the next 24 hours
Multiple cities: Allow searching and comparing weather for multiple cities simultaneously