# 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 October 30, 2026

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:

```javascript
{ 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:

```bash
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:

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

On the page, the tour list reads:

```text
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

- [createElement()](https://www.ask-codey.com/glossary/createelement)
- [appendChild()](https://www.ask-codey.com/glossary/appendchild)
- [textContent](https://www.ask-codey.com/glossary/textcontent)
- [classList](https://www.ask-codey.com/glossary/classlist)
- [getElementById()](https://www.ask-codey.com/glossary/getelementbyid)

## Related

- [The HTML You Need for JavaScript](https://www.ask-codey.com/lessons/javascript-page-basics-the-html-you-need)
- [The CSS You Need for JavaScript](https://www.ask-codey.com/lessons/javascript-page-basics-the-css-you-need)
- [Locating DOM elements](https://www.ask-codey.com/lessons/introducing-the-dom-locating-dom-elements)
- [Common DOM Interactions](https://www.ask-codey.com/lessons/working-with-elements-common-dom-interactions)
- [Manipulating the DOM Structure](https://www.ask-codey.com/lessons/working-with-elements-manipulating-the-dom-structure)

Source: https://www.ask-codey.com/lessons/exercise-javascript-band-fan-page