dev1 – moron test DOM

**note use this updated HTML/CSS/JS

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css"
    integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

With the game board designed and the data structure for the icons designed, we can now dynamically build the game board using four functions: clear_icons(), build(icon), set(icons), and listen_to_icons().

//clear the div.icon-box of <i> elements
function clear_icons() {
}

//using an icon object as an argument
//build an <i> element with icon properties
function build(icon) {
}

//using array of icon objects as an argument
//forEach object call build(icon)
//then set returned <i> element to the icon box
function set(icons) {
}

//create a click listener forEach <i> element in div.icon-box
//for now a click will console.log the index value of the icon
function listen_to_icons() {
}

clear_icons()

This function uses a while condition to check if there is a ‘first child’ in the div.icon-box. As long as there is a first child then the loop will continue to remove a first child. Eventually no first children remain and the while loop ends.

Requires: while, parent_el.firstChild, and parent_el.removeChild.

build(icon)

This function uses the document.createElement() method to first build an <i> element. After, the values of icon object passed as an argument are used to modify the <i> element. This includes a number of icon_el.style modifiers, icon_el.innerHTML, and a bit of tricky use of icon_el.classList.add. Values of classList are in an array, so each class must be added one at a time. So the class pair string ‘fas fa-ghost’ needs to be converted to an array of two strings – ['fas', 'fa-ghost']. Then you can loop through the array and add each class one at a time.

Requires: document.createElement(), icon_el.style, icon_el.innerHTML, icon_el.classList.add, and a to be discovered method of converting a string to an array of strings.

set(icons)

Traverses the array of icon objects passed as an argument using a forEach() method. And for each icon obj, build(icon) is called to created the <i> element with all the icon properties. The built element is then added to div.icon-box as child element using parent_el.appendChild(el) method.

Requires: forEach() and parent_el.appendChild(el)

listen_to_icons()

Adds a click event listener to every <i> element added to div.icon-box. Using a special case of the forEach() method combined with a .call() method to allow a ‘node list’ of selected elements to be treated as an array. This allows the use of the second argument in a forEach(value, index) – the index so we can track which <i> element has been clicked.

Requires: Array.prototype.forEach.call(selected_icon_els, function(icon, i){})

Leave a comment

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

css.php