CS 330: Intro to HCI

CS 330: Intro to HCI

JavaScript

Due on Tue, 02/25 @ 11:59PM. 25 Points.

Background

Learning Objectives

The goal of homework 5 is to introduce you to some of the common uses of JavaScript in frontend web development. In particular, you will be practicing the following:

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

Relevant Lectures

In order to complete this assignment, you will be using the JavaScript fetch API and the API Tutor (proxy server) to query Spotify. Relevant lectures and labs:

Starter Files & Samples

Please begin by downloading the assignment files:

download assignment zip

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, 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 copy and use any code from the sample directory
  5. Start this assignment early so that you can go to office hours!

Assignment Instructions

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

Step #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 built-in 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 h3'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">
        <h3>BTS</h3>
        <div class="footer">
            <a href="https://open.spotify.com/artist/3Nrfpe0tUJi4K4DXYWgMUX" target="_blank">
                view on spotify
            </a>
        </div>
    </div>
</section>

Step #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 h3's inner HTML and p's inner HTML should be rendered dynamically using live Spotify data.
<section class="track-item preview" data-preview-track="https://p.scdn.co/mp3-preview/879c7106422b0b53852209da6a63210be7e09b01?cid=9697a3a271d24deea38f8b7fbfa0e13c">
    <img src="https://i.scdn.co/image/1aacaefb0ef07755e5a155d96ee7f1073063e428">
    <i class="fas play-track fa-play" aria-hidden="true"></i>
    <div class="label">
        <h3>Black Swan</h3>
        <p>
            BTS
        </p>
    </div>
</section>

Step #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 h3'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">
        <h3>Love Yourself 結 'Answer'</h3>
        <div class="footer">
            <a href="https://open.spotify.com/album/2lATw9ZAVp7ILQcOKPCPqp" target="_blank">
                view on spotify
            </a>
        </div>
    </div>
</section>

Step #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 in the page’s footer.
  2. Update the audioPlayer object with the track’s song preview URL: audioPlayer.setAudioFile(preview_url);
  3. Play the song: audioPlayer.play();

Extra Credit

The following enhancements can be completed for extra credit. Note: You are only entitled to 6 points extra credit in this class (3 percentage points).

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

Turn in a zip file of the your_task files, with your updated js/scripts.js file, and the original js/audio-player.js index.html and style.css files. You can make edits to any of the other files, but it shouldn’t be necessary.