[FINAL] – The Moron Test – Game Logic


Hi this is tutorials based on the 3 videos (11,12,13). Everything was fine this week but I really struggled with the blog question. I gave the question my best shot but I am still a little confused. It would be great if Mike can give the answer to this blog question. Other than that everything else is great.

Video Walkthrough – Videos 11 – 13


Blog Question


Describe how the spread operator is used to convert a node list of selected elements into an array. Describe why we needed this conversion and how the array was helpful for our first test in the game’s logic.

The spread operate allows an iterable such as nodelist. The spread operator is necessary because it looks at many arguments in an function and it passes the argument and adds it at one time. In other words, the spread operator allows us to turn the nodelist into an iterable array with i elements. The i elements is based off how many i elements you have. We are essentially setting iconArr equal to an emepty array with the spread operator calling each of the icons from the nodelist.


[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);
}

WebDev2 | Get Actor REVISED: Week 8

Inline Comments
getActor(nameStr) {
 // collect all data from API
 // we return the first value of the results array
 // then set the data results and image value, using the actor profile url 
}

clearCardbox () {
 //clears the main Cardbox of cards
 // while the main box is cleared, the first child of the main will remain
 // then remove current child to bring in the next random child
}

buildMainCard(img, main, detail) {
 //creates a mainbox card div with the img, main, detail as arguments
 // use let function to create a new element, give it a div
 // access the cards elements to manipulate the class list
 // remove elements descendants and replace with nodes following the html
 // after following html set up, return the main card
  

}

Domgame– game logic

Describe how the spread operator is used to convert a node list of selected elements into an array. Describe why we needed this conversion and how the array was helpful for our first test in the game’s logic.

This week is when we create eventListeners and you would have to make a variable for icons. Create a event listener and make a function so you call all the i elements.

//function to call each i individually to get correct answer
function playScene() {
    icons = document.querySelectorAll('i');
    let iconsArr = [...icons];
    iconsArr.forEach(function (icon, indx) {
        icon.addEventListener('click', function () {
            check(icon, indx);
        })
    })
}

When icons are called in the console then the NodeList of all icons selector is shown then you would add an event listener and use a for loop like this. But this cannot work because we would not know which one is actually being clicked you can see the number of times an icon is pressed.

// for (let i = 0; i < icons.length; i++) {
    //     icons[i].addEventListener('click', function () {
    //         console.log('clicked');
    //     })
    // }
    //doesn't work cause we don't know which icon is being clicked.

The NodeList would need to be put into an array so a foreach method can be used and show us the index. The spread operator can be used to look at many arguments as there is and pass a value one at a time. Which is shown in the code above. The spread operator is calling each value from the NodeList.

dev1 – The Moron Test Game Logic

This week we finally build our functions to test whether the correct icons have been clicked in the correct order. We start with building our eventListener that listens for clicks on the <i> elements (icons). This listener is going to be able to also report the index value of the icon clicked. And that value will be used to check if it was the correct icon.

There are three videos from the Playlist this week which take you through these steps:

For the Blog:

Describe how the spread operator is used to convert a node list of selected elements into an array. Describe why we needed this conversion and how the array was helpful for our first test in the game’s logic.

Map Icons and Draw Scene

the process of clearing and mapping both the instructions and icons is relatively simple. we first create a variable that contains all the instances of either the icon or the instruction using a query selector. in the clear function, we use a while statement of check if there is an element within the space we are looking at, to accomplish this we use “.firstElementChild” if there is one the next step is to clear either the icon or instruction using removeChild in which we pass the first child of the element as a reference. For the mapping function we take in the level as a parameter we then access that scenes icons using the level. we then append the icons to the iconspace and build it as well.

WebDev2 | OOP in JS: Week 7

Tutorials: Code Along , Const Function , Proto , Inherit
Blog Question: The new keyword is used with object oriented programming in JS by creating an empty object, sets the value of key word “this” to the empty object. It then adds return at end of function and later adds “proto” to empty the object.
function Fruit(apples, oranges, pears){
    this.apples = apples;
    this.oranges = oranges;
    this.pears = pears;
}
 var firstFruit = new Fruit(2,2,200);
 firstFruit.apples;
 firstFruit.oranges;
 firstFruit.pears;

dev1 – Map Icons and Draw Scene

For this week you will be working through four videos from the Moron Test Project built with JS. Videos 7-10 from the playlist.

For the blog

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.

Domgame– Map Icons and Draw Scene

Once again no links in these posts until the last post.

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 – createElementfirstElementChildremoveChild, and appendChild.

First you have to select the class (.icons) and make a variable pertaining to the space of the icons.

const iconSpace = document.querySelector('.icons');

Then you have to select the firstElementChild which selects the first child of a parent-child.

//to clear icons on page:
function clearIcons() {
    while (iconSpace.firstElementChild) {
        iconSpace.removeChild(iconSpace.firstElementChild)
    }
}

Then after you select the first element child you then have to remove the icons so it can be replaced with a new icon by using removeChild which gets added with the first element child (takes the argument.)

After that, you will appendChild which is to replace the previous icon with the new icons for the next scene.

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

This is the function to drawScene:

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

This is how to map icons :

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

When you are finished with all the different part you will then put everything you did in a simplified functions:

//function for the next scene
function nextScene(){
    clearIcons();
    clearInstructions();
    drawScene(level);
}
css.php