» CS 347: Lab 11 – Client-side JavaScript

CS 347: Lab 11 – Client-side JavaScript

September 30, 2021 by Chris Johnson. Filed under fall-2021, labs, webdev.

Dear students:

Welcome to lab. Now’s your chance to apply the ideas you read about. Find a partner and complete as much of the task below as you can. At the end of our time together, paste your HTML files into Crowdsource in order to receive credit.

Task 1

Recreate the following little game:

The game is called Plus. A random number appears in the middle. The player must enter a consecutive sequence of numbers that sums to the number in the middle. Consider these suggestions in your design:

Use a Grid layout to produce the plus pattern. We haven’t talked about this before. The following CSS properties will produce a grid that is 3 columns wide and centered:

#plus-container {
  display: grid;
  grid-template-columns: auto auto auto;
  justify-content: center;
  align-content: center;
  justify-items: center;
  align-items: center;
}

By default, the children of the grid will be packed sequentially into rows. The children should therefore be listed in the HTML in the order they appear in the rendered page. However, the south input needs its coordinates set manually to skip over the empty southwest cell, like this:
```
#south {
  grid-row: 3;
  grid-column: 2;
}
```
In the script, define functions checkAnswers and startNewRound, and clearThumb.
If the player’s answers are correct, show the thumbs-up. Schedule the new round to start after a moment’s pause using setTimeout.
As soon as the user modifies an input, clear the thumb.
Investigate HTML’s tabindex to make the tab key cycle around the form elements in clockwise order.

TODO

The next step of your learning is to complete the following tasks:

Read the chapter Advanced Scripting in All Over the Web.
Submit your first project by the end of today. Ensure that it is publicly accessible through https://project1.YOUR-DOMAIN-NAME and that your instructor has a URL for your project’s repository. Make sure you’ve gone through the checklist.
Don’t write a blog entry this week.

See you next time.

Sincerely,