CSE 154

Week 4 Section: JavaScript Animations and the DOM

Today's Agenda

QuickCheck: Breaking Down a UI Spec

How to add to the DOM

Section Exercises

Note: HW2 is out! Start this assignment early

Section Goals

By the end of this section, you should be able to:

  • Know how to create a DOM element and add it to a parent node
  • Know how to add/remove classes with classList.add and classList.remove (more on this tomorrow!)
  • Identify when and how to use different timer functions
  • Have a strategy for tackling a full UI specification with different events and response types (hint: start breaking down the event flow on paper first!)
  • Have a better understanding of when to use module-global variables and constants in your JS and how to decompose your program cleanly into functions.

QuickCheck: Breaking Down a UI Spec

Today, we will take what we've learned about JavaScript, events, the DOM, and animations to implement a game for a user to guess the correct number of Skittles in a jar having a certain color.

Skittles demo

On a blank piece of paper, answer the following questions:

  1. What elements in this demo should be listening to different events?
  2. For each of those elements, what events are they listening to?
  3. For each of those events, what behavior do you see happen as a result?

Back to the DOM Tree

the DOM hierarchy

The elements of a page are nested into a tree-like structure of objects

Creating New Nodes

Name Description
document.createElement("tag") creates and returns a new empty DOM node representing an element of that type 
// create a new <h2> node
let newHeading = document.createElement("h2");
newHeading.innerText = "This is a new heading!";

JS

Note: Merely creating an element does not add it to the page

You must add the new element as a child of an existing element on the page...

Adding/Removing Nodes to the DOM

When you have a parent DOM node, you can add or remove a child DOM node using the following functions.

Every DOM element object has these methods:

Name Description
parentNode.appendChild(node) places the given node at end of this node's child list
parentNode.removeChild(node) removes the given node from this node's child list 
let li = document.createElement("li");
li.innerText = "A list item!";
$("my-list").appendChild(li);

JS

Exercise 1: (Back to) Skittles!

Given this starter skittles.html (and skittles.css), we will implement a "game" to fill a jar with Skittles and let a user see how quickly they can guess the correct number of Skittles in the with a certain color.

skittles page expected output

You can find the runnable example here.

The Skittle Rainbow (Provided in CSS)

the Skittles rainbow!
  • There are 9 possible Skittle colors, each corresponding to a class in the provied CSS: "red", "green", "blue", "purple", "gray", "mediumaquamarine", "pikachuyellow", "blanchedalmond", and "tomato". The class for each of these colors will change the font color of the #color span (in the h1) and the background color of a .skittle element.
  • For each game, the value of the selected radio button determines how many colors are considered, and one of these colors should be used as the color to guess.

Filling the Skittles Jar

When a user clicks the "Start" button:

  • The jar should be filled with a random number of Skittles (new div elements having a class of "skittle") between 1 and 154. Each Skittle should be given a random color class using the colors considered in the current game.
  • The #color span (in the h1) should have as text (and a class) one of colors used in the game - that random color will be the Skittle color to guess a count for in the jar.
  • The #game-ui should be displayed and the #game-setup should be hidden, along with the #new-game button.

Guessing the Skittle Count

A user can input numbers in the input box to guess how many Skittles of the current color are in the jar.

If they guess incorrectly, a 2-second message appears in the #results paragraph saying whether they guessed too high or too low, then is cleared. Their current guess count should be incremented by 1. If the user gives a negative number, this temporary message should be "You must enter a non-negative guess!"

When the user guesses correctly, the game is ended (see next slide for details).

Ending a Game

skittles win view

When the game is ended:

  • A message in #results should appear in the format "You guessed correct in SECONDS seconds!", where SECONDS is the number of seconds that passed since the game was started.
  • The guess input box should be empty and the "Guess" button should be disabled.
  • The text of the #color span should be empty.
  • The New Game button should be displayed so the user can see the same view they saw when first visiting the page.

Exercise 1: Solution

Solution: JS

Exercise 2: Dice Roller!

Given this starter dice-roller.html (and dice.css), we will implement an animated dice-rolling feature to roll a specified number of dice having a selected number of sides.

dice roller in action

Running Example

Generating Die

The #dice-area is the container to hold dice - each die should be a div with a "die" class added (this class is implemented for you in the provided CSS).

When the "Roll!" button is clicked, first the input box should be checked for valid input:

  • If it is empty or the user gave a negative number, the page should instead alert a message to the user to indicate invalid input.
  • Otherwise, the selected value in the text box will be used to determine how many dice to create and add to the #dice-area.

Rolling the Dice

As soon as the dice are added, they should start "rolling" by displaying a random number (based on the number of sides) every 200 ms. Whenever dice are rolling, the dropdown, input box, and "Roll!" elements should be disabled.

screenshot of page during roll

Note: You can set the (boolean) disabled attribute for UI elements using the following syntax (assume a button with ID "my-btn" is defined): 

$("my-btn").disabled = true;

JS

Stopping the Rolls

When "Stop Roll!" is clicked, the values of all dice in the container should be added and displayed in the results paragraph and the button should be disabled. The previously-disabled elements should be re-enabled so a user can start a new dice roll (possibly with new number of dice and different die types).

Exercise 2: Solution

Solution: JS