Exercise: Road-Trip Playlist

Finish five functions that keep a road-trip playlist up to date, adding and removing songs, totaling the play time and checking for a song, and let the tests check each one.

Apprentice · JavaScript · Updated

Four friends are driving six hours to the lake, and the playlist won't sit still. Someone adds a song at every gas stop, the driver wants one moved to the front, a song that everyone's sick of has to go, and somebody keeps asking "how long is all this, anyway?". You'll write the code behind a small playlist app: five functions in playlist.js, each one using what this chapter taught. Tests tell you when each function works.

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 the folder where you keep this course's work. Or clone it with Git.

The folder holds:

  • playlist.js: your code. The five functions are already there, each returning a placeholder.
  • trip.js: a small program that plans a trip with your functions and prints the result. You don't need to change it.
  • playlist.test.js: the tests that check your functions. You don't need to change these.
  • package.json: tells Node that the files use import and export.

Open the folder in VS Code, and open a terminal there with Terminal > New Terminal.

What to do

Every function is already declared, with its parameters, and returns a placeholder for now. The comment above it says what it should do, with examples:

/*
 * Add the song to the END of the playlist, then return the playlist.
 *
 * addSong(['Highway Sunrise'], 'Desert Radio') -> ['Highway Sunrise', 'Desert Radio']
 * addSong([], 'Windows Down') -> ['Windows Down']
 */
export function addSong(playlist, title) {
  return playlist;
}

The word export in front of each function lets the tests and trip.js use it. Module 3 explains it properly, in Modules: import and export.

  1. Finish addSong and playNext. One adds a song to the end of the playlist, the other to the front, so it plays next. Both return the same playlist they were given.
  2. Finish isOnPlaylist. It gives back true or false. Titles match exactly, capital letters included.
  3. Finish totalPlayTime. It gets an array of song lengths in seconds, such as [214, 187, 243], and gives back their total. Use a loop.
  4. Finish removeSong. It removes the first song with that title. If the song isn't on the playlist, nothing changes.

Check your work

Run the tests from the exercise folder:

node --test

At first every test fails. That's expected: each function you finish turns its tests green. When a test fails, its message says which songs it used and what it expected, for example Removing Gas Station Coffee should leave the other three songs, in order.

To see your functions at work, run the trip planner:

node trip.js

Hints

  • Work out an example by hand first. Write down ['Highway Sunrise', 'Desert Radio'] and what it should look like after each function.
  • Ends of the list. Adding at the end and adding at the front each take one array method. Adding and Removing Items has both pairs.
  • Removing takes two steps. First find where the song is, then remove the item at that place. Finding Things in an Array shows how the two methods fit together.
  • The song that isn't there. Try removing a title that isn't on the list. What does your first step give back, and what does your second step do with it?
  • The running total. Looping Through an Array shows the shape: a variable that starts at 0 before the loop, and grows inside it.

When you're done

Every test is green, and node trip.js prints:

Road-trip playlist:
  1. Sunset Detour
  2. Highway Sunrise
  3. Desert Radio
  4. Windows Down
  5. Mile Marker 9
Desert Radio on the list: true
Total play time: 1147 seconds (19 min 7 s)

Now look back at removeSong. If a song were on the list three times, how would you change it to remove every copy?

So what

Adding, removing, totaling and checking: those four jobs are most of what any app does with a list, from a music player's queue to a store's shopping cart. Now you can write all four.

Key terms

Related