Building Front-End Web Applications with Plain JavaScript/

...

/

Challenge Solution: Subtypes

Challenge Solution: Subtypes

Let’s take a look at the solution to the subtypes challenge.

We'll cover the following...

Solution

Let’s look at the solution code.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>Plain JS Subtyping App: Manage Actors</title>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>

    <meta name="theme-color" content="#ffffff"/>
    <link rel="icon" href="favicon.svg"/>
    <link rel="mask-icon" href="mask-icon.svg" color="#000000"/>
    <link rel="apple-touch-icon" href="apple-touch-icon.png"/>
    <link rel="manifest" href="manifest.json"/>

    <link rel="stylesheet" href="css/normalize.css"/>
    <link rel="stylesheet" href="css/main.css"/>

    <script src="src/v/actors.mjs" type="module"></script>
</head>
<body>
<header>
    <div class="wrapper clearfix">
        <div class="title">
            <figure><a href="index.html">
                <img alt="" title="Home Button"
                     src="favicon.svg" /></a></figure>
            <h1>Manage actor data</h1>
        </div>
        <nav>
            <ul>
                <li><a href="movies.html">Movies</a></li>
                <li><a href="directors.html">Directors</a></li>
                <li><a href="actors.html">Actors</a></li>
                <li><a href="people.html">People</a></li>
            </ul>
        </nav>
    </div>
</header>
<main>
    <div class="wrapper clearfix">
        <!-- ======================================================= -->
        <section id="Actor-M" class="UI-Page">
            <!-- ======================================================= -->
            <h1>Manage actor data</h1>
            <ul class="menu">
                <li>
                    <button type="button" id="RetrieveAndListAll">Retrieve/list all actor records</button>
                </li>
                <li>
                    <button type="button" id="Create">Create a new actor record</button>
                </li>
                <li>
                    <button type="button" id="Update">Update an actor record</button>
                </li>
                <li>
                    <button type="button" id="Delete">Delete an actor record</button>
                </li>
            </ul>
            <div class="button"><a href="index.html">Back to Main menu</a></div>
        </section>
        <!-- ======================================================= -->
        <section id="Actor-R" class="UI-Page">
            <!-- ======================================================= -->
            <h1>List all actors</h1>
            <table id="actors">
                <thead>
                <tr>
                    <th>ID</th>
                    <th>Name</th>
                    <th>Agent</th>
                </thead>
                <tbody></tbody>
            </table>
            <div class="button">
                <button type="button" class="back-to-menu">Back to menu</button>
            </div>
        </section>
        <!-- ======================================================= -->
        <section id="Actor-C" class="UI-Page">
            <!-- ======================================================= -->
            <h1>Create a new actor record</h1>
            <form>
                <div class="field">
                    <label>ID: <input type="text" name="personId"/></label>
                </div>
                <div class="field">
                    <label>Name: <input type="text" name="name"/></label>
                </div>
                <div class="field">
                    <label>Agent: <input type="text" name="agent"/></label>
                </div>
                <div class="button-group">
                    <button type="submit" name="commit">Save</button>
                    <button type="button" class="back-to-menu">Back to menu</button>
                </div>
            </form>
        </section>
        <!-- ======================================================= -->
        <section id="Actor-U" class="UI-Page">
            <!-- ======================================================= -->
            <h1>Update an actor record</h1>
            <form>
                <div class="select-one">
                    <label>Select actor: <select name="selectActor"></select></label>
                </div>
                <div class="field">
                    <label>ID:
                        <output name="personId"></output>
                    </label>
                </div>
                <div class="field">
                    <label>Name: <input type="text" name="name"/></label>
                </div>
                <div class="field">
                    <label>Agent: <input type="text" name="agent"/></label>
                </div>
                <div class="button-group">
                    <button type="submit" name="commit">Save changes</button>
                    <button type="button" class="back-to-menu">Back to menu</button>
                </div>
            </form>
        </section>
        <!-- ======================================================= -->
        <section id="Actor-D" class="UI-Page">
            <!-- ======================================================= -->
            <h1>Delete an actor record</h1>
            <form>
                <div class="select-one">
                    <label>Select actor: <select name="selectActor"></select></label>
                </div>
                <div class="button-group">
                    <button type="submit" name="commit">Delete</button>
                    <button type="button" class="back-to-menu">Back to menu</button>
                </div>
            </form>
        </section>
    </div>
</main>
<footer>
    <div class="foot-content wrapper">
        Copyright © 2021 Mina Lee (Web Applications | SS 2021),
        Cyber Security, Brandenburg University of Technology, Germany.
    </div>
</footer>
</body>
</html>
Solution

Explanation

Let’s take a look at the explanation of the solution.

src/m/Movie.mjs

  • Line 21: Here, we define the enumeration types. ...