[FINAL] – The Moron Test – Map Icons and Draw Scene


Hello once again. This is video 7-10’s work. I am really liking the video walk through. I just would like if they are named better. Instead of naming it videos 7-10 it can be section 1, 2 3. Other than that everything is fine.

Video Walkthrough – Videos 7 – 10


Blog Question


Describe the process for clearing and mapping icons to the DOM. What are the three steps and the core functions? Describe how the four methods used for this process work – createElement, firstElementChild, removeChild, and appendChild.

The process for clearing and mapping icons to the DOM invovled three steps. First you must create the element.

createElement is used to create an HTML element. firstElementChild returns the first child element of the current element. To select the first child of the parent icon you would use firstElementChild. removeChild removes a specific child of that element. removeChild takes an argument and removes the value. appendChild allows you to add a node to the end of the list of child nodes of a specified parent node. appendChild lets us add elements to the parent element. when appendingChild you can pass an argument.

To draw a scene you basically clear the icons and instructions then map the icon and instructions in one function.

function drawScene(level) {
    clearIcons();
    clearInstruction();
    mapIcons(level);
    mapInstructions(level);
}

To clear and map the icons you must first create the variable that contains all the icons/instructions information. In the clear function a while loop is being used. The code snippet below is basically a function with a while loop. While the div iconSpace has a firstElementChild the while loop is true, so the code happens. In the div iconSpace, the firstElementChild is removed, until the while loop becomes false. So it basically goes until it has no elements in the parent.

function clearIcons() {
    while (iconSpace.firstElementChild) {
        iconSpace.removeChild(iconSpace.firstElementChild);
    }
}

To map the icons, the following function is used. For this function we take in the level as a parameter. We then access the scene using (level). Then we append a child in the iconSpace div and build an icon.

function mapIcons(level) {
    scene[level].icons.forEach(function (iconObj) {
        iconSpace.appendChild(build(iconObj));
    })
}

To clear the instructions, the following function is used.

function clearInstruction() {
    while (instructionSpace.firstElementChild) {
        instructionSpace.removeChild(instructionSpace.firstElementChild);
    }
}

To Map the instructions the following code is used.

function mapInstructions(level) {
    let newInstr = document.createElement('h2');
    newInstr.textContent = scene[level].instructions[0];
    instructionSpace.appendChild(newInstr);
}

Leave a comment

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

css.php