Back to Blog
Coding for Kids

Hands-On Coding: Build a JavaScript Weather App with AI Guidance (Teens 14–17)

A practical JavaScript weather app tutorial for teens using an API and AI guidance—perfect for high school students building real web apps.

Hands-On Coding: Build a JavaScript Weather App with AI Guidance (Teens 14–17)
March 6, 2026
8 min read
#JavaScript#Web Apps#Teens

Build a Weather App (and Learn Real Web Dev Skills)

A weather app is one of the best “first real” projects for teens because it feels useful, looks impressive, and teaches the exact workflow students will use in bigger apps:

  • Build a simple interface (HTML/CSS)
  • Write logic in JavaScript
  • Request live data from an API
  • Handle errors and edge cases
  • Deploy and share

If you’re a parent, here’s the big win: this isn’t just a fun activity—it’s a concrete way to practice problem-solving, debugging, and communication skills. And with the right kind of AI help building a web app for students, teens can move faster without getting stuck for hours.

In this guide, we’ll build a beginner API project in JavaScript: a weather app that lets a user search a city and see temperature, conditions, and an icon.

What You’ll Build + What You Need

By the end, your teen will have a small web app that:

  • Takes a city name (like “Seattle”)
  • Calls a weather API
  • Displays temperature, description, and an icon
  • Shows friendly messages for common errors (empty search, city not found)

Tools (simple and free):

  • A browser (Chrome/Edge/Firefox)
  • A code editor (VS Code recommended)
  • A free weather API key (OpenWeather is common)
  • Optional: AI assistant (Intellect Council or another tool) to coach and debug

Project folder structure:

  • index.html
  • style.css
  • app.js

Parent tip: Encourage your teen to keep the first version small. A “working but plain” app is better than a half-finished fancy one.

Step-by-Step: Build the App (HTML → JS → API)

1) Create the interface (index.html)

Keep it clean: an input, a button, and a results area.

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Weather App</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <main class="card">
      <h2>Weather Finder</h2>

      <div class="row">
        <input id="cityInput" placeholder="Enter a city (e.g., Tokyo)" />
        <button id="searchBtn">Search</button>
      </div>

      <p id="status" class="status"></p>

      <section id="result" class="result" hidden>
        <div class="result-top">
          <h3 id="place"></h3>
          <img id="icon" alt="Weather icon" />
        </div>
        <p id="temp"></p>
        <p id="desc"></p>
      </section>
    </main>

    <script src="app.js"></script>
  </body>
</html>

2) Add basic styling (style.css)

This keeps it readable and “app-like” without going deep into design.

/* style.css */
body {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: linear-gradient(135deg, #e8f0ff, #f7f7ff);
  min-height: 100vh;
  display: grid;
  place-items: center;
  margin: 0;
}

.card {
  width: min(520px, 92vw);
  background: white;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

.row {
  display: flex;
  gap: 10px;
}

input {
  flex: 1;
  padding: 10px 12px;
  border: 1px solid #d9d9e3;
  border-radius: 10px;
}

button {
  padding: 10px 14px;
  border: 0;
  border-radius: 10px;
  background: #3b82f6;
  color: white;
  cursor: pointer;
}

.status {
  margin: 12px 0;
  color: #444;
}

.result-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#icon {
  width: 60px;
  height: 60px;
}

3) Add logic + API call (app.js)

We’ll use fetch() (built into the browser) and an async function.

First, get an API key (example uses OpenWeather). Then add it as a constant.

// app.js
const API_KEY = "YOUR_API_KEY_HERE";

const cityInput = document.getElementById("cityInput");
const searchBtn = document.getElementById("searchBtn");
const statusEl = document.getElementById("status");

const resultEl = document.getElementById("result");
const placeEl = document.getElementById("place");
const tempEl = document.getElementById("temp");
const descEl = document.getElementById("desc");
const iconEl = document.getElementById("icon");

function setStatus(message) {
  statusEl.textContent = message;
}

function showResult(show) {
  resultEl.hidden = !show;
}

async function getWeather(city) {
  const url = `https://api.openweathermap.org/data/2.5/weather?q=${encodeURIComponent(
    city
  )}&appid=${API_KEY}&units=metric`;

  const response = await fetch(url);
  const data = await response.json();

  // OpenWeather includes a "cod" field in JSON errors
  if (!response.ok) {
    const message = data?.message || "Something went wrong.";
    throw new Error(message);
  }

  return data;
}

function renderWeather(data) {
  const city = data.name;
  const country = data.sys.country;
  const temp = Math.round(data.main.temp);
  const desc = data.weather[0].description;
  const icon = data.weather[0].icon;

  placeEl.textContent = `${city}, ${country}`;
  tempEl.textContent = `Temperature: ${temp}°C`;
  descEl.textContent = `Conditions: ${desc}`;
  iconEl.src = `https://openweathermap.org/img/wn/${icon}@2x.png`;

  showResult(true);
}

