Mat Brown outoftime

Song Picker

Your goal is to make the song picker fully work. When the title of a song is clicked:

That song’s album art should appear
The song’s title should be bold

You can check out a fully working demo.

Instructions (Part 1)

Song Picker

Your goal is to make the song picker fully work. When the title of a song is clicked:

That song’s album art should appear
The song’s title should be bold

You can check out a fully working demo.

Instructions (Part 1)

Borough Classifier

Add class attributes to the list items. Each list item‘s class attribute should correspond to the borough it’s in. For instance, the first item might have the class manhattan, because Times Square is in Manhattan.

Then, write CSS that gives each borough its own unique style.

Make sure the class attributes you add to your HTML match the class selectors in the CSS exactly!

If you finish early…

Borough Classifier

Using the first item as an example, add class attributes to the remaining list items. Each list item‘s class attribute should correspond to the borough it’s in.

Then, finish the CSS by giving each borough its own unique style.

Make sure the class attributes you add to your HTML match the class selectors in the CSS exactly!

Borough Reference

Borough Classifier

Using the first two items as an example, add class attributes to the remaining list items.

Make sure the class attributes you add to your HTML match the class selectors in the CSS exactly!

If you finish early, add your own styles to the different boroughs.

Borough Reference

Subway Line Colors

Give all the subway lines the right color!

Look in the HTML—we have assigned a class corresponding to the subway line color for some of the trains.

First, assign the appropriate class to the rest of the list items. For instance, you should assign the seventh-ave (red) line to the 2 train.

Subway Line Colors

Give all the subway lines the right color!

Look in the HTML—we have assigned a class corresponding to the subway line color for each individual line.

Start with the Seventh Avenue line, which has the class seventh-ave. Then see how many other lines you can get through!

You do not need to edit the HTML; you only need to add CSS.

	function makeMakeEvaluateExpression() {
	function makeEvaluateExpression(evalInContext) {
	return function(expr) {
	return evalInContext(
	`({
	next: makeEvaluateExpression(function(expr) { return eval(expr); }),
	value: eval(${JSON.stringify(expr)})
	})`,
	);
	};

	<!DOCTYPE html>
	<html>
	<head>
	<title>Page Title</title>
	</head>
	<body>
	does this all still work
	</body>
	</html>

	<!DOCTYPE html>
	<html>
	<head>
	<title>Classes and IDs Practice</title>
	</head>
	<body>
	<h1>What can Carlton eat?</h1>
	<img src="https://pmcvariety.files.wordpress.com/2015/08/alfonso-ribeiro-fresh-prince-of-bel-air.jpg?w=670&h=377&crop=1">
	<ul>
	<li>Steak</li>