Building Front-End Web Applications with Plain JavaScript/

...

/

Challenge Solution: Movie App Views

Challenge Solution: Movie App Views

Take a look at the solution to the challenge.

We'll cover the following...

Solution

Let’s look at the code for the challenge solution.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Creating a movie record</title>
  <script src="src/c/initialize.js"></script>
  <script src="src/m/Movie.js"></script>
  <script src="src/v/createMovie.js"></script>
  <script>
    window.addEventListener("load", pl.v.createMovie.setupUserInterface);
  </script>
</head>
<body>
<header>
  <h1>Create a new movie record</h1>
</header>
<main>
  <form id="Movie">
    <div><label>Movie ID: <input name="movieId" type="number"/></label></div>
    <div><label>Title: <input name="title" type="text"></label></div>
    <div><label>Release Date: <input name="releaseDate" type="date"/></label></div>
    <div><button type="button" name="commit">Save</button></div>
  </form>
</main>
<footer>
  <a href="index.html">Back to main menu</a>
</footer>
</body>
</html>
Solution

Explanation

Let’s look at an explanation of the solution given above.

createMovie.js

  • Line 6: We access the commit button of the Movie form defined in createMovie.html. This is used for the event handler.
  • Line 8: We access the retrieveAll() method defined in src/m/Book.js. This method loads all movie objects.
  • Lines 10–11: We set up what will happen when we click the “Commit”button on the createMovie.html
...