Get Programming with JavaScript - Listings 18.03 and 18.04

Listings 18.03 and 18.04 - My Movie Ratings with a drop-down list

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); })();

Further Adventures

Listings 18.03 and 18.04 - My Movie Ratings with a drop-down list - Tasks 2 to 4

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); })();