codex-lv2-may-2025

Level Navigation: 1

Current Level: 6

✅ Step 6: Display Weather Data

Goal: Connect your weather data to the user interface using JavaScript.

📋 What You’ll Do

Add JavaScript code to display weather data
Use the setText() function to update span elements
Connect POJO data to HTML elements

🚀 Step-by-Step Instructions

1. Add Display Code

In your script.js, add this code below your POJO:

// Display weather data
setText("temp", newOrleansWeather.current_weather.temperature);
setText("wind", newOrleansWeather.current_weather.windspeed);
setText("code", newOrleansWeather.current_weather.weathercode);

2. Understand the Code

setText(): Helper function that updates HTML elements
First parameter: ID of the span element to update
Second parameter: Data from your POJO to display

3. Test Your App

Save all files
Open index.html in your browser
You should see the weather data displayed in the card!

💡 What This Accomplishes

This step brings your weather app to life by connecting the data (POJO) to the user interface (HTML). The setText() function dynamically updates the span elements with real weather information, transforming your static HTML into a dynamic, data-driven application. This demonstrates the fundamental concept of DOM manipulation and shows how JavaScript bridges the gap between data and display.

✅ Check Your Work

Weather data displays in the card
Temperature shows with °C symbol
Wind speed shows with km/h units
Weather code displays correctly
No JavaScript errors in browser console

Ready for the next step? Continue to Step 7: Create Multi-City Weather Pages