Exercise: Band Fan Page

Put a band's tour on its fan page with JavaScript, building a line for each upcoming show from an array, marking the sold-out ones and counting what's left, with tests for the data and a checklist for the page.

Apprentice · JavaScript · HTML · CSS · Updated

The Midnight Owls, a made-up indie band, have a fan page: the band, last night's setlist and a newsletter sign-up are all there. The part fans care about most isn't. Where are the Owls playing next? The tour is sitting in an array of shows, and the page still says Loading tour dates.... You'll write the JavaScript that turns that array into the tour list: one line per upcoming show, in date order, sold-out shows grayed out, and a count at the top. Every concert venue, ticket site and event page you've ever used does this same job.

Before you start

You need VS Code with Live Preview, a browser and Node.js, which Setup: VS Code, a Browser and Node.js installs. The exercise uses import and export (Modules: import and export), filter and sort on an array, and the DOM methods from this chapter. Nothing from any other exercise is needed: the folder has the whole page.

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 course folder. Or clone it with Git.

The folder holds:

  • index.html, styles.css and images/: the fan page and its look. Ready to use: you don't write any HTML or CSS.
  • tour-data.js: the tour, an array of shows. Ready to use.
  • setlist.js: makes the Show more button work. Ready to use. The next chapter, Events: Making Pages Respond, explains how.
  • tour.js: three functions that work out the tour, with no page involved. For you to finish.
  • fan-page.js: puts the tour on the page, using the functions in tour.js. For you to finish.
  • tour.test.js: the tests for tour.js. You don't need to change this file.
  • package.json and README.md: ready to use. The README has the same steps as this lesson, and the page checklist.

Open the folder in VS Code (File > Open Folder).

What to do

Each show in tour-data.js looks like this:

{ date: '2026-11-07', city: 'Boise', venue: 'The Basement', soldOut: false }

Open index.html and find the tour section. It has a paragraph with the id show-count, and a list with the id tour-list that holds one placeholder item, <li id="tour-loading">. That list is where your shows go.

  1. Finish tour.js. Each function returns an empty value for now, and the comment at the top of the file says what it should return, with examples:
    • upcomingShows(shows, today) gives back the shows on today's date or later, soonest first, without changing the array it was given.
    • formatShow(show) gives back one show's line, such as Nov 7: Boise, The Basement, with (sold out) on the end for a sold-out show.
    • showCountText(count) gives back No upcoming shows yet, 1 upcoming show or 5 upcoming shows.
  2. Finish fan-page.js. It already imports the tour and your functions, and works out upcoming, the shows still to come. Then:
    • take the Loading tour dates... item off the page;
    • for every upcoming show, make an <li> whose text is formatShow(show), give it the class sold-out if the show is sold out, and add it to the tour list;
    • put showCountText(...) into the show count.
  3. Stretch goal: give the very next show's <li> the class next-show too. The stylesheet makes it bold and puts Next up: in front.

The page pretends today is November 1, 2026 (const TODAY = '2026-11-01' in fan-page.js), so your page matches the checklist whatever day you do the exercise.

Check your work

Open VS Code's terminal (Terminal > New Terminal) and run the tests:

node --test

At first all 7 tests fail. That's expected: each function you finish turns its tests green. When a test fails, its message says what it expected, such as On 2026-11-14 the Denver show is tonight, so it is still upcoming: keep shows whose date is today or later.

Then open the page with Live Preview in your browser (Live Preview: Show Preview (External Browser) from the Command Palette) and go through the checklist in README.md: five shows in date order, Denver and Chicago grayed out and marked (sold out), 5 upcoming shows above the list, and no errors in the Console (F12). The checklist also has you change TODAY to see the list follow.

Hints

  • Two steps for the upcoming shows. First keep the shows whose date is today or later, then put those in order. Dates written year-month-day compare like words in a dictionary, so '2026-11-07' < '2026-11-14' is true.
  • Pull the date apart. show.date.slice(5, 7) is the month as text, '11', and Number() turns it into a number. The MONTHS array in tour.js starts counting at 0.
  • Find, then build. Find the list and the count once, before the loop, with document.getElementById (Locating DOM elements). Inside the loop, make one <li> per show (Manipulating the DOM Structure).
  • The look is already in the CSS. Your code only adds the class sold-out. The CSS You Need for JavaScript shows why, and Common DOM Interactions shows classList.add.
  • Nothing on the page at all? Look in the Console first. An error in tour.js stops fan-page.js too, because it imports from it, and the Console names the file and line.

When you're done

Every test is green, and the summary at the end of the run says:

ℹ tests 7
ℹ suites 0
ℹ pass 7
ℹ fail 0
ℹ cancelled 0
ℹ skipped 0
ℹ todo 0

On the page, the tour list reads:

Next up: Nov 7: Boise, The Basement
Nov 14: Denver, Red Brick Theater (sold out)
Nov 21: Austin, The Night Owl Club
Dec 5: Chicago, Lakeside Ballroom (sold out)
Dec 12: Nashville, The Front Porch

(Next up: shows only once you've done the stretch goal.)

Now add a show of your own to tour-data.js: your own city, a venue you make up, and a date after November 1, 2026. Save, and reload the page. Did you have to change anything in fan-page.js to make it appear? If the answer is no, your page is drawn from its data, and that's the idea the next chapter builds on.

So what

Data in an array, and code that turns it into elements on the page: that's how a ticket site lists its concerts, a shop lists its products and a streaming app lists your playlist. You've built the core of every one of them.

Key terms

Related