My favorite moment in teaching kids to code is when they build something that connects to the real world. Not a tutorial exercise, not a toy problem, something that actually does something. A weather app is perfect for this. Your kid types in "Tokyo" and gets back the actual temperature in Tokyo, right now. That moment? Pure magic.
Building a simple weather app in JavaScript is one of the best beginner projects out there. It covers real concepts: talking to APIs, updating a web page dynamically, handling user input, without requiring months of experience. And the best part: a 10-year-old can do it in an afternoon.
What is an API?
Before we write any code, let's talk about the big idea behind this project.
An API (Application Programming Interface) is a way for your code to ask another computer for information. When your kid's weather app needs to know the temperature in London, it sends a request to a weather service's API, and that service sends back the data. Think of it like ordering food at a restaurant, you don't need to know how the kitchen works, you just need to know what to ask for.
Weather apps are one of the best beginner projects because they teach this concept so naturally. Your kid isn't just learning abstract programming theory. They're learning how real apps, the ones on their phone that actually work.
For this project, we'll use freeCodeCamp's weather proxy. That means no sign-ups, no API keys, no credit cards. Just a URL your code can talk to. (If your kid wants to level up later, OpenWeatherMap is a popular free weather API used by beginners and professionals alike.)
Setting up the project files
We need three files. That's it. This structure, separating HTML, CSS, and JavaScript, is how real web developers organize their work, so your kid is learning good habits from day one.
Create a folder called weather-app and add these files:
index.html— the page structurestyle.css— how it looksapp.js— how it works
Here's the HTML to start with:
<!DOCTYPE html>
<html>
<head>
<title>My Weather App</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>🌤️ Weather Finder</h1>
<input type="text" id="cityInput" placeholder="Type a city name...">
<button id="searchBtn">Search</button>
<div id="weatherCard"></div>
<script src="app.js"></script>
</body>
</html>
Nothing fancy. An input box, a button, and an empty div where we'll display the weather. Your kid can style it however they want with CSS later — I'd encourage wild colors and big fonts. This is their app.
Writing the JavaScript that fetches weather data
Here's where it gets fun. This is the core of the app, the code that talks to the weather API and displays the result.
// Grab the elements from our HTML
const searchBtn = document.getElementById('searchBtn');
const cityInput = document.getElementById('cityInput');
const weatherCard = document.getElementById('weatherCard');
// This function asks the API for weather data
async function getWeather(city) {
try {
const response = await fetch(
`https://weather-proxy.freecodecamp.rocks/api/city/${city}`
);
const data = await response.json();
// Show the weather on the page
weatherCard.innerHTML = `
<h2>${data.name}</h2>
<p>${data.main.temp}°C</p>
<p>${data.weather[0].description}</p>
`;
} catch (error) {
weatherCard.innerHTML = `<p>Oops! Couldn't find that city. Try again?</p>`;
}
}
// When the button is clicked, search for the city
searchBtn.addEventListener('click', function() {
const city = cityInput.value;
if (city) {
getWeather(city);
}
});
Let's walk through what's happening.
The async and await keywords are how modern JavaScript handles things that take time, like waiting for a weather service to respond. Instead of complicated chains of .then() calls, async/await reads almost like plain English: "wait for the response, then wait to convert it to data we can use." It's cleaner, and it clicks faster for younger learners.
The try/catch block handles errors. What happens if someone types "asdfghjkl" as a city name? Instead of the app breaking silently, it shows a friendly message. This teaches kids to think about what could go wrong.
And addEventListener? That's how we tell the browser, "When someone clicks this button, run this function." Event listeners are everywhere in web development.
Making it look good (and adding some polish)
Once the basic app works, encourage your kid to make it their own. Here are a few ideas that also teach new concepts:
Add weather emojis. Map the weather description to an emoji: "clear sky" gets ☀️, "rain" gets 🌧️, "snow" gets ❄️. This is a great excuse to practice if/else statements.
Format the city name. If someone types "new york" in all lowercase, the app can capitalize it properly. This teaches string manipulation, a skill they'll use constantly.
Let the Enter key trigger the search. Right now, you have to click the button. Adding a keypress listener for the Enter key is just a few lines of code:
cityInput.addEventListener('keypress', function(event) {
if (event.key === 'Enter') {
const city = cityInput.value;
if (city) getWeather(city);
}
});
These aren't just cosmetic upgrades. Each one introduces a new programming concept in a context that makes sense. Your kid isn't learning "string methods" in the abstract — they're fixing a real problem in their real app.
Where to go from here
Once your kid has a working weather app, they've crossed a meaningful threshold. They've written code that talks to the internet, processes real data, and displays it in a way humans can read. That's not a toy project. That's how software actually works.
Some natural next steps: add a 5-day forecast (the API supports it), let users save favorite cities, or add background images that change based on the weather. Each extension builds on what they've already learned.
The bigger takeaway is confidence. I've watched kids go from "I don't think I can do this" to refreshing their weather app every five minutes to check if the temperature changed. That curiosity is what keeps them going through harder projects, trickier bugs, and eventually into building things none of us have thought of yet.
If your kid enjoyed this kind of project, Learnspace's interactive JavaScript lessons are designed around exactly this approach: real projects, real code, real results. No lectures, no busywork. Just building things that work. Get started and see what your kid creates next.