CSE 154

Section 7: JavaScript Timers

Today's Agenda

QuickCheck: JavaScript Code Quality

Skittles, adding a timer

Dice Roll!

Section Goals

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

  • Utilize the code quality guide to improve your JavaScript
  • Identify when and how to use different timer functions
  • 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.

Exploration Session This Week

3D JavaScript with WebGL

Thursday 4:30pm, MGH389

  • One HW Extra Credit Point Per Session Attended!
  • If you have a legitmate conflict, fill out the form on the exploration sessions page of the course website to watch the Panapto and take a short quiz for credit.

Exercise 1: (Back to) Skittles!

We have completed the skittles.html and skittles.css. Additionallly, we have started a skittles.js file that contains most of the functionality for the game except the timers.

Given this starter code, add functionality for telling the user how long the game took to complete! (more info below)

skittles page expected output

You can find the runnable example here.

Adding Timers

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, the JavaScript outputs a message stating if they guessed too high or too low. Delete this message after 2 seconds.

When the user guesses correctly, the game is ended. Tell the user how many seconds the game took (see TODO in code for more information).

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): 

id("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