JesterMan/improvedmovie.html

## improvedmovie.html
<!DOCTYPE html>

<head>
    <link rel="stylesheet" type="style/css" href="assets/css/moviestyles.css">
    <script type="text/javascript" src="assets/js/improvedmovie.js"></script>
    <meta charset="UTF-8">
</head>

<body>
    <div id="wrapper">
        <img id="logo" src="assets/images/rocket-u-logo-large.png" alt="rocket-u-logo-large" width="387" height="124">
        <h1>Movie Picker</h1>
        <br>
        <br>

        <hr>
        <p>We have a great range of movies you can order, just choose the genres you're interested in then double-click the movie to add it to your pick list.</p>
        <input type=checkbox id="action" checked onchange="toggleList(this)">
        <label for="action">Action & Adventure</label>
        <input type=checkbox id="comedy" checked onchange="toggleList(this)">
        <label for="comedy">Comedy</label>
        <input type=checkbox id="scifi" checked onchange="toggleList(this)">
        <label for="scifi">Sci-Fi & Fantasy</label>

        <p>If you would like to highlight a new movie just click on the 'Highlight new movies' button below</p>

        <button type="submit" onclick="toggleNewMovies(this)">Highlight new movies</button>

        <div id="picklist">
            <h2>My Pick-list</h2>
            <ul>
                <li></li>
                <li></li>
            </ul>
            Double click a movie to start your list...
        </div>
<!-- 	lefty is a css formatting tag, nothing to see here -->
        <div class="lefty">

<!-- This is where I did something new, the class is so that the div will hide/be revealed when the corresponding checkbox is ticked -->
            <div class="action">

                <h2 class="action">Action & Adventure</h2>
<!-- This calls the script that replaces the list -->
                <script>
                    makeList(action);
                </script>
            </div>

            <div class="comedy">
                <h2 class="comedy">Comedy</h2>
                <script>
                    makeList(comedy);
                </script>
            </div>
            <div class="scifi">
                <h2 class="scifi">Sci-Fi & Fantasy</h2>
                <script>
                    makeList(scifi);
                </script>
            </div>
        </div>


        <hr>
        <div class="bottom">

            <p class="lefty">Copyright 2013 Rocketspace Inc.</p>
        </div>
    </div>
</body>

## improvedmovie.js

function toggleList(Checkbox) {

	var category = Checkbox.id,
		isChecked = Checkbox.checked,
		elements = document.getElementsByClassName(category),
		numElements = elements.length;

	if (isChecked) {

		// show all elements
		for (var i = 0; i < numElements; i++) {
			elements[i].style.display = "block"
		}

	} else {

		// hide all elements
		for (var i = 0; i < numElements; i++) {
			elements[i].style.display = "none"
		}
	}
}


function toggleNewMovies(button) {

	var buttonText = button.textContent,
		elements = document.getElementsByClassName('new'),
		numElements = elements.length;

	if (buttonText == "Highlight new movies") {

		// yellow 'em up
		for (var i = 0; i < numElements; i++) {
			elements[i].style.backgroundColor = "yellow"
		}

		button.textContent = "Unhighlight new movies";

	} else {

		// wipe 'em clean
		for (var i = 0; i < numElements; i++) {
			elements[i].style.backgroundColor = "transparent"
		}

		button.textContent = "Highlight new movies"
	}

}

// above is the code we've already seen


// arrays of movies, they look funny don't they?
var action = [' class="new"> Superman: Unbound', '>Hansel & Gretel', '>A Good Day to Die Hard', ' class="new">Skyfall', '>Night of the Templar'];
var comedy = ['>Junior High Spy', '>Movie 43', '>Quartet', '>It\'s a Disaster', '>Family Weekend'];
var scifi = ['>Pan\'s Labyrinth', ' class ="new">Game of Thrones', '>Merlin', '>Star Trek: First Contact', '>Star Wars'];

//replaces the unordered lists in the html code
function makeList(genre) {

	num = genre.length;

	document.write("<ul>")

	for (var i = 0; i < num; i++) {
// pulling off the closing carrot on the first li tag was the only way I could figure out how to get a class into the list
		document.write ("<li" + genre[i] +"</li>")
	}

	document.write("</ul>")
}

## moviestyles.css
body {
	background-color: #bbd1e0;
	font-family: Verdana;
	color: white;
}
#wrapper {
	width: 900px;
	margin-left: auto;
	margin-right: auto;
	padding: 20px;
	background-color: #003054;
	border-radius: 10px;
	overflow: auto;
}
#logo {
	float: left;
}

hr {
	clear:both;
}

h1 {
	vertical-align: middle;
}
#picklist {
	float: right;
}