async function handleSearch() {
  const city = cityInput.value.trim();

  if (!city) {
    showResult(false);
    setStatus("Type a city name to search.");
    return;
  }

  setStatus("Loading weather...");
  showResult(false);

  try {
    const data = await getWeather(city);
    renderWeather(data);
    setStatus("");
  } catch (err) {
    setStatus(`Could not find weather for "${city}". (${err.message})`);
  }
}

searchBtn.addEventListener("click", handleSearch);
cityInput.addEventListener("keydown", (e) => {
  if (e.key === "Enter") handleSearch();
});

Test it: Open index.html in the browser, search a city, and confirm results show.

Use AI the Smart Way: Prompts That Teach (Not Just “Do It For Me”)

Parents often ask how to use AI to learn JavaScript without turning it into copy/paste coding. The key is prompting AI like a tutor.

Here’s a practical approach:

  • Ask for explanations before asking for solutions
  • Paste errors and request a “diagnosis + fix + why it happened”
  • Ask for small improvements, one at a time
  • Request alternative options (e.g., “Can we do this without a framework?”)

AI coaching prompts teens can use

Situation Prompt to copy What your teen learns
API request isn’t working “Here is my fetch code and the error from DevTools. Explain what’s wrong, then show the minimal fix.” Debugging workflow and error reading
Confused by async/await “Explain async/await using my weather app example. Show what happens step-by-step when I click Search.” Mental model of async code
Wants to improve UI “Suggest 3 small UI upgrades for this weather app that are beginner-friendly. Provide code for only one upgrade at a time.” Incremental building, not overwhelm
Needs error handling “What edge cases should I handle in a weather app? Add friendly messages for each case.” Product thinking + robustness
Wants to learn, not copy “Don’t write the full code. Ask me 5 questions to check my understanding, then guide me to the next step.” Active learning and recall

Parent tip: If you review one prompt with your teen, choose the last one. It turns AI into a coach instead of an answer machine.

Common Mistakes (and How to Fix Them Fast)

This is where teens often get stuck. Here are the “usual suspects” and how to resolve them without frustration.

  • “Invalid API key” errors

    • Make sure the key is copied exactly
    • Some services take a few minutes to activate new keys
    • Ask AI: “What does a 401 error mean in my case?”

  • City not found (404)

    • Try adding a country code (like Paris, FR)
    • Remind teens that APIs are picky about spelling

  • CORS or blocked requests

    • If running from a local file causes issues, use a simple local server (VS Code Live Server)
    • Ask AI to explain CORS in plain language and suggest the safest fix

  • Nothing shows on screen

    • Use console.log(data) inside renderWeather to confirm the data exists
    • Check if resultEl.hidden is being toggled correctly

Safe upgrades (great for high school portfolios)

If your teen finishes early, these are excellent coding project ideas for high school students because they add complexity in a controlled way:

  • Add unit toggle (°C/°F)
  • Add recent searches (store in localStorage)
  • Show 5-day forecast (new API endpoint)
  • Add loading spinner and better empty states
  • Use geolocation (with permission) to show local weather

Next Steps: Turn This Into a Real Student Project

A weather app is a strong start, but the real learning happens when teens polish it like a product.

Here’s a simple 60–90 minute plan:

  • 15 minutes: Make it reliable

    • Add clearer error messages (empty input, not found, network error)
    • Test 5 different cities (including one misspelled on purpose)

  • 20 minutes: Add one “wow” feature

    • Unit toggle or recent searches are ideal first upgrades

  • 15 minutes: Write a short README

    • What it does
    • How to run it
    • What the hardest bug was and how they solved it

  • 10 minutes: Share it

    • Push to GitHub
    • Optional: Deploy with GitHub Pages

If your teen wants guided support, treat AI like a mentor:

  • Ask it to review code for readability (“What would you rename for clarity?”)
  • Ask for test cases (“What inputs should I try to break this?”)
  • Ask for the next feature in small steps (“Give me a 5-step plan, then wait.”)

That’s how a beginner API project in JavaScript becomes a real skill-builder—and a project your teen can proudly show in a class, club, or internship application.

Key Takeaways

  • A JavaScript weather app is a practical beginner API project that teaches real-world web app basics: UI, fetch, async, and error handling.
  • AI works best as a tutor: use prompts that request explanations, debugging help, and step-by-step guidance—not full copy/paste solutions.
  • Small upgrades like unit toggles, recent searches, and better error states turn this into a strong high school portfolio project.
Toshendra Sharma

Auther

Toshendra Sharma