Get Programming with JavaScript - Listings 18.05 and 18.06

Listings 18.05 and 18.06 - Movies, comments and a random greeting

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. <span id="greeting">Welcome!</span></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>

    <h4>Comments</h4>
    <ul id="comments"></ul>

    <div class="controls">

        <input type="text" id="txtComment" />

        <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";

    function getById (id) {
        return document.getElementById(id);
    }

    var rateButton = getById("rate");
    var ratingList = getById("rating");
    var movie = getById("movie");

    var commentsList = getById("comments");
    var commentBox = getById("txtComment");

    function rateMovie () {
        var rating = ratingList.value;
        var movieTitle = movie.innerHTML;

        var comments = commentsList.innerHTML;
        var comment = commentBox.value;

        comments += "<li>" + comment + " (" + rating + " stars)</li>";

        commentsList.innerHTML = comments;

        commentBox.value = "";
    }

    rateButton.addEventListener("click", rateMovie);

})();


// Add a random greeting
(function () {

    function getGreeting () {
        var hellos = [
            "Nanu nanu!",
            "Wassup!",
            "Yo!",
            "Hello movie lover!",
            "Ay up me duck!",
            "Hola!"
        ];

        var index = Math.floor(Math.random() * hellos.length);

        return hellos[index];
    }

    function updateGreeting () {
        para.innerHTML = getGreeting();
    }

    var para = document.getElementById("greeting");

    updateGreeting();

})();

Further Adventures

Listings 18.05 and 18.06 - Movies, comments and a random greeting - Tasks 1 & 2

Add a second text box for the rater's name.
Amend the comment code so the rater's name is included

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. <span id="greeting">Welcome!</span></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>

    <h4>Comments</h4>
    <ul id="comments"></ul>

    <div class="controls">

        <label for="txtComment">Comment:</label><input type="text" id="txtComment" />
        <label for="txtName">Name:</label><input type="text" id="txtName" />

        <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";

    function getById (id) {
        return document.getElementById(id);
    }

    var rateButton = getById("rate");
    var ratingList = getById("rating");
    var movie = getById("movie");

    var commentsList = getById("comments");
    var commentBox = getById("txtComment");
    var raterBox = getById("txtName");

    function rateMovie () {
        var rating = ratingList.value;
        var movieTitle = movie.innerHTML;

        var comments = commentsList.innerHTML;
        var comment = commentBox.value;
        var raterName = raterBox.value;

        comments += "<li>" + comment + " (" + rating + " stars) - " + raterName + "</li>";

        commentsList.innerHTML = comments;

        commentBox.value = "";
    }

    rateButton.addEventListener("click", rateMovie);

})();


// Add a random greeting
(function () {

    function getGreeting () {
        var hellos = [
            "Nanu nanu!",
            "Wassup!",
            "Yo!",
            "Hello movie lover!",
            "Ay up me duck!",
            "Hola!"
        ];

        var index = Math.floor(Math.random() * hellos.length);

        return hellos[index];
    }

    function updateGreeting () {
        para.innerHTML = getGreeting();
    }

    var para = document.getElementById("greeting");

    updateGreeting();

})();