Moron Test Complete

Problem Set

  • 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].start and 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.

Blogging Assignment

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: moron.jsscenes.jsindex.htmlstyle.css. Please describe what features you’ve added and how.

Final Game

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.

Moron Test Part 3

Problem Set

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.

***Bonus****

Create a function start(iconArr) that calls the three functions in sequence:

  • clearIcons()
  • mapIcons(iconsArr)
  • iconListener()

Blogging Questions

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 <i> elements?

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.

MoronTestV3

Please open the console to view iconListerner

Moron Test Part 2

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?

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.

MoronTestV2

Please Open the console to call mapIcons

14 Problem Set

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 h1.
  • 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.
  • rgbdom.html

Moron Test Problem Set

  • This week you will be assigned 2-4 scenes from the moron test that you will be creating. In the first week, your job is to build the HTML/CSS and layout the icons, instructions, and any other elements required for your scene.
  • You will also select all the elements which will need listeners in your scene. We will be discussing a strategy for this in the second class in which we will use the Array prototype and a call method with our selected node list. This will turn our node list and allow us to use array methods like forEach. This process will give us necessary options over using a for loop to apply methods to a selected set of elements.

Blog Questions

  • How does the layout of the icons on the screen work? Make a drawing and label the layout of one of the scenes with the positioning numbers used. Take a photo of this drawing and embed it with your description of the post.
  • How do the Array prototype and the call method of our node list of selected elements work?
  • The array allows for the objects in them to be called easier. You can select objects when designing in CSS or JS and make them follow declearations
  • Why are we using this method instead of a for loop to apply methods to all our selected elements?
  • We aren’t using a loop because we need the game to end. So it is better to use if/ else if instead.

v1index.html

Chapter 11 Problem set

  1. 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: reverseArray([1,2,3]) returns [3,2,1].
  2. 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 [3,4,5,6,8,9].
  3. 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 "Tatiana".
  4. 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 pop() / push() and shift() 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.

10 Problem Set

  1. Random Color – Create a function randomColor() when called returns a random RGB color value like rgb(173, 65, 203).
  2. Game – Create three functions startGame()endGame(), and 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

09 Problem Set Part 2

  1. FizzBuzz – This is a classic loop problem for which the solution exists in a myriad of languages and methods. Write a program that console.log’s the numbers 1 to 100. Except log for numbers divisible by 3 log “Fizz”, numbers divisible by 5 log “Buzz”, and numbers divisible by both 3 and 5 log “FizzBuzz”.
  2. Guessing Game between 1 and 100 – Write a program that generates a random whole number between 1 and 100 and then prompts a user to guess the number. If the guess is less than the answer given, prompt the user with the hint that the number is lower than the one guessed. If the guess is higher than the answer given, prompt the user with the clue that the number is higher than the one guessed. If the user guesses correctly, alert the user that they have guessed the answer. Be sure to report the correctly guessed number in the alert.
  3. Falling down the stairs – Take the phrase “falling down the stairs” and write a program that console logs the phrase one letter per line, but for each line add one additional space is in front of each letter. This will give the appearance of the letters in the phrase looking like a staircase.

09 Questions

  1. How are you really feeling? Write a program that asks “How are you feeling?” Then have the program immediately ask again, “How are you really feeling?” Have the program compare the statements. If the statements match, then send a message, “Wow so you really feel insert feeling” If they don’t match send a message, “Ok so you’re not sure if you’re firstFeeling or secondFeeling.”
  2. How fast were you running? Write a program that asks for how many miles a person ran and how many minutes the run took. If either answer was not a number, then let the user know they should try again. If both answers are numbers calculate and report the MPH the user averaged.
  3. What’s the weather? Write a program that asks a user what the weather looks like today. Using a switch statement, have your program respond with advice to the following answers, “rain”, “cloudy”, “sunny”, “cold”,  “hot”, and for all other answers let the user know, “I don’t have any advice for you today, sorry.”

Bouncer 

Age Exercise

Number guess h

While Loop h

Annoy O Matic 

For Loop 

How are you feeling h

What’s the weather

MPH

08 Problem Set

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.

  1. 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.
  2. 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.
  3. 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.
  4. 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

Stalker

Age Calculator

Describe how you connect an HTML file and a JS file.

Typing this code into the HTML console. It will connect the two files

<script src="Your_File.js"></script>

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.