Get Programming with JavaScript - Listings 18.01 and 18.02

Listings 18.01 and 18.02 - My Movie Ratings greetings with button

HTML:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>My Movie Ratings</title>
</head>
<body>

<button id="btnGreeting">Say Hi</button>

<p id="greeting">Welcome!</p>

</body>
</html>

JS:

(function () {
    "use strict";

    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 btn = document.getElementById("btnGreeting");
    var para = document.getElementById("greeting");

    btn.addEventListener("click", updateGreeting);

    updateGreeting();

})();

Further Adventures

Listings 18.01 and 18.02 - My Movie Ratings greetings with button - Tasks 2 to 4

Add a second button to the HTML with the caption "Say Bye"
Add a getBye function to the code that returns a random goodbye message.
Add an updateBye function and make it so that clicking your button displays the message on the web page.

HTML:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>My Movie Ratings</title>
</head>
<body>

<button id="btnGreeting">Say Hi</button>

<button id="btnBye">Say Bye</button>

<p id="greeting">Welcome!</p>

</body>
</html>

JS:

(function () {
    "use strict";

    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 getBye () {
        var byes = [
            "Bye!",
            "Ciao!",
            "Adios!",
            "Hasta la vista!",
            "See you!",
            "Missing you!"
        ];

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

        return byes[index];
    }

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

    function updateBye () {
        para.innerHTML = getBye();
    }

    var btn = document.getElementById("btnGreeting");
    var btnBye = document.getElementById("btnBye");
    var para = document.getElementById("greeting");

    btn.addEventListener("click", updateGreeting);
    btnBye.addEventListener("click", updateBye);

    updateGreeting();

})();