5. Set up the Folder Structure
Prev Chapter 5. Implementing Constraint Validation in a Plain JS Web App Next

5. Set up the Folder Structure

The folder structure of the validation app extends the folder structure of the minimal app by adding two subfolders:

  1. a css folder containing CSS style files for styling the user interface pages of the app;

  2. a lib folder containing the code library files errorTypes.mjs and util.mjs.

Thus, we get the following folder structure:

publicLibrary
  css
    main.css
    normalize.css
  lib
    errorTypes.mjs
    util.mjs
  src
    m
    v
  index.html

Notice that the src folder only contains two subfolders m and v (for model and view), as we have dropped the c folder since the minimal app's controller code for defining namespace objects is no longer needed due to the use of ES6 modules.

We discuss the contents of the added library files in the following subsections.

5.1. Provide utility functions and error classes in library files

We add two library files (in the form of ES6 modules) to the lib folder:

  1. util.mjs contains the definitions of a few utility functions such as isNonEmptyString(x) for testing if x is a non-empty string.

  2. errorTypes.mjs defines classes for error (or exception) types corresponding to the basic types of property constraints discussed above: StringLengthConstraintViolation, MandatoryValueConstraintViolation, RangeConstraintViolation, IntervalConstraintViolation, PatternConstraintViolation, UniquenessConstraintViolation. In addition, a class NoConstraintViolation is defined for being able to return a validation result object in the case of no constraint violation.

5.2. Create a start page

The start page index.html takes care of loading CSS style files with the help of the following two link elements: 

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

The first CSS file (normalize.css) is a widely used collection of style normalization rules making browsers render all HTML elements more consistently. The second file (main.css) contains the specific styles of the app's user interface (UI) pages.

Since the app's start page does not provide much UI functionality, but only a few navigation links and two buttons, only a few lines of code are needed for setting up the buttons' event listeners. This is taken care of in an embedded script element of type module:

<script type="module">
 import Book from "./src/m/Book.mjs";
 const clearButton = document.getElementById("clearData"),
       generateTestDataButtons = document.querySelectorAll("button.generateTestData");
 // Set event handler for the button "clearData"
 clearButton.addEventListener("click", Book.clearData);
 for (const btn of generateTestDataButtons) {
   btn.addEventListener("click", Book.generateTestData);
 }
</script>.

Notice how the Book class is loaded by importing the module Book.mjs from the src/m folder.

Prev Up Next
4. Make a JavaScript Class Model Home 6. Write the Model Code