outoftime/README.md

## README.md

      
    Raw
  

              README.md
            
          
    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)


At the very top of the JavaScript code, write a new function called switchSong. Your function should take one parameter, called artSelector.
Your switchSong function should first hide all of the covers on the page, and then show the element whose selector is given with artSelector.
Add a body to the three click handler we provided for you. The click handler should call switchSong with the appropriate selector argument.
Now write click handlers for the other two songs. Each click handler should contain a call to switchSong.

Try it out! If you click a song title, you should see the art change to match the song you clicked.
Instructions (Part 2)


Add a second parameter to your switchSong function, called buttonSelector.
In the body of switchSong, add new instructions to make all of the buttons non-bold, and then make the element given by buttonSelector bold.
In your click handlers, pass a second argument to each call to switchSong with the appropriate button selector.

Try it out again! Now when you click a song title, not only will that song art appear, but the title will become bold.

  
## index.html
<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
    </head>
    <body>
        <ul id="picker">
            <li class="picker-button" id="show-mans-not-hot">Man’s Not Hot</li>
            <li class="picker-button" id="show-river">River</li>
            <li class="picker-button" id="show-him-and-i">Him &amp; I</li>
        </ul>

        <div>
            <img class="cover" id="mans-not-hot" src="https://images.genius.com/4ce6cfad6cbbe609e21173ccefd3050b.1000x1000x1.jpg">
            <img class="cover" id="river" src="https://t2.genius.com/unsafe/440x0/https%3A%2F%2Fimages.genius.com%2F4635cdb4b54d7a650b7b36db08e4883e.1000x1000x1.jpg">
            <img class="cover" id="him-and-i" src="https://t2.genius.com/unsafe/440x0/https%3A%2F%2Fimages.genius.com%2F7e683357d4ec053f4802b7884a2197ef.1000x1000x1.jpg">
        </div>
    </body>
</html>

## popcode.json
{"enabledLibraries":["jquery"],"hiddenUIComponents":["console","editor.css"]}

## script.js
// Write your new function here.


$("#show-river").click(function() {


});

## styles.css
.cover {
    width: 440px;
    display: none;
}

#picker {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    width: 440px;
}

.picker-button {
    flex: 1;
    text-align: center;
    padding: 0.5em;
    border: 1px solid gray;
    cursor: pointer;
}

#show-mans-not-hot {
    font-weight: bold;
}

#mans-not-hot {
    display: inline-block;
}
	<!DOCTYPE html>
	<html>
	<head>
	<title>Page Title</title>
	</head>
	<body>
	<ul id="picker">
	<li class="picker-button" id="show-mans-not-hot">Man’s Not Hot</li>
	<li class="picker-button" id="show-river">River</li>
	<li class="picker-button" id="show-him-and-i">Him & I</li>
	</ul>

	<div>
	<img class="cover" id="mans-not-hot" src="https://images.genius.com/4ce6cfad6cbbe609e21173ccefd3050b.1000x1000x1.jpg">
	<img class="cover" id="river" src="https://t2.genius.com/unsafe/440x0/https%3A%2F%2Fimages.genius.com%2F4635cdb4b54d7a650b7b36db08e4883e.1000x1000x1.jpg">
	<img class="cover" id="him-and-i" src="https://t2.genius.com/unsafe/440x0/https%3A%2F%2Fimages.genius.com%2F7e683357d4ec053f4802b7884a2197ef.1000x1000x1.jpg">
	</div>
	</body>
	</html>
	// Write your new function here.



	$("#show-river").click(function() {


	});
	.cover {
	width: 440px;
	display: none;
	}

	#picker {
	list-style-type: none;
	margin: 0;
	padding: 0;
	display: flex;
	width: 440px;
	}

	.picker-button {
	flex: 1;
	text-align: center;
	padding: 0.5em;
	border: 1px solid gray;
	cursor: pointer;
	}

	#show-mans-not-hot {
	font-weight: bold;
	}

	#mans-not-hot {
	display: inline-block;
	}