CSCI 185: Fall 2022

Introduction to Programming for the Web

CSCI 185: Fall 2022

Fish by @akeatk

Assignments > HW5: Practice with Data: Implement a Spotify Interface

Due on Thu, 12/01 @ 11:59PM. 16 Points.

I. Background

1. Learning Objectives

Homework 5 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

2. 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.

3. Demo

Please see this video for a demo of what your app should look like when you’re done.

4. Assignment Rules / Guidelines

  1. You can make as many helper functions as you want to complete the assignment.
  2. All server queries must be done using the JavaScript fetch API.
  3. 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)
  4. We will be working on this homework DURING class. It is to your benefit to attend all of the remaining classes.

II. 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 in the list of artists that is returned from Spotify (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 src h2's inner HTML and p's inner HTML should be rendered dynamically using live Spotify data.
<section class="track-item preview">
    <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>
</section>

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. Listening to the Tracks

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

  1. Modify the #artist-section’s h1 tag to say “Now Playing”
  2. Modify the #artist section’s innerHTML to be an embedded iFrame of the selected song. Please see the embeddable-track-demo.html file for sample code.
    • Note that the src of the iframe has a reference to the track’s id.

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 10 points extra credit on this assignment.

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

What to Turn In

Please Read Carefully: Before you submit this week, please edit your homepage by adding a link to this homework.

To submit this week’s homework assignment, please create and upload a zip file to the Moodle (under the Homework 5 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 hw05).
    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.