.lefty{
	float: left;
}
ul {
	background-color: white;
	color: #003054;
	border-radius: 10px;
	border-color: white;
	list-style-type: none;
width: auto;
}
.bottom	{
	vertical-align: bottom;
}
	<!DOCTYPE html>

	<head>
	<link rel="stylesheet" type="style/css" href="assets/css/moviestyles.css">
	<script type="text/javascript" src="assets/js/improvedmovie.js"></script>
	<meta charset="UTF-8">
	</head>

	<body>
	<div id="wrapper">
	<img id="logo" src="assets/images/rocket-u-logo-large.png" alt="rocket-u-logo-large" width="387" height="124">
	<h1>Movie Picker</h1>
	<br>
	<br>

	<hr>
	<p>We have a great range of movies you can order, just choose the genres you're interested in then double-click the movie to add it to your pick list.</p>
	<input type=checkbox id="action" checked onchange="toggleList(this)">
	<label for="action">Action & Adventure</label>
	<input type=checkbox id="comedy" checked onchange="toggleList(this)">
	<label for="comedy">Comedy</label>
	<input type=checkbox id="scifi" checked onchange="toggleList(this)">
	<label for="scifi">Sci-Fi & Fantasy</label>

	<p>If you would like to highlight a new movie just click on the 'Highlight new movies' button below</p>

	<button type="submit" onclick="toggleNewMovies(this)">Highlight new movies</button>

	<div id="picklist">
	<h2>My Pick-list</h2>
	<ul>
	<li></li>
	<li></li>
	</ul>
	Double click a movie to start your list...
	</div>
	<!-- lefty is a css formatting tag, nothing to see here -->
	<div class="lefty">

	<!-- This is where I did something new, the class is so that the div will hide/be revealed when the corresponding checkbox is ticked -->
	<div class="action">

	<h2 class="action">Action & Adventure</h2>
	<!-- This calls the script that replaces the list -->
	<script>
	makeList(action);
	</script>
	</div>

	<div class="comedy">
	<h2 class="comedy">Comedy</h2>
	<script>
	makeList(comedy);
	</script>
	</div>
	<div class="scifi">
	<h2 class="scifi">Sci-Fi & Fantasy</h2>
	<script>
	makeList(scifi);
	</script>
	</div>
	</div>


	<hr>
	<div class="bottom">

	<p class="lefty">Copyright 2013 Rocketspace Inc.</p>
	</div>
	</div>
	</body>

	function toggleList(Checkbox) {

	var category = Checkbox.id,
	isChecked = Checkbox.checked,
	elements = document.getElementsByClassName(category),
	numElements = elements.length;

	if (isChecked) {

	// show all elements
	for (var i = 0; i < numElements; i++) {
	elements[i].style.display = "block"
	}

	} else {

	// hide all elements
	for (var i = 0; i < numElements; i++) {
	elements[i].style.display = "none"
	}
	}
	}


	function toggleNewMovies(button) {

	var buttonText = button.textContent,
	elements = document.getElementsByClassName('new'),
	numElements = elements.length;

	if (buttonText == "Highlight new movies") {

	// yellow 'em up
	for (var i = 0; i < numElements; i++) {
	elements[i].style.backgroundColor = "yellow"
	}

	button.textContent = "Unhighlight new movies";

	} else {

	// wipe 'em clean
	for (var i = 0; i < numElements; i++) {
	elements[i].style.backgroundColor = "transparent"
	}

	button.textContent = "Highlight new movies"
	}

	}

	// above is the code we've already seen




	// arrays of movies, they look funny don't they?
	var action = [' class="new"> Superman: Unbound', '>Hansel & Gretel', '>A Good Day to Die Hard', ' class="new">Skyfall', '>Night of the Templar'];
	var comedy = ['>Junior High Spy', '>Movie 43', '>Quartet', '>It\'s a Disaster', '>Family Weekend'];
	var scifi = ['>Pan\'s Labyrinth', ' class ="new">Game of Thrones', '>Merlin', '>Star Trek: First Contact', '>Star Wars'];

	//replaces the unordered lists in the html code
	function makeList(genre) {

	num = genre.length;

	document.write("<ul>")

	for (var i = 0; i < num; i++) {
	// pulling off the closing carrot on the first li tag was the only way I could figure out how to get a class into the list
	document.write ("<li" + genre[i] +"</li>")
	}

	document.write("</ul>")
	}
	body {
	background-color: #bbd1e0;
	font-family: Verdana;
	color: white;
	}
	#wrapper {
	width: 900px;
	margin-left: auto;
	margin-right: auto;
	padding: 20px;
	background-color: #003054;
	border-radius: 10px;
	overflow: auto;
	}
	#logo {
	float: left;
	}

	hr {
	clear:both;
	}

	h1 {
	vertical-align: middle;
	}
	#picklist {
	float: right;
	}

	.lefty{
	float: left;
	}
	ul {
	background-color: white;
	color: #003054;
	border-radius: 10px;
	border-color: white;
	list-style-type: none;
	width: auto;
	}
	.bottom {
	vertical-align: bottom;
	}