Intermediate DOM Manipulation Solutions

Warm Up

List out all the ways you know how to manipulate the DOM so far.

  • Access elements from the DOM
  • Change the text of an element
  • Place an event listener on an element
  • Add, remove, or toggle a CSS class of an element
  • use .css to change any specific CSS property

Place each sticky note on the board.

If you want to use this as a CFU opportunity, one way you can utilize this is by having a confidence scale on the board. Have scholars place each sticky note somewhere between “I need some help with doing this” and “I feel really comfortable doing this”. Based on the outcomes of this activity, you may decide to hold a review session before diving into this lesson.

Check It Out: Basic Append

First, answer the following questions with your partner:

If you compare the HTML to what you see in the browser, you’ll notice that “Make coffee” and the other 2 to-dos are not in the HTML.

  • What code got them to appear in the browser?
    • Lines 4-6 got them to appear. .append() was called on the list element 3 times, each time appending a paragraph tag with text. That text appears in the browser.
  • Why did those three to-dos appear in the To Do List, and not in the Notes section?
    • Because .append() was called on the variable list which stores the HTML element with the class of to-do-list.

Now, to learn more about how .append(), take the following steps to tinker with it:

  • On line 5, delete the back ticks that enclose the paragraph that says Put laptop in backpack. What happens? (When you’re done exploring this, add the back ticks back in.)
    • The syntax highlighting changes in the JS pane, the red exclamation mark appears in the bottom-right corner of the JS pane, and that .append() and the one below it no longer work. This is because we caused an error on line 5 that stopped the rest of the program to run.
  • On line 6, change the p tags to h3 tags. Does .append() still work the same way? Try out a few different tags as well!
    • Yes, but now it appends an h3!
  • Append 3 more to-dos to the bottom of the list.
list.append(`<p>Make coffee</p>`);
list.append(`<p>Put laptop in backpack</p>`);
list.append(`<p>Get leftovers out of fridge</p>`);
list.append(`<p>Set up new desk</p>`);
list.append(`<p>Water the flowers</p>`);
list.append(`<p>Walk the dog!</p>`);
  • Append a paragraph that says “Shower!”, but make sure that it shows up first on the list.
list.append(`<p>Shower!</p>`);
list.append(`<p>Make coffee</p>`);
list.append(`<p>Put laptop in backpack</p>`);
list.append(`<p>Get leftovers out of fridge</p>`);
list.append(`<p>Set up new desk</p>`);
list.append(`<p>Water the flowers</p>`);
list.append(`<p>Walk the dog!</p>`);
  • Append at least 2 paragraphs tags to the Notes section.
notes.append(`<p>The coffee was too weak. Try with another scoop of grounds tomorrow.</p>`);
notes.append(`<p>The route we took for the dog walk took 12 minutes - the dogs really need 20 minutes. Go one block further tomorrow!</p>`);

Turn & Talk: When to Append

With your partner, write out a list (pseudo-code) of things we want to the computer to do to make a working to-do list, in order. Include in the order: when the user would interact.

Possible pseudo-code/ordered list:

  • User types in input
  • User clicks submit
  • User sees their input on a card
  • User can type in another input, click submit
  • User sees both inputs on their own cards

Another way a scholar might see it/think through it:

  • Listen for a click on the “add to do” button
  • Once that button is clicked, access the text inside the relevant input fields
  • Take that string/those strings and add them to the list

Note: this “solution” intentionally didn’t use any specific JavaScript terminology. Psuedo-coding should be a space where a developer can think through the basics of the directions that need to be provided BEFORE carrying the burden of translating that into a programming language.

Turn & Talk: Append

  • What are the two steps that are taken inside the event listener?
    1. Access the input element and get the value from it, store in a variable called name
    2. Append a new HTML element to the cardContainer - a p tag that holds the name that was determined in the first step
  • When a name is submitted, the card that it is displayed on has a white background. Where in the code was this style applied? How did the HTML element know about that style?
    • The p tag that was added in the .append() has a name-card class on it. In our CSS file, we have a rule that targets all .name-card elements.
  • Try to add another p element inside the append. What happens when you add another name now?
    • Both will be added! This tells me that I can put as much HTML as I’d like inside those back-ticks.
  • As a user, are there any changes you would like to be made to make this site more user-friendly?
    • I’d like the input field to clear out after I click “Add Someone Awesome”. (The code for that is commented out on line 13.)

Try It: Append

See the Pen Try It: Append with Event Listener Solution by Turing KWK (@turing-kwk) on CodePen.

Medium Challenge: As a user, it’s kind of frustrating when you want to type a second to-do, but first have to delete your previous input. Add in the functionality that clears the input field as soon as the user clicks the “Add to To-Do List” button.

  • Add $('.to-do').val(""); as the last line of the event handler.

Try It: Delete a To-Do

See the Pen Try It: Add Delete Solution by Turing KWK (@turing-kwk) on CodePen.

Practice: Build a To-Do List

See the Pen Practice: Build a To-Do List Solution by Turing KWK (@turing-kwk) on CodePen.