COMP 20: Web Programming

Lab: My Old Kentucky Home

Lab Objectives

  1. Practice writing JavaScript.
  2. Practice using the Document Object Model (DOM).
  3. Practice with using JavaScript objects.
  4. Understand event handling and using first-class function.
  5. Recognize the power of HTML5 (in this case, audio manipulation).

Overview

HTML5 introduces built-in media support via the <audio> and <video> elements, offering the ability to easily embed and manipulate media on web pages (Mozilla.org). In this lab, you will create a web page that annotates a music video with its lyrics, images, and perhaps other media.

The Music Video

The music video that you will annotate is for one of the most beloved State songs (source: https://www.youtube.com/watch?v=paMpJZgVP_k):

You are free to use the following to access the video on your page and there is no need to make a copy of the video onto your computer:

<video src="https://www.cs.tufts.edu/comp/20/my_old_kentucky_home.mp4" id="music_video" controls>
</video>

Lyrics to My Old Kentucky Home

The sun shines bright in My Old Kentucky Home,
'Tis summer, the people are gay;
The corn-top's ripe and the meadow's in the bloom
While the birds make music all the day.

The young folks roll on the little cabin floor,
All merry, all happy and bright;
By 'n' by hard times comes a knocking at the door,
Then My Old Kentucky Home, good night!

Chorus

Weep no more my lady
Oh weep no more today;
We will sing one song
For My Old Kentucky Home
For My Old Kentucky Home, far away

Getting Started

Once again, I am going to give you the HTML so you do not have to write it! Copy and paste the following HTML below as your index.html:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>My Old Kentucky Home</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>

<body>

<h1 id="title">My Old Kentucky Home</h1>

<video src="https://www.cs.tufts.edu/comp/20/my_old_kentucky_home.mp4" id="music_video" controls></video>
<div id="lyrics"></div>

<script>
	// Complete this section and create a CSS file named style.css
</script>
</body>
</html>	

Instructions

Using JavaScript, annotate the music video with the lyrics of the song in the <div id="lyrics">. You are free to annotate the music video any way that you want (e.g., by stanza, line-by-line). You must also use at least two images for your annotation (in any stanza). The only section of the HTML that you shall modify is inside the <script></script>. Finally, you must provide some styling for the page via style.css.

Readings and References

The README File

Every assignment and lab shall include a README file that describes the work. This description must:

  1. Identify what aspects of the work have been correctly implemented and what have not.
  2. Identify anyone with whom you have collaborated or discussed the assignment.
  3. Say approximately how many hours you have spent completing the assignment.
  4. Be written in either text format (README.txt) or in Markdown (README.md). No other formats will be accepted.

Warnings

Notes

Submitting Your Lab

Push all your files to a folder named my_old_kentucky_home inside of the private GitHub repo I created for you. Say that your private repository is named comp20-mchow, make sure all the files are pushed to comp20-mchow/my_old_kentucky_home.

# Inside your private GitHub repo folder (e.g., comp20-mchow)
git add .
git commit -m "Some good commit message here"
git push

Assessment

This lab is worth 5 points.