Challenge: Movie Application Views
Discover how to implement the views of a movie management app using plain JavaScript. This lesson guides you through coding the user interface files, applying MVC principles, and using localStorage to handle movie data with CRUD operations. You will practice generating sample data and test your implementation step-by-step.
We'll cover the following...
Problem statement
Below, we’ve been given the Movie App. Its purpose is to manage information about movies. The application deals with just one object type—Movie—as depicted in the following class diagram:
The views for this application have not been implemented, but a general template of what the files are supposed to contain has been given. Our task is to implement the code in the four view files found in src/v.
We can use the sample data shown in the table below to test our application. This data will be generated automatically upon pressing the “Generate” button if our views have been implemented correctly.
Sample movie data
Movie ID | Title | Release Date |
1 | Pulp Fiction | 1994-05-12 |
2 | Star Wars | 1977-05-25 |
3 | Casablanca | 1943-01-23 |
4 | The Godfather | 1972-03-15 |
Implementation
Our code will be implemented in the widget below. The sections we have to edit have been highlighted.
<!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>