🌐 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:

"The biggest difference between C# and JavaScript is..."
"DOM manipulation lets me..."
"localStorage is useful because..."
"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! 🎉

Navigation Menu

Repository navigation

README.md

README.md

🌐 JavaScript & DOM Manipulation

📸 Lesson Snapshot

🎯 Age-Tiered Learning Goals

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

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

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

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

🗺️ Visual: The DOM Tree

🗺️ Visual: Event Flow

📁 Folder & File Map

✅ Prerequisites

🛠️ Step-by-Step Build Guide

1️⃣ Fork and Clone

2️⃣ Explore the HTML Structure

3️⃣ Connect JavaScript to HTML

4️⃣ Select DOM Elements

5️⃣ Create Your First Array

6️⃣ Display Books on the Page

7️⃣ Handle Form Submission

8️⃣ Delete a Book

9️⃣ Add Local Storage

🔟 Put It All Together

1️⃣1️⃣ Commit Your Code

💬 Group Reflection (5 minutes)

✅ Run & Test Checklist

🚀 Bonus Challenges

⭐ Challenge 1: Search/Filter (All Levels)

⭐⭐ Challenge 2: Edit Books (Middle+)

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

⭐⭐⭐ Challenge 4: Animations (High School)

📖 Vocabulary Wall

🏠 Take-Home Connection

🎉 What's Next?

FilesExpand file tree

README.md

Latest commit

History

README.md

File metadata and controls

🌐 JavaScript & DOM Manipulation

📸 Lesson Snapshot

🎯 Age-Tiered Learning Goals

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

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

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

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

🗺️ Visual: The DOM Tree

🗺️ Visual: Event Flow

📁 Folder & File Map

✅ Prerequisites

🛠️ Step-by-Step Build Guide

1️⃣ Fork and Clone

2️⃣ Explore the HTML Structure

3️⃣ Connect JavaScript to HTML

4️⃣ Select DOM Elements

5️⃣ Create Your First Array

6️⃣ Display Books on the Page

7️⃣ Handle Form Submission

8️⃣ Delete a Book

9️⃣ Add Local Storage

🔟 Put It All Together

1️⃣1️⃣ Commit Your Code

💬 Group Reflection (5 minutes)

✅ Run & Test Checklist

🚀 Bonus Challenges

⭐ Challenge 1: Search/Filter (All Levels)

⭐⭐ Challenge 2: Edit Books (Middle+)

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

⭐⭐⭐ Challenge 4: Animations (High School)

📖 Vocabulary Wall

🏠 Take-Home Connection

🎉 What's Next?