Moron Test Part 2 – Creating and Assembling Elements in JS

Tutorials

With the layouts of your various scenes complete, we are now going to turn to how to build each of your layouts using JS. We’ll use a data structure in which we codify the icon values: class, color, content, size, left, top, and transform. Then create the <i> element using a createElement() method followed by a bunch of modifiers using data from our data structure to customize the icon. Finally we’ll need to be able post these new elements to the DOM using a three more methods firstChild() and removeChild() to clear the parent icons <div> and appendChild() to add our newly created <i> elements to the icons <div>. We’ll use this pattern over and over to build each scene in the moron test, so to summarize:

  • Icon data strucuture (example of ghosts)
    • Array of objects
    • Each object has the necessary key/value pairs for an icon
      • class
      • color
      • content
      • size
      • left
      • top
      • transform
  • Build icon
    • create element
    • modify element (using values from icon object)
  • Clear the icons
    • select the parent
    • clear all the “children” OR child elements
  • Map the built icons
    • select the parent
    • “append” each new icon

Problem Set

  • Create an array of icon properties for each scene you’re working on.
  • Create a function to clear all the icon’s <i> elements from the div.icons
  • Create a function to create <i> elements for each icon in one of your arrays of icon properties.
  • Create a function to post those newly build <i> elements to div.icons

Blogging Questions

Describe the process for creating elements using JS. How do you post that newly created element to your webpage?

Describe the process for clearing child elements from a parent element using JS.

Leave a comment

Your email address will not be published. Required fields are marked *