CS130: Spring 2022

Tools and Technologies of the World Wide Web

CS130: Spring 2022

Assignments > Homework 4. Working Spotify Interface

Due on Wed, 05/25 @ 11:59PM. 15 Points.

Background

Learning Objectives

Homework 4 is designed to be a culmination of the JavaScript techniques we’ve been learning in class. You will be practicing the following:

  1. Manipulating the DOM
  2. Rendering HTML templates
  3. Building event handlers to respond to user events
  4. Leveraging data from external files using the fetch API

Starter Files & Samples

Please begin by downloading the assignment files:

download starter files

For this task, I have created the HTML and CSS for you. If you open sample/index.html in your web browser, you will see an example of how I want your final interface to look. However, int this sample, the data from BTS is hardcoded in the interface. I want you to make it so that music / media from ANY artist can be searched. That is, each of the HTML widgets below must be converted into templates that can bind to data from Spotify.

Assignment Rules / Guidelines

  1. You may not use any external libraries other than the audio-player.js file that I made for you.
  2. You can make as many helper functions as you want to complete the assignment.
  3. All server queries must be done using the JavaScript fetch API.
  4. You are welcome (even encouraged) to incorporate any code from the sample directory (or from any other lecture / lab files we’ve used in this class)
  5. We will be going over this homework in Tutorial 7 and in Lecture on 5/16, so come with questions.

Assignment Instructions

To make the Spotify search/browse interface work, you will be editing files in the your_task folder. Please complete the four tasks listed below, following the guidelines listed:

1. Display Artist

Implement the getArtist function. This function – and any (optional) helper functions – should:

  1. Query the Spotify search endpoint with the appropriate query parameters using the fetch function. Sample search query:
  2. Display the first artist that get returned (rather than displaying all of the artists, you will just display the first one).
  3. If no artists are returned for the search query, display a message that indicates that no artist has been returned.
  4. Render the artist card to look like the one shown in sample/index.html, using a templated version of the code shown below. Note that the values for id src href and h2's inner HTML should be rendered dynamically using live Spotify data.
<section class="artist-card" id="3Nrfpe0tUJi4K4DXYWgMUX">
    <div>
        <img src="https://i.scdn.co/image/0c9057cb30520f9f883a220051260fc66a2f3ffa">
        <h2>BTS</h2>
        <div class="footer">
            <a href="https://open.spotify.com/artist/3Nrfpe0tUJi4K4DXYWgMUX" target="_blank">
                view on spotify
            </a>
        </div>
    </div>
</section>

2. Display Tracks

Implement the getTracks function. This function – and any (optional) helper functions – should:

  1. Query the Spotify search endpoint with the appropriate query parameters. Example:
  2. Display the first five tracks that gets returned (not all of them – just the first five).
  3. If no tracks are returned for the search query, display a message like “No tracks found that match your search criteria.”
  4. Ensure that your code still works if less than 5 tracks get returned.
  5. Render the tracks to look like the ones shown in sample/index.html, using a templated version of the code shown below (including the hover effects). Note that the values for data-preview-track src h2's inner HTML and p's inner HTML should be rendered dynamically using live Spotify data.
<button class="track-item preview" data-preview-track="https://p.scdn.co/mp3-preview/879c7106422b0b53852209da6a63210be7e09b01?cid=9697a3a271d24deea38f8b7fbfa0e13c" onclick="handleTrackClick(event);">
    <img src="https://i.scdn.co/image/1aacaefb0ef07755e5a155d96ee7f1073063e428">
    <i class="fas play-track fa-play" aria-hidden="true"></i>
    <div class="label">
        <h2>Black Swan</h2>
        <p>
            BTS
        </p>
    </div>
</button>

3. Display Albums

Implement the getAlbums function. This function – and any (optional) helper functions – should:

  1. Query the Spotify search endpoint with the appropriate query parameters. Example:
  2. Display all of the albums that get returned.
  3. If no albums are returned for the search query, display a message like “No albums were returned.”
  4. Render the album cards to look like the ones shown in sample/index.html, using a templated version of the code shown below. Note that the values for id src h2's inner HTML and href should be rendered dynamically using live Spotify data.
