Javascript 1 - Dynamic Content

Part 1

Task 1.1: Output a Message on a Pop-up Window

Open HTML File

<!DOCTYPE html>
<html>
<head>
    <title>Task 1.1</title>
    <script>
        function greeting() {
            alert("Hello!");
        }
    </script>
</head>
<body onload="greeting();">
</body>
</html>

Task 1.2: Variables

Open HTML File

<!DOCTYPE html>
<html>
<head>
    <title>Task 1.2</title>
    <script>
        function greeting() {
            var s;
            s = "Hello";
            alert(s);
        }
    </script>
</head>
<body onload="greeting();">
</body>
</html>

Task 1.3: Change HTML Content

Open HTML File

<!DOCTYPE html>
<html>
<head>
    <title>Task 1.3</title>
    <script>
        function greeting() {
            var s;
            s = "Hello";
            document.getElementById("message").innerHTML = s;
        }
    </script>
</head>
<body onload="greeting();">
    <div id="message"></div>
</body>
</html>

Task 1.4: String vs Number

Open HTML File

<!DOCTYPE html>
<html>
<head>
    <title>Task 1.4</title>
    <script>
        function greeting() {
            var s, x;
            s = "8";
            x = 8;
            document.getElementById("message1").innerHTML = s + s + x;
            document.getElementById("message2").innerHTML = s + (x + x);
            document.getElementById("message3").innerHTML = s + x + s;
        }
    </script>
</head>
<body onload="greeting();">
    <div id="message1"></div>
    <div id="message2"></div>
    <div id="message3"></div>
</body>
</html>

Task 1.5: Get the Input from the User

Open HTML File

<!DOCTYPE html>
<html>
<head>
    <title>Task 1.5</title>
    <script>
        function greeting() {
            var firstname;
            firstname = prompt("What is your first name?");
            document.getElementById("message").innerHTML = "Hello " + firstname + "!";
        }
    </script>
</head>
<body onload="greeting();">
    <div id="message"></div>
</body>
</html>

Part 2

Task 2.1: First and Last Name Formats

Open HTML File

<!DOCTYPE html>
<html>
<head>
    <title>Task 2.1</title>
    <script>
        function greeting() {
            var firstname, lastname;
            firstname = prompt("What is your first name?");
            lastname = prompt("What is your last name?");
            
            var output = "Hello " + lastname + " " + firstname + "!<br/><br/>";
            output += "Different ways to display your name:<br/>";
            output += firstname + " " + lastname + "<br/>";
            output += lastname + ", " + firstname;
            
            document.getElementById("message").innerHTML = output;
        }
    </script>
</head>
<body onload="greeting();">
    <div id="message"></div>
</body>
</html>

Task 2.2: Update Other HTML Elements (Fruit List)

Open HTML File

<!DOCTYPE html>
<html>
<head>
    <title>Task 2.2</title>
    <script>
        function addFruit() {
            var fruit, s;
            s = document.getElementById("fruit").innerHTML;
            fruit = prompt("Enter a fruit that you like");
            
            // Checks if user actually entered something
            if (fruit !== null && fruit !== "") {
                document.getElementById("fruit").innerHTML = "<li>" + fruit + "</li>" + s;
            }
        }
        
        function clearFruits() {
            document.getElementById("fruit").innerHTML = "";
        }
    </script>
</head>
<body>
    <h2>
        My favorite fruits
        <span style="cursor:pointer; color:blue;" onclick="addFruit();">[Add]</span>
        <span style="cursor:pointer; color:red;" onclick="clearFruits();">[Clear]</span>
    </h2>
    <ul id="fruit"></ul>
</body>
</html>