COMP 20: Web Programming

Lab: The Epic Fail

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 Mariah Carey's "Emotion" --from New Year Eve 2016. She didn't even sing. You have one job: show the words to the song, line by line, below the video in the "lyrics" div. Lyrics to her song (well, the first half of the song) is below. If you do not know the song, the official music video (1991) is available at https://www.youtube.com/watch?v=NrJEFrth27Q.

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

Lyrics to "Emotions"

You've got me feelin' emotions (starts at ~9 second mark in video)
Deeper than I've ever dreamed of
You've got me feelin' emotions
Higher than the heavens above

I feel good, I feel nice
I've never felt so satisfied
I'm in love, I'm alive
Intoxicated, flyin' high

Feels like a dream (at ~44 second mark in video, you can hear it)
When you touch me tenderly
I don't know if it's real
But I like the way I feel inside

You've got me feelin' emotions
Deeper than I've ever dreamed of
You've got me feelin' emotions
Higher than the heavens above

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

<body>

<h1 id="title">Fail</h1>

<video src="https://www.cs.tufts.edu/comp/20/fail.mp4" id="failvideo" 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 lines in the movie inside the <div id="lyrics">. You must annotate the video line-by-line corresponding to the respective characters. 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 file must be directly in the folder of the lab or assignment.

Important

Submitting Your Lab

Push all your files to a folder named annotation 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/annotation.

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