COMP 20: Web Programming

Lab: Union Strike Folk Song

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.

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 video with text and perhaps other media.

The Video

The video that you will annotate is an old song:

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/butwehavethepower.mp4" id="butwehavethepower" controls>
</video>

Lyrics to the "Union Strike Folk Song"

Lisa:
Come gather round, children,
It's high time ye learned
'Bout a hero named Homer
And a devil named Burns.

We'll march 'till we drop 
The girls and the fellas.
We'll fight 'till the death 
Or else fold like umbrellas.

So we'll march day and night
By the big cooling tower.
They have the plant

But we have the power.

Lenny:
Now do "Classical Gas!"

So we'll march day and night
By the big cooling tower.
They have the plant

But we have the power.

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>Union Strike Folk Song</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>

<body>

<h1 id="title">Union Strike Folk Song</h1>

<video src="https://www.cs.tufts.edu/comp/20/butwehavethepower.mp4" id="butwehavethepower" 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 video with the lyrics of the song inside the <div id="lyrics">, line by line or by verse. Finally, you must provide some styling for the page via style.css.

Readings and References

The README File

Each 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). Markdown is preferred. No other formats will be accepted. Please use all capital letters for README

This README.md file must be directly in the folder of the lab or assignment.

Important

Submitting Your Lab

Push all your files (the HTML, the CSS, the README) to a folder named butwehavethepower 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/butwehavethepower. Please do not add and push the video to repository!

# 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 4 points.