Exercise: Fun Run Sign-Ups

Finish seven functions that tidy a 5K fun run's messy sign-ups, from names and bib numbers to missing shirt sizes, donations and emergency contacts, and save and load the list as JSON, with tests that check each one.

Apprentice · JavaScript · Updated

The Riverside 5K Fun Run is on Saturday, and the volunteers at the check-in table need a clean list. The sign-up form saved names like mARIA lopez and jamal REED, some runners skipped the shirt size, one left the donation box blank while another typed 0 on purpose, and two have no emergency contact. You'll finish seven small functions that tidy it all up, and tests tell you when each one works. When you're done, one command prints the whole check-in sheet.

Get the exercise code

In the Exercise box beside the lesson, choose Get the starter on GitHub to open its GitHub repository. Click Code, then Download ZIP, and unzip it into your javascript-course folder.

The folder holds:

  • signups.js: the seven functions. For you to finish.
  • report.js: prints the check-in sheet using your functions, and saves the tidied list as checked-in.json. Ready to use.
  • signups.json: the four runners' sign-ups, as the form saved them, messy text and all. Ready to use.
  • signups.test.js: the tests that check your functions. You don't need to change this file.
  • package.json: tells Node.js how to run this folder's code and its tests. Ready to use.

In VS Code, choose File > Open Folder and open the exercise's folder. You only need Node.js: there's nothing to install with npm.

What to do

Every function in signups.js is already declared and returns a placeholder ('', 0 or []) for now. The comment above each one says what it should return, with examples:

/*
 * The number printed on a runner's bib: always at least four digits, with zeros in front.
 * A number that already has four or more digits stays as it is.
 *
 * bibNumber(7) -> '0007'
 * bibNumber(58) -> '0058'
 * bibNumber(12345) -> '12345'
 */
export function bibNumber(number) {
  // TODO: replace '' with your code.
  return '';
}
  1. Tidy the text. Finish tidyName (' mARIA lopez ' becomes 'Maria Lopez') and bibNumber (7 becomes '0007').
  2. Fill the gaps. Finish shirtSize (an M for anyone who didn't pick), donation (the suggested $10 for a blank box, while a 0 stays 0) and emergencyPhone (the contact's phone, or No emergency contact, without ever stopping the program).
  3. Save and load. Finish saveSignups, which turns the list into JSON text indented by 2 spaces, and loadSignups, which reads it back and returns [] when the text is broken.

Check your work

Open a terminal in the folder (Terminal > New Terminal in VS Code) and run the tests:

node --test

At first all 8 tests fail. That's expected: each function you finish turns its test green. When a test fails, its message says which values it used and what it expected, for example Jamal's emergencyContact is null. Reading .phone of null stops the program: ?. reads it safely.

To see the check-in sheet, run:

node report.js

Hints

  • Work tidyName out by hand first. What does split(' ') give you for ' mARIA lopez '? String Methods shows what to do with the empty pieces, and how to fix one word with slice.
  • Do the same thing to every word. map, from map and filter, fixes each word, and join puts them back together.
  • Numbers don't have string methods. padStart works on a string, and a bib number arrives as a number.
  • 0 is a real donation. Missing Values: null, undefined, ?. and ?? shows which default operator keeps it.
  • Broken JSON throws an error. JSON: Data You Can Save and Send shows how try and catch let the program carry on.

When you're done

All 8 tests are green, and node report.js prints:

Riverside 5K check-in sheet: 4 runners
0007  Maria Lopez   shirt M   $25   555-555-0142
0012  Jamal Reed    shirt XL  $10   No emergency contact
0058  Priya Shah    shirt S   $0    555-555-0177
0103  Sam Okafor    shirt M   $10   No emergency contact
Saved checked-in.json: 733 characters.

Open checked-in.json and look at Priya: is her donation still 0? Then change the ?? in donation to ||, run the tests again, and read which test turns red, and why.

So what

Every app that takes sign-ups, orders or reviews has a function like these behind it, cleaning what people type before anyone else sees it. Tidy text, sensible defaults and JSON that survives a bad file are what make that data trustworthy.

Key terms

Related