- Test your scenes.js file against v5
- Make any adjustments needed to get your code working (for example add color variables if you wish)
- If you’re adventurous consider playing with v6beta of the code which adds
scene[level].finish methods. There’s a number of other changes from v5 in there to grapple with, but if you’re up for learning how to add delays, additional screens that are before the
scene[level].main, you can do it.
Post your scenes.js file and describe any issues with the scene levels. Reference the scenes they based on from the original moron test breakdown. If you worked on any additional features to your code, create a v6beta of your own and post all files:
style.css. Please describe what features you’ve added and how.
Within my Final Game file I have had many issues. The most predominate is that my my images are stuck in their positions. I have tried changing the placement through my Moron.js html and Scenes.js. My switch function does not work either. I think it also has to do with my images being locked in place.
Create a function
iconListener() that will add event listeners to all your
<i> elements. The event is a “click” and the callback should hide (add the .hidden class) the clicked icon, as well as console.log the icon element and its index value.
Create a function start(iconArr) that calls the three functions in sequence:
Why do we need to call the
iconListener function afterwe’ve cleared the
iconSpace and mapped our new icon
<i> elements to that space? Why do we need to follow this three-step process: clear
<i> elements, add new
<i>elements, add event listeners to
You must clear the Icons first so that you don’t call them repeatedly. It cause your game to be unresponsive. Meaning that the new icons would be called and placed over the older ones therefore making it hard for the user to click the icons that need to be called.
Please open the console to view iconListerner
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
removeChild() to clear the parent icons
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
- 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
- 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
- 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
Describe the process for creating elements using JS. How do you post that newly created element to your webpage?
You must first create a variable that contains an array of objects. Each variable can be called by MapIcons to the DOM. MapIcon is a function that arranges the objects on the screen.
Describe the process for clearing child elements from a parent element using JS.
You can create a function called remove child. within the function you can use the function unshift which can remove the last object in an array.
Please Open the console to call mapIcons
Create a webpage that every time you click on the circle it changes to a random color and moves to a random position on the page. Also have the heading change to the rgb color value of random color.
- create single circle using a
div and a heading with an
- use selectors, modifiers, and an event listener to trigger the changes.
- For a bonus, consider using an icon from font awesome. You’ll use an
<i> element instead of a
div. And for a super-bonus have the icon animate in some way.
- Reverse Array – Create a function
reverseArray(arr) which takes an array as an argument. The function returns a new array with the values reversed. For example:
- Range Array – Create a function
rangeArray(start, end) which takes two numbers as arguments. The function returns an array containing all the numbers from the
start up to and including the
end. For example:
rangeArray(3, 9) returns
- Longest Username – Create a function
longestUser(ar) which takes an array of string values (usernames). The function returns the value of the longest username. For example:
longestUser(["Tony", "Syeda", "Affroz", "Tatiana”]) returns
- Only Numbers – Create a function
onlyNums(arr) which takes an array as an argument. The function returns an array that has removed any values except numbers. For example:
onlyNums(["fun", 23, 45, undefined, "a", 4]) returns
[23, 45, 4].
Use the code insert tool and provide examples to answer these two questions. Use JS comment syntax to describe your example.
With the array methods
unshift(), explain the difference between the returned value of the method and the resulting value of the array?
When using pop the last value in the array will be removed, the returned array will show one less than the original.
Push does the opposite where it add a value to the end of the array
shift takes a value away from the front of the array
and unshift adds to the front of the array.
Link to an example of a site that is using an array of data that is presented on page. Describe what is in value of the array.
- Random Color – Create a function
randomColor() when called returns a random RGB color value like
rgb(173, 65, 203).
- Game – Create three functions
checkGame(). Each function concerns the boolean value of
gameOver and should affect
gameOver as the function is named.
How can you save a returned value from a function?
Returning the value as a variable.
Why do we create functions in our programs? Give an example
To shorten our code, and because they can be used multiple times
This week Professor MBS requested that we create 4 files that request the user to enter different information about them selves.
Here is the assignment:
There are four pairs of HTML/JS files to be completed and submitted.
- Create a program that prompts a user three times asking for three favorite desserts. Have the program alert the user with a sentence that names all of these deserts.
- Create a program that asks the user how many credits they have completed towards their college degree. Have the program alert the user with a sentence that reports how many credits out of 120 have been completed and how many credits remain.
- Create a program that asks a user for their favorite quote. Have the program alert the user with a sentence that repeats the quote in quotation marks and that they love it too.
- Create a program that asks a user for their first name and then their last name. Have the program alert the user with a sentence shows their full name and tells them how many characters there are in their full name.
Your Favorite Desserts
Your Degree Credits
Your Favorite Quotes
Your Name Count
Describe how you connect an HTML file and a JS file.
Typing this code into the HTML console. It will connect the two files
Describe the difference between writing code in the Chrome console and writing HTML/JS files that are then open in Chrome.
writing in the Chrome console will only be the until you refresh the page.
writing in VSC allows to connect and save the code for later use.