codex-lv2-may-2025

🧪 Lesson 3: Build a Weather App with JavaScript Mini-Project

Tags: #lesson #level2 #javascript #weather Goal: Create a weather app using POJOs, helper functions, and Bootstrap cards. Level: Beginner web development Tools: VS Code, Git, web browser

---

📋 Lesson Overview

In this lesson, you’ll build a complete weather app that displays weather information for multiple cities. You’ll learn how to work with JavaScript objects, manipulate the DOM, and create a professional-looking interface using Bootstrap.

What you’ll build:

• A weather app using POJOs (Plain Old JavaScript Objects)
• Bootstrap cards for weather display
• Helper function integration
• Multiple city weather pages
• Interactive button functionality (optional challenges)

---

🚀 Lesson Steps

Core Steps (Required):

1. Step 1: Create the Repository - Set up your Git repository and project structure
2. Step 2: Set Up Project Files - Create the necessary files and include scripts
3. Step 3: Copy Weather Data - Get weather data from previous lessons or download fresh data
4. Step 4: Create POJO in script.js - Convert JSON data to JavaScript objects
5. Step 5: Build the Weather Card - Create Bootstrap cards with span elements
6. Step 6: Display Weather Data - Connect data to the user interface
7. Step 7: Create Multi-City Weather Pages - Scale your app to multiple cities

Optional Challenges:

1. Challenge Part 1: Add a Button - Make weather data appear only after button clicks
2. Challenge Part 2: Second City Button - Add a second city button to the same page
3. Challenge Part 3: Multiple City Buttons - Scale to multiple city buttons

---

🎯 Learning Objectives

By the end of this lesson, you will be able to:

• Set up a complete web development project with proper file structure
• Work with JavaScript POJOs and access nested data properties
• Use Bootstrap to create professional-looking user interfaces
• Manipulate the DOM to display dynamic content
• Organize code across multiple files and pages
• Implement event handling for interactive features
• Scale a project from single functionality to multiple features

---

🔗 Navigation

• ← Back to Week 6 Overview
• ← Previous: Lesson 2 - How to Use Postman
• Next: Lesson 4 - The Network Tab →

---

💡 Pro Tips

• Take it step by step: Don’t rush ahead - each step builds on the previous one
• Test frequently: Check your work after each step to catch errors early
• Use the challenges: The optional challenges will make your app much more impressive
• Ask questions: If you get stuck, review the previous step or ask for help

---

Ready to start? Begin with Step 1: Create the Repository