<section class="album-card" id="2lATw9ZAVp7ILQcOKPCPqp">
    <div>
        <img src="https://i.scdn.co/image/ab67616d0000b2736feb6d9ed7891f40e9a524dd">
        <h2>Love Yourself 結 'Answer'</h2>
        <div class="footer">
            <a href="https://open.spotify.com/album/2lATw9ZAVp7ILQcOKPCPqp" target="_blank">
                view on spotify
            </a>
        </div>
    </div>
</section>

4. Connect Tracks to the Audio Player

Add a click event handler to each of the tracks. When a track is clicked, your code will do the following:

  1. Update the track item preview (where id=”current-track”) in the page’s footer.
  2. Update the audioPlayer object with the track’s song preview URL: audioPlayer.setAudioFile(previewUrl);
  3. Play the song: audioPlayer.play();

5. Accessibility

  1. Use the WAVE Extension to generate an accessibility report.
  2. Correct as many accessibility errors as you can.
  3. Take a screenshot of your final accessibility report (Sarah’s report is shown below).
  4. Answer the following questions in a text file (Word, Notepad, or PDF are all fine):
    • What corrections did you have to make, and how did you make them?
    • Is this interface functional without the use of a mouse (i.e., just using keyboard keys)? Why or why not?
    • What are other accessibility tests or features you added or would be interested in learning about?

Hints: You’ll need to modify the HTML file by adding alt text to images, aria-label attributes to buttons, etc.

Extra Credit

The following enhancements can be completed for extra credit. Note: You may earn up to 5 points extra credit in this class.

  • Add an event handler to the artist card so that when you click on it, the tracks in the #tracks section are replaced by the artist’s top tracks (1 point)
  • Add an event handler to each album card so that when you click the album, the tracks in the #tracks section are replaced by the album’s tracks (1 point)
  • Modify the track template so that if there is no audio preview available, you don’t get the option to play the track. Note: to test, search for Billie Elish, who is not available on Spotify (1 point)
  • Figure out a way to hide the audio player unless the user has requested to listen to the track (by clicking on a track) (1 point)
  • Implement a way to play and pause a track by clicking on the track listing (1 point)
  • Integrate data from Twitter or YouTube, and render some stylized content below the albums (1 point)

Hint for the first two extra credit options

Whereas for the required parts of the assignment, I’ve used the “simplified” endpoint, for the extra credit, you’ll have to use the “unsimplified” endpoints (which return the original data structure as opposed to the simplified version of it). This means that you will remove the word “simple” from the API Tutor endpoint. Examples below.

Get tracks from album:

Get artist’s top songs: Weirdly, for this one you need to specify the “country” parameter (just use “us”):

Rubric

  • Artist (2 points)
    • Artist card implemented based on artist data returned by Spotify API
    • Artist card looks like the one in the sample
    • If no artists are returned, display a message that indicates that no tracks were found for the search criteria.
  • Tracks (4 points)
    • 5 Tracks listed based on artist data returned by Spotify API
    • If less than 5 tracks are returned, display only the tracks returned.
    • If no tracks are returned, display a message that indicates that no tracks were found (given the search criteria).
    • Track items look like the ones in the sample
  • Albums (2 points)
    • Album cards implemented based on artist data returned by Spotify API
    • Album cards looks like the ones in the sample
  • Tracks Event Handler (2 points)
    • Audio loads / plays when user clicks on track
    • Track preview updated in footer when user clicks a track
  • Accessibility Analysis with screenshot and writeup (3 pts)
    • Screenshot of WAVE report included in submission
    • Accessibility errors correct (added alt attributes, aria labels, etc.)
    • Reflection questions answered
  • Overall guidelines followed (2 points)
    • Used fetch API (no jQuery or other third-party libraries)
    • Search works for any search term (and displays appropriate messages if no data is found)
    • If no data is returned or if fewer items are returned than expected, a nice error message is displayed.

What to Turn In

Please Read Carefully: Before you submit this week, please edit the homepage that you made in Tutorial 3 by adding a link to the index.html file that you made for this homework.

To submit this week’s homework assignment, please create and upload a zip file to Canvas (under the Homework 4 assignment) with the following files / info:

  1. A text file (word doc, pdf, etc.) that includes:
    1. A link to your homepage, which should link to all of your assignments (including hw04).
    2. A link to your GitHub repository (where your code files are stored).
    3. The answers to your accessibility questions.
  2. A screenshot of your WAVE report.