unit-1-lesson-7.md

Lesson 1.7: DOM Manipulation, Part 2 & Project Work Time

Lesson Materials

📖 Link Materials to Class Agenda:

• Slides (make a copy for your program - link the copy)
• Coding Exercise(s)
• Exit Ticket

Key Points

• 👋 Welcome & Do Now (10):

• ⌨️ String Interpolation (10):

• Explain String Interpolation

  • Definition: Process that allows embedding values within a string.
  • Introduce template literals: Combining values within strings.

• Syntax:

  • Using backticks (``)
  • Inserting variables or expressions with ${...}

• Examples:

  let name = 'John';
  let greeting = `Hello, ${name}!`;
  console.log(greeting);  // Output: Hello, John!

• 📦 Storing Input Values (15):

  • Discussion:
    • Talk about input fields encountered online.
    • Share experiences on the last time students used input fields.
  • Introduction to Input Fields:
    • Define input fields: HTML elements that allow user data input.
    • Discuss importance in the digital world.
  • Create an Input Field:
    • Show how to create an input field in HTML.
    • Show how to create a button in HTML.
    • Teach storing input data in JavaScript variables using .value.
    • Practice:
    • Create an input field and button in HTML.
    • In JS, declare a variable to store input values.
    • Introduce the use of .innerHTML to display variable's value.

• ✨ DOM & Styling (10):

  • Changing Styling with JS:
    • Explain the need to change styling dynamically.
    • Introduce the .style property.
    • Syntax:
    • selector.style.cssProperty = "value";
  • Steps for Styling with JS:
    • Variables: to store HTML elements.
    • .style Property: access element styling.
    • CSS Property: define which property to update.
    • Value: define new value for the property.
  • Examples:
    • Changing the background color and text color of a header.
  • Note: Remember camelCasing for CSS properties (e.g., fontSize instead of font-size).

• 💻 Code Solo (15):

  • Individual activity where students apply what they've learned.

• ⏳ Break (10):

• 💻 Project Work Time (40):

  • Instruction:
    • Open Project Planning Doc and project in Replit.
    • Complete pending tasks.
    • Add contact information.
    • CSS styling: Format images and add other stylistic elements.
    • Optional extensions for those who finish early.
  • Push Work to GitHub:
    • Show students how to push their work to GitHub from Replit.
  • Activity:
    • Allow students to work on their projects.

• 👋 Closing (10):

  • Direct students to "Lesson 1.7 - DOM Manipulation, Part 2" Exit Ticket in the Class Agenda.
  • Ensure all students complete and submit the exit ticket.
  • Wrap-up and any final questions.