Listings 18.03 and 18.04 - My Movie Ratings with a drop-down list
JS Bin
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>My Movie Ratings</title>
</head>
<body>
<h1>My Movie Ratings</h1>
<p>Brief info about my favorite movies.</p>
<h2>Movies</h2>
<div id="movieBox">
<h3 id="movie">Inside Out</h3>
<p>An emotional adventure inside the head of a young girl.</p>
<h4>Actors</h4>
<ul>
<li>Amy Poehler</li>
<li>Bill Hader</li>
</ul>
<h4>Directors</h4>
<ul>
<li>Pete Doctor</li>
<li>Ronnie del Carmen</li>
</ul>
<div class="controls">
<select id="rating">
<option>1</option>
<option>2</option>
<option selected>3</option>
<option>4</option>
<option>5</option>
</select>
<button id="rate">Rate</button>
</div>
</div>
</body>
</html>
JS:
(function () {
"use strict";
var rateButton = document.getElementById("rate");
var ratingList = document.getElementById("rating");
var movie = document.getElementById("movie");
function rateMovie () {
var rating = ratingList.value;
var movieTitle = movie.innerHTML;
alert("You gave " + movieTitle + " " + rating + " stars!");
}
rateButton.addEventListener("click", rateMovie);
})();
Listings 18.03 and 18.04 - My Movie Ratings with a drop-down list - Tasks 2 to 4
- Change which rating is automatically selected in the drop-down list.
- Add a paragraph element just before the closing body tag.
- Change the program so that your rating is shown in the paragraph rather than as a pop-up alert.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>My Movie Ratings</title>
</head>
<body>
<h1>My Movie Ratings</h1>
<p>Brief info about my favorite movies.</p>
<h2>Movies</h2>
<div id="movieBox">
<h3 id="movie">Inside Out</h3>
<p>An emotional adventure inside the head of a young girl.</p>
<h4>Actors</h4>
<ul>
<li>Amy Poehler</li>
<li>Bill Hader</li>
</ul>
<h4>Directors</h4>
<ul>
<li>Pete Doctor</li>
<li>Ronnie del Carmen</li>
</ul>
<div class="controls">
<select id="rating">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option selected>5</option>
</select>
<button id="rate">Rate</button>
</div>
</div>
<p id="ratingDisplay"></p>
</body>
</html>
JS:
(function () {
"use strict";
var rateButton = document.getElementById("rate");
var ratingList = document.getElementById("rating");
var movie = document.getElementById("movie");
var ratingDisplay = document.getElementById("ratingDisplay");
function rateMovie () {
var rating = ratingList.value;
var movieTitle = movie.innerHTML;
ratingDisplay.innerHTML = "You gave " + movieTitle + " " + rating + " stars!";
}
rateButton.addEventListener("click", rateMovie);
})();
