🌐 JavaScript & DOM Manipulation

📸 Lesson Snapshot

Learn JavaScript basics and interact with web pages using the DOM! We'll compare JavaScript to C# and build an interactive Book Library webpage. (Ages 8-18)

Session Date: Saturday, March 21, 2026 at 11:00 AM EST

---

🎯 Age-Tiered Learning Goals

	🧒 Elementary (8-11)	🧑 Middle School (12-14)	🎓 High School (15-18)
🔤 JS Basics	Understand variables and functions	Use arrays and objects	Compare C# and JS patterns
🌳 DOM	Select elements by ID	Use querySelector and loops	Create dynamic content
🎮 Events	Handle click events	Work with forms and input	Build event-driven apps
💾 Storage	See data persist	Use localStorage basics	Build full CRUD with storage
🏁 By End	Click buttons to change page	Add/remove books dynamically	Complete library with persistence

---

🎨 Before You Code: Hands-On Activities (15 minutes)

🎮 Activity 1: The Document Object Model - Human Tree (Whole Class)

🎬 Setup: Students physically arrange themselves to form a DOM tree

📖 Scenario: Building a Web Page

    THE DOM IS A FAMILY TREE! 🌳

    One student is <html> (the grandparent)
              │
    ┌─────────┴─────────┐
    │                   │
  <head>             <body>
(one student)     (one student)
    │                   │
    │           ┌───────┼───────┐
  <title>    <header>  <main>  <footer>
                        │
                  ┌─────┴─────┐
                <h1>        <div>
                             │
                       ┌─────┴─────┐
                     <p>         <button>


    INSTRUCTIONS:
    1. Students hold signs with tag names
    2. They link arms with their "parent" and "children"
    3. Teacher calls out: "Find the <button>!"
    4. Trace the path: html → body → main → div → button

💬 Discussion:

"JavaScript uses the DOM to find and change elements. When we say document.getElementById('myButton'), we're asking JavaScript to walk down this family tree and find that element!"

---

💃 Activity 2: C# vs JavaScript - Translation Dance (Pairs)

🔄 One partner says C#, the other translates to JavaScript:

    C# TO JAVASCRIPT TRANSLATION 🔄

    ┌────────────────────────────────────────────────────────────┐
    │  C# (What you know)         │  JavaScript (New!)           │
    ├────────────────────────────────────────────────────────────┤
    │                             │                              │
    │  string name = "Sam";       │  let name = "Sam";           │
    │        ↓                    │       ↓                      │
    │  [Declare type explicitly]  │  [Let JS figure out type]    │
    │                             │                              │
    ├────────────────────────────────────────────────────────────┤
    │                             │                              │
    │  int age = 12;              │  let age = 12;               │
    │                             │                              │
    ├────────────────────────────────────────────────────────────┤
    │                             │                              │
    │  void SayHello() { }        │  function sayHello() { }     │
    │                             │                              │
    ├────────────────────────────────────────────────────────────┤
    │                             │                              │
    │  Console.WriteLine(x);      │  console.log(x);             │
    │                             │                              │
    ├────────────────────────────────────────────────────────────┤
    │                             │                              │
    │  List<string> books =       │  let books = [];             │
    │    new List<string>();      │                              │
    │                             │                              │
    ├────────────────────────────────────────────────────────────┤
    │                             │                              │
    │  books.Add("Harry Potter"); │  books.push("Harry Potter"); │
    │                             │                              │
    └────────────────────────────────────────────────────────────┘

    🎯 KEY INSIGHT: JavaScript is more relaxed about types!
    C# says: "Tell me EXACTLY what type this is!"
    JavaScript says: "I'll figure it out, don't worry!"

💡 Key Insight:

"You already know programming! JavaScript just uses different words for the same ideas."

---

🃏 Activity 3: Event Listener Telephone (Groups of 5)

📱 Pass a message through the chain:

    EVENT FLOW - Like a Game of Telephone! 📞

    ┌─────────┐    ┌─────────┐    ┌─────────┐    ┌─────────┐    ┌─────────┐
    │  USER   │───▶│ BROWSER │───▶│   DOM   │───▶│  YOUR   │───▶│ PAGE    │
    │ clicks  │    │ detects │    │ creates │    │  CODE   │    │ UPDATES │
    │ button  │    │  click  │    │ "event" │    │  runs   │    │   ✨    │
    └─────────┘    └─────────┘    └─────────┘    └─────────┘    └─────────┘

    ROLE PLAY:
    1. 👆 Student 1 (User): "I clicked the Add Book button!"
    2. 🖥️ Student 2 (Browser): "Click detected at button#addBook!"
    3. 📋 Student 3 (DOM): "Creating click event with target: addBook"
    4. 💻 Student 4 (Code): "Running addBook function!"
    5. ✨ Student 5 (Page): "New book card appears on screen!"

    This is EXACTLY what happens with:
    button.addEventListener('click', addBook);

🎯 Takeaway:

"Events are how your webpage LISTENS for user actions. You're setting up a listener that waits patiently until something happens!"

---

🗺️ Visual: The DOM Tree

    HOW JAVASCRIPT SEES YOUR WEB PAGE 🌳

                          document
                              │
                              │
                            <html>
                              │
                ┌─────────────┴─────────────┐
                │                           │
             <head>                       <body>
                │                           │
         ┌──────┴──────┐          ┌─────────┼─────────┐
         │             │          │         │         │
      <title>       <link>    <header>   <main>   <footer>
    "Book Library"  CSS file     │         │
                                 │    ┌────┴────┐
                              <h1>  <form>   <div>
                                           id="bookList"
                                              │
                                        ┌─────┼─────┐
                                        │     │     │
                                     <div>  <div>  <div>
                                     book1  book2  book3


    🔍 FINDING ELEMENTS:

    document.getElementById('bookList')
    └──────────────────────────────────┘
              │
              ▼
    Returns the <div id="bookList"> element!

    document.querySelector('.book-card')
    └────────────────────────────────────┘
              │
              ▼
    Returns the FIRST element with class "book-card"

    document.querySelectorAll('.book-card')
    └──────────────────────────────────────┘
              │
              ▼
    Returns ALL elements with class "book-card" (as a list!)

---

🗺️ Visual: Event Flow

    HOW EVENTS WORK IN JAVASCRIPT 🎯

    STEP 1: SET UP A LISTENER 👂
    ─────────────────────────────────────────────

    const button = document.getElementById('addBtn');

    button.addEventListener('click', handleClick);
    │           │              │         │
    │           │              │         └── Function to run
    │           │              └── What event to listen for
    │           └── "Hey, listen for events!"
    └── The element we're watching


    STEP 2: USER INTERACTS 👆
    ─────────────────────────────────────────────

         🖱️ User clicks the button
                   │
                   ▼
         ┌─────────────────────┐
         │   CLICK EVENT! 💥    │
         │                     │
         │  target: <button>   │
         │  type: "click"      │
         │  timestamp: 12345   │
         └─────────────────────┘
                   │
                   ▼
         Your function runs! 🚀


    STEP 3: YOUR CODE RESPONDS 💻
    ─────────────────────────────────────────────

    function handleClick(event) {
        console.log("Button was clicked!");
        // Add a new book, show a message, etc.
    }


    COMMON EVENTS 📋
    ─────────────────────────────────────────────
    'click'     → User clicks something
    'submit'    → Form is submitted
    'input'     → Text is typed in a field
    'keydown'   → Key is pressed
    'mouseover' → Mouse hovers over element
    'load'      → Page finishes loading

---

📁 Folder & File Map

Session17/
├── README.md           ← 📖 This lesson plan
├── index.html          ← 🌐 The webpage structure
├── styles.css          ← 🎨 Makes it look pretty
├── script.js           ← 💻 JavaScript code (the magic!)
└── .gitignore          ← 🚫 Files Git should ignore

---

✅ Prerequisites

• ✅ Completed Sessions 1-15 (C# fundamentals & API)
• ✅ Understanding of variables, functions, and loops
• ✅ Basic understanding of HTML from Session 16

---

🛠️ Step-by-Step Build Guide

1️⃣ Fork and Clone

• Go to GitHub and Fork the Session17 repository
• Clone to your computer: git clone https://github.com/YOUR-USERNAME/Session17-JavaScript.git

---

2️⃣ Explore the HTML Structure

📄 Open index.html and examine:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>📚 My Book Library</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>📚 My Book Library</h1>
    </header>

    <main>
        <!-- 📝 Form to add new books -->
        <form id="bookForm">
            <input type="text" id="titleInput" placeholder="Book Title" required>
            <input type="text" id="authorInput" placeholder="Author" required>
            <button type="submit">➕ Add Book</button>
        </form>

        <!-- 📚 Where our books will appear -->
        <div id="bookList"></div>
    </main>

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

🔍 Key parts:

    HTML STRUCTURE BREAKDOWN 📋

    <form id="bookForm">
    └── Has an ID so JavaScript can find it!

    <input id="titleInput">
    └── We'll get the typed value from here

    <div id="bookList">
    └── Empty now, JavaScript will fill it with books!

    <script src="script.js">
    └── Loads our JavaScript file (put at bottom!)

---

3️⃣ Connect JavaScript to HTML

📄 Open script.js and start coding:

// 🎯 STEP 1: Wait for the page to load
document.addEventListener('DOMContentLoaded', function() {
    console.log('🚀 Page loaded! JavaScript is ready!');

    // All our code goes inside here
});

💡 Why wait for DOMContentLoaded?

    PAGE LOADING TIMELINE ⏱️

    ┌─────────────────────────────────────────────────────────────┐
    │ 1. Browser starts downloading HTML                          │
    │ 2. Browser parses HTML, building the DOM tree               │
    │ 3. Browser hits <script> tag                                │
    │ 4. JavaScript tries to run...                               │
    │                                                             │
    │    ❌ WITHOUT DOMContentLoaded:                             │
    │    JavaScript might run before elements exist!              │
    │    document.getElementById('bookList') = null 😱            │
    │                                                             │
    │    ✅ WITH DOMContentLoaded:                                │
    │    JavaScript waits until DOM is fully built               │
    │    document.getElementById('bookList') = <div> 🎉          │
    └─────────────────────────────────────────────────────────────┘

---

4️⃣ Select DOM Elements

📄 Add to script.js:

document.addEventListener('DOMContentLoaded', function() {

    // 🎯 STEP 2: Grab references to our HTML elements
    const bookForm = document.getElementById('bookForm');
    const titleInput = document.getElementById('titleInput');
    const authorInput = document.getElementById('authorInput');
    const bookList = document.getElementById('bookList');

    console.log('📝 Form found:', bookForm);
    console.log('📚 Book list found:', bookList);

});

🔍 Compare to C#:

    SELECTING ELEMENTS: C# vs JavaScript

    ┌─────────────────────────────────────────────────────────────┐
    │  C# (Finding a control in WinForms/WPF)                     │
    │  ─────────────────────────────────────────                  │
    │  TextBox titleBox = this.Controls.Find("titleInput");       │
    │                                                             │
    │  JavaScript (Finding an element in DOM)                     │
    │  ─────────────────────────────────────────                  │
    │  const titleInput = document.getElementById('titleInput');  │
    │                                                             │
    │  Same concept! Different syntax! ✨                         │
    └─────────────────────────────────────────────────────────────┘

---

5️⃣ Create Your First Array

📄 Add a books array:

document.addEventListener('DOMContentLoaded', function() {
    // ... element references from Step 4 ...

    // 🎯 STEP 3: Create an array to store our books
    let books = [];

    // 📚 Let's start with some sample books
    books = [
        { id: 1, title: 'Harry Potter', author: 'J.K. Rowling' },
        { id: 2, title: 'The Hobbit', author: 'J.R.R. Tolkien' },
        { id: 3, title: 'Diary of a Wimpy Kid', author: 'Jeff Kinney' }
    ];

    console.log('📚 Books:', books);
});

🔍 Compare to C#:

    ARRAYS/LISTS: C# vs JavaScript

    ┌─────────────────────────────────────────────────────────────┐
    │  C# (Typed List with Class)                                 │
    │  ─────────────────────────────────────────                  │
    │  List<Book> books = new List<Book>                          │
    │  {                                                          │
    │      new Book { Id = 1, Title = "Harry Potter" },           │
    │      new Book { Id = 2, Title = "The Hobbit" }              │
    │  };                                                         │
    │                                                             │
    │  JavaScript (Flexible Array with Objects)                   │
    │  ─────────────────────────────────────────                  │
    │  let books = [                                              │
    │      { id: 1, title: 'Harry Potter' },                      │
    │      { id: 2, title: 'The Hobbit' }                         │
    │  ];                                                         │
    │                                                             │
    │  🔑 KEY DIFFERENCES:                                        │
    │  • JS uses let instead of List<Type>                        │
    │  • JS objects use { } without "new"                         │
    │  • JS properties are lowercase by convention                │
    │  • JS uses single quotes ' ' (or double " ")                │
    └─────────────────────────────────────────────────────────────┘

---

6️⃣ Display Books on the Page

📄 Add a function to render books:

// 🎯 STEP 4: Function to display all books
function displayBooks() {
    // Clear the current list
    bookList.innerHTML = '';

    // Loop through each book and create HTML
    books.forEach(function(book) {
        // Create a new div for this book
        const bookCard = document.createElement('div');
        bookCard.className = 'book-card';
        bookCard.setAttribute('data-id', book.id);

        // Set the content
        bookCard.innerHTML = `
            <h3>📖 ${book.title}</h3>
            <p>✍️ by ${book.author}</p>
            <button class="delete-btn" onclick="deleteBook(${book.id})">
                🗑️ Delete
            </button>
        `;

        // Add it to the page
        bookList.appendChild(bookCard);
    });

    console.log('📚 Displayed', books.length, 'books');
}

// Call it to show initial books
displayBooks();

🔍 What's happening:

    CREATING ELEMENTS DYNAMICALLY 🏗️

    document.createElement('div')
    └── Creates a new <div> element (not on page yet!)

    bookCard.className = 'book-card'
    └── Adds the CSS class for styling

    bookCard.innerHTML = `...`
    └── Sets the HTML content inside the div
        (The ` ` backticks allow multi-line strings!)

    bookList.appendChild(bookCard)
    └── Actually adds the element to the page!

    ┌─────────────────────────────────────────────────────────────┐
    │  Before appendChild:     │  After appendChild:              │
    │                          │                                  │
    │  <div id="bookList">     │  <div id="bookList">             │
    │  </div>                  │      <div class="book-card">     │
    │                          │          📖 Harry Potter         │
    │  (Empty!)                │      </div>                      │
    │                          │  </div>                          │
    │                          │                                  │
    │                          │  (Book appears! ✨)              │
    └─────────────────────────────────────────────────────────────┘

---

7️⃣ Handle Form Submission

📄 Add event listener for the form:

// 🎯 STEP 5: Listen for form submissions
bookForm.addEventListener('submit', function(event) {
    // 🛑 Stop the form from refreshing the page!
    event.preventDefault();

    // Get the values from the input fields
    const title = titleInput.value.trim();
    const author = authorInput.value.trim();

    // Validate - make sure fields aren't empty
    if (title === '' || author === '') {
        alert('⚠️ Please fill in both fields!');
        return;
    }

    // Create a new book object
    const newBook = {
        id: Date.now(),  // Use timestamp as unique ID
        title: title,
        author: author
    };

    // Add to our array
    books.push(newBook);

    // Update the display
    displayBooks();

    // Clear the form
    titleInput.value = '';
    authorInput.value = '';

    console.log('✅ Added new book:', newBook);
});

🔍 Why event.preventDefault()?

    FORM BEHAVIOR 📝

    DEFAULT BEHAVIOR (without preventDefault):
    ┌─────────────────────────────────────────────────────────────┐
    │ 1. User clicks "Add Book"                                   │
    │ 2. Form tries to submit to a server                         │
    │ 3. Page refreshes! 😱                                       │
    │ 4. All your JavaScript variables are GONE!                  │
    │ 5. Books array is reset to empty! 💔                        │
    └─────────────────────────────────────────────────────────────┘

    WITH preventDefault():
    ┌─────────────────────────────────────────────────────────────┐
    │ 1. User clicks "Add Book"                                   │
    │ 2. event.preventDefault() says "STOP! Don't refresh!"       │
    │ 3. Our JavaScript code runs instead ✨                      │
    │ 4. We handle the data ourselves                             │
    │ 5. Page stays loaded, books are safe! 🎉                    │
    └─────────────────────────────────────────────────────────────┘

---

8️⃣ Delete a Book

📄 Add delete function (outside the DOMContentLoaded):

// 🎯 STEP 6: Function to delete a book
// (This needs to be global so onclick can find it)
function deleteBook(id) {
    // Confirm before deleting
    if (!confirm('Are you sure you want to delete this book?')) {
        return;
    }

    // Filter out the book with this ID
    books = books.filter(function(book) {
        return book.id !== id;
    });

    // Update the display
    displayBooks();

    // Save to localStorage
    saveBooks();

    console.log('🗑️ Deleted book with ID:', id);
}

🔍 Compare to C#:

    FILTERING/REMOVING: C# vs JavaScript

    ┌─────────────────────────────────────────────────────────────┐
    │  C# (LINQ)                                                  │
    │  ─────────────────────────────────────────                  │
    │  books = books.Where(b => b.Id != id).ToList();             │
    │                                                             │
    │  JavaScript (Array filter)                                  │
    │  ─────────────────────────────────────────                  │
    │  books = books.filter(book => book.id !== id);              │
    │                                                             │
    │  Same idea! Both create a NEW list without that item! 🎯    │
    └─────────────────────────────────────────────────────────────┘

---

9️⃣ Add Local Storage

📄 Add functions to save and load:

// 🎯 STEP 7: Save books to localStorage
function saveBooks() {
    // Convert array to JSON string and save
    localStorage.setItem('myBooks', JSON.stringify(books));
    console.log('💾 Books saved to localStorage!');
}

// 🎯 STEP 8: Load books from localStorage
function loadBooks() {
    const savedBooks = localStorage.getItem('myBooks');

    if (savedBooks) {
        // Parse JSON string back to array
        books = JSON.parse(savedBooks);
        console.log('📂 Loaded', books.length, 'books from storage!');
    } else {
        // No saved books, use defaults
        books = [
            { id: 1, title: 'Harry Potter', author: 'J.K. Rowling' },
            { id: 2, title: 'The Hobbit', author: 'J.R.R. Tolkien' }
        ];
        console.log('📚 Using default books');
    }
}

🔍 What is localStorage?

    LOCAL STORAGE - Your Browser's Memory 💾

    ┌─────────────────────────────────────────────────────────────┐
    │  localStorage is like a tiny database in your browser!      │
    │                                                             │
    │  ┌─────────────────────────────────────────────────────┐   │
    │  │  Browser Storage                                     │   │
    │  │                                                       │   │
    │  │  KEY              │  VALUE                            │   │
    │  │  ─────────────────┼───────────────────────────────── │   │
    │  │  "myBooks"        │  "[{id:1,title:'Harry Potter'}]" │   │
    │  │  "userName"       │  "Sam"                            │   │
    │  │  "darkMode"       │  "true"                           │   │
    │  └─────────────────────────────────────────────────────┘   │
    │                                                             │
    │  📌 Data persists even after closing the browser!           │
    │  📌 Each website has its own storage (can't see others)     │
    │  📌 Limited to ~5-10MB per website                          │
    └─────────────────────────────────────────────────────────────┘

    METHODS:
    localStorage.setItem('key', 'value')  ← Save data
    localStorage.getItem('key')           ← Read data
    localStorage.removeItem('key')        ← Delete data
    localStorage.clear()                  ← Delete ALL data

---

🔟 Put It All Together

📄 Complete script.js structure:

// 🚀 Book Library - JavaScript Edition!

// Books array (will be loaded from storage)
let books = [];

// DOM Elements (set in DOMContentLoaded)
let bookForm, titleInput, authorInput, bookList;

// 💾 Save books to localStorage
function saveBooks() {
    localStorage.setItem('myBooks', JSON.stringify(books));
}

// 📂 Load books from localStorage
function loadBooks() {
    const saved = localStorage.getItem('myBooks');
    if (saved) {
        books = JSON.parse(saved);
    } else {
        books = [
            { id: 1, title: 'Harry Potter', author: 'J.K. Rowling' },
            { id: 2, title: 'The Hobbit', author: 'J.R.R. Tolkien' }
        ];
    }
}

// 📚 Display all books
function displayBooks() {
    bookList.innerHTML = '';
    books.forEach(function(book) {
        const card = document.createElement('div');
        card.className = 'book-card';
        card.innerHTML = `
            <h3>📖 ${book.title}</h3>
            <p>✍️ by ${book.author}</p>
            <button class="delete-btn" onclick="deleteBook(${book.id})">🗑️ Delete</button>
        `;
        bookList.appendChild(card);
    });
}

// 🗑️ Delete a book
function deleteBook(id) {
    if (confirm('Delete this book?')) {
        books = books.filter(book => book.id !== id);
        displayBooks();
        saveBooks();
    }
}

// 🎬 When page loads
document.addEventListener('DOMContentLoaded', function() {
    // Get DOM elements
    bookForm = document.getElementById('bookForm');
    titleInput = document.getElementById('titleInput');
    authorInput = document.getElementById('authorInput');
    bookList = document.getElementById('bookList');

    // Load saved books
    loadBooks();
    displayBooks();

    // Handle form submit
    bookForm.addEventListener('submit', function(event) {
        event.preventDefault();

        const title = titleInput.value.trim();
        const author = authorInput.value.trim();

        if (title && author) {
            books.push({
                id: Date.now(),
                title: title,
                author: author
            });
            displayBooks();
            saveBooks();
            bookForm.reset();
        }
    });

    console.log('📚 Book Library loaded!');
});

---

1️⃣1️⃣ Commit Your Code

git add .
git commit -m "Add interactive book library with JavaScript"
git push origin main

---

💬 Group Reflection (5 minutes)

🔄 Circle Share - Answer one:

1. "The biggest difference between C# and JavaScript is..."
2. "DOM manipulation lets me..."
3. "localStorage is useful because..."
4. "Events in JavaScript are like..."

---

✅ Run & Test Checklist

• 🌐 Open index.html in browser (double-click or Live Server)
• 📚 Initial books display on page load
• ➕ Can add new books with form
• ⚠️ Empty fields show alert
• 🗑️ Can delete books with confirmation
• 💾 Books persist after page refresh (localStorage works!)
• 🔧 No errors in browser console (F12 → Console)

---

🚀 Bonus Challenges

⭐ Challenge 1: Search/Filter (All Levels)

Add a search box that filters books as you type:

// Hint: Use the filter method and check if title includes search term
books.filter(book => book.title.toLowerCase().includes(searchTerm))

⭐⭐ Challenge 2: Edit Books (Middle+)

Add an "Edit" button that lets you modify a book's title or author.

⭐⭐⭐ Challenge 3: Connect to Your API! (High School)

Replace localStorage with fetch() calls to your C# API from Sessions 11-15:

// Hint: Use fetch to call your API
fetch('http://localhost:5000/api/books')
    .then(response => response.json())
    .then(data => { books = data; displayBooks(); });

⭐⭐⭐ Challenge 4: Animations (High School)

Add CSS animations when books are added or deleted:

.book-card {
    animation: fadeIn 0.3s ease-in;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

---

📖 Vocabulary Wall

Term	📝 Kid-Friendly Definition	💻 C# Comparison
🌳 DOM	The tree structure of your webpage that JavaScript can read and change	Like a UI form's Controls collection
📝 let/const	Ways to declare variables in JavaScript	Like var or string in C#
🔧 function	A reusable block of code	Same as C# methods!
📋 Array	A list that holds multiple items	Like List<T> in C#
📦 Object	A container with properties	Like a C# class instance
🎯 Event	Something that happens (click, type, etc.)	Like button click handlers
👂 addEventListener	Tell JS to watch for an event	Like button.Click += handler
💾 localStorage	Browser storage that persists	Like saving to a file
🔄 JSON	Text format for data	Same JSON we used in APIs!
📍 getElementById	Find one element by its ID	Like FindControl()
🔍 querySelector	Find elements with CSS selectors	Like LINQ queries for DOM

---

🏠 Take-Home Connection

👨‍👩‍👧 Talk to a family member:

"Today I learned JavaScript! It's the language that makes websites interactive. When you click a button on a website and something happens without the page reloading - that's JavaScript! I built a book library where I can add and remove books, and it remembers them even after I close the browser."

🌍 Real-world examples:

• 🛒 Adding items to a shopping cart
• ❤️ Clicking "Like" on social media
• 🔍 Google's search suggestions as you type
• 💬 Chat messages appearing in real-time

📝 Activity: Open your browser's Developer Tools (F12) on any website and type in the Console:

document.body.style.backgroundColor = 'lightblue';

Watch the page change! You just used JavaScript!

---

🎉 What's Next?

    SESSION 17 COMPLETE! 🏆

    ┌─────────────────────────────────────────────────────────────┐
    │                                                             │
    │  ✅ You learned:                                            │
    │     • JavaScript syntax (compared to C#)                    │
    │     • DOM selection and manipulation                        │
    │     • Event handling                                        │
    │     • localStorage for persistence                          │
    │                                                             │
    │  🔮 Coming in Session 18: Fetch API & Async JavaScript      │
    │     • Connect your frontend to your C# API!                 │
    │     • Learn about Promises and async/await                  │
    │     • Build a full-stack application!                       │
    │                                                             │
    └─────────────────────────────────────────────────────────────┘

You're now a polyglot programmer - you know C# AND JavaScript! 🎉