CSE 154

Section 4: JavaScript Animations and the DOM

Exercise 1: Counting On Change

Given this starter change.html (and change.css), implement functionality such that a user can type in a coin amount in the #amount text input and the corresponding US dollar amount for that number of one of four US coins is displayed. You can find the runnable example here.

onchange page expected output

Exercise 1: Details

In the provided HTML, there are four possible coin value options a user can select: Penny (1 cent), Nickel (5 cents), Dime (10 cents), and Quarter (25 cents). Initially, the default coin selected should be the penny. Whenever either the "Make $$$" button is clicked or one of these coin values is changed, the hidden message should be updated to include information about the total amount of change for the selected coin count and coin type.

Exercise 1: Basic Input Sanitization

To provide a user-friendly experience, ensure that if an input value is negative when a coin change is being calculated, reset the value to 0 in the input box. If the value is not entered as an integer, use Math.floor to round the decimal value down. In such a case, the calculation should be done with the result value and the input box should also be changed to include the integer value. Use toFixed(2) if needed to format a number to exactly two digits after the decimal.

Make sure to try out our runnable solution for a demonstration of these different cases (without looking at the JS solution!).

Exercise 1: Solution

Solution: JS

Exercise 2: Bouncing Ball

Create a page which contains an animated bouncing all. You are given ball.html and ball.css and you will write ball.js (running solution). You will also need this image, which the provided ball.html links to relatively in a path images/voltorb.png.

  • The bounce area is 600px by 400px, and the ball takes up 40px by 40px of space.
  • Every frame of animation (every 20ms), apply a "gravity" to the ball and increase its downward speed by 1.
  • If the ball hits the ground, make it "bounce" up to 3/4 the velocity it previously had.
  • Center the ball within the ball-area and use that element's width/height as boundaries.
  • Optional: Make the code generic enough to work with any size ball and any size bounce area (ie., don't hard code these numbers

Exercise 2: Solution

Solution: JS

Exercise 3: Gnar - Sweet and Fluffy?

A furball is on the loose! Rawr! At first glance, he might look cute, fluffy, and all-around harmless, but the townspeople have a reason to be terrified. Write JavaScript code to bring Gnar to life, and ultimately let him achieve his true ultimate form. The HTML and CSS are already written. Start from this skeleton of gnar.html (sample solution).

Exercise 3: Part I - Prepopulating Peeps

Make it so that when the page first appears, 5 boys are visible in the town. There are already 5 persons in the HTML, but they have no gender. These are stored in the div with id of people as divs with the class of person.



            <div id="people">
              <!-- add your code here -->
              <div class="person"></div>
              <div class="person"></div>
              <div class="person"></div>
              <div class="person"></div>
              <div class="person"></div>
            </div>

HTML

Exercise 3: Part II - Adding Peeps

Implement the Add button functionality so that it adds 5 more boys to the page. A person is a div with the classes of person and a class of either boy or girl. 

<button id="add">Add!</button>

HTML

Exercise 3: Part III - Killing Peeps

Implement the Kill button functionality so that clicking it will randomly "kill" 1/5 of the boys on the page. Kill them by giving them a class of splat. 

<button id="kill">Kill!</button>

HTML

Exercise 3: Part IV - Boys and Girls

Add functionality to the boy and girl radio buttons with a function that returns which of the two genders is currently selected. Modify the code from your previous two exercises so that you can choose which of the two genders to add and kill. 


<label><input id="boys" type="radio" name="gender" /></label>
<label><input id="girls" type="radio" name="gender" checked="checked" /></label>

HTML

Exercise 3: Part V - Clean Up

Add functionality to the "clean up" button so that it removes any dead "splatted" people from the page (any divs with the class splat). 


<button id="cleanup">Clean up!</button>

HTML

Exercise 3: Part VI - Beast Mode

Now this is when Gnar shows his true form... Add functionality to the "Beast Mode" button so that Gnar's img tag and the page's top h1 tag have the class of enrage applied. In addition, Gnar should be made to be 50px wider than his current width. Clicking the button again removes the class both the img and h1 tags and returns the width to the previous value. The h1 has an existing CSS that should not be removed.



<button id="enrage">Beast Mode!</button>

HTML

Exercise 3: Part VII - Patrol

Finally, add animation functionality to the page! Add a function so that when the "patrol" button is clicked, Gnar moves right by 4px every 20ms until his left position style is at least 300px. Gnar should then immediately change directions and start patrolling to his left until his left position is 10px or less, at which he stops patrolling. 


<button id="patrol">Patrol</button>

HTML

Exercise 3: Part VIII - Stomp

Add functionality to the "stomp" button so that when clicked, Gnar moves up or down by 75px and also kills 1/5 of both genders on the page. Gnar is an img tag with an id of gnar. 


<button id="stomp">Stomp!</button>

HTML

Exercise 3: Solution

Solution: JS

Exercise 4: Squirtles All the Way Down

In this exercise, we will implement a version of "turtles all the way down" (yes, this is a thing).

The provided squirtles.html contains the earth, elephant, and a single Squirtle.

Write JavaScript code squirtles.js to give the page infinitely-scrolling Squirtles (running solution).

You will need to add a new Squirtle to the bottom of the page every time the user scrolls to the bottom. To add a Squirtle, append to document.body a new div with the class of squirtle (See slide below for more implementation details).

Exercise 4: Implementation Details/Hints

Use these events and properties to help you implement your solution:

Exercise 4: Solution

Solution: JS