A new dog

The story so far

An add page

We have two pages in the dog pack app:

• Initialize the record set
• Show the record set

Here's the page that shows the pack:

Let's add a third page to:

• Add a new dog to the pack.

The page will have a form, using the same types of fields you've seen before:

Let's see how it works.

The Add button

Here's the HTML for the add button:

<button onclick="DogPack.add()"
    type="button" class="btn btn-primary"
    title="Add new dog">Add</button>

Clicking the button will run the function DogPack.add().

Here's pseudocode for what will happen:

Validate the form's data
Make a new dog record
Add the dog record to the DB
Jump to the pack list page

Let's start with the first step, validating the data.

The form has three fields:

• Name
• Description
• Weight

Name

Here's the HTML for the name field:

<div class="form-group">
    <label for="dogName">Name</label>
    <input type="text" class="form-control" id="dogName"
          aria-describedby="dogNameHelp" placeholder="Enter a name">
    <small id="dogNameHelp" class="form-text text-muted">E.g., Astro.</small>
</div>

Here's some JS code that will get the user's input for name, and validate it.

1. var newDogName = $("#dogName").val().trim();
2. if ( newDogName == "" ) {
3.     alert("Sorry, you didn't give a dog name.");
4.     return;
5. }

Line 2 checks the variable newDogName. If it's an empty string, show an error, and exit the function.

Now to validate description.

Description

Here's the form field's HTML:

<div class="form-group">
    <label for="dogDescription">Description</label>
    <input type="text" class="form-control" id="dogDescription"
          aria-describedby="dogDescriptionHelp"
          placeholder="Enter a short description">
    <small id="dogDescriptionHelp" class="form-text text-muted">
        E.g., Rurhro, Relroy.</small>
</div>

Here's the validation JS:

1. var newDogDescription = $("#dogDescription").val().trim();
2. if ( newDogDescription == "" ) {
3.     alert("Sorry, you didn't give a description.");
4.     return;
5. }

Line 2 tests to see if newDogDescription is an empty string. If so, show an error message, and exit the function.

Now we've validated two of the three fields:

• Name VALIDATED
• Description VALIDATED
• Weight

Weight

Here's the HTML:

<div class="form-group">
    <label for="dogWeight">Weight (kg)</label>
    <input type="number" min="1" class="form-control" id="dogWeight"
          aria-describedby="dogNameHelp" placeholder="Enter a weight">
    <small id="dogWeightHelp" class="form-text text-muted">E.g., 13.</small>
</div>

This is almost the same as the other fields, except that the input field will only accept a number that is at least 1.

Well, kinda. If the user types anything at all in the field, the browser will make sure that it is a number that is at least 1. However, the user can leave the field empty. Type nothing in it. The browser is OK with that.

But we aren't. We want the user to type a weight. Here is the JS.

1. var newDogWeight = $("#dogWeight").val();
2. if ( newDogWeight == "" ) {
3.     alert("Sorry, you didn't give a weight.");
4.     return;
5. }

OK, all three fields are validated.

Here the pseudocode again:

Validate the form's data  DONE
Make a new dog record  NEXT
Add the dog record to the DB
Jump to the pack list page

Make a new dog record

Here's a dog record from the DB initialization page:

{
    id: 11,
    name: "Bufford",
    description: "She can sniff it out.",
    weight: 26
}

OK, on our add form, the user typed the dog's name, description, and weight. We put it in variables during validation:

var newDogName =
    $("#dogName").val().trim();
...
var newDogDescription =
    $("#dogDescription").val().trim();
...
var newDogWeight =
    $("#dogWeight").val();

We can make a new dog record, like this:

var newDog = {
    id: WHAT GOES HERE?,
    name: newDogName,
    description: newDogDescription,
    weight: newDogWeight
};

Except, we need an id for the dog. It has to be unique. How to get that number?

Here's how: find the highest id so far, and add one to it.

This will guarantee that the new dog's id is unique.

TaffyDB to the rescue!

//Find the highest id so far.
var highestId = DogPack.packDb().max("id");
//New dog's id is one more.
var newDogId = highestId + 1;

Taffy's max() function does the work for us. It checks every record, and returns the highest value of the field id.

Add one to that, and we have the new dog's id.

Here's the complete code to create a new dog record:

//Add a new record.
//Find the highest id so far.
var highestId = DogPack.packDb().max("id");
//New dog's id is one more.
var newDogId = highestId + 1;
//Create a new object.
var newDog = {
    id: newDogId,
    name: newDogName,
    description: newDogDescription,
    weight: newDogWeight
};

Add the new dog to the database

Here the pseudocode again:

Validate the form's data  DONE
Make a new dog record  DONE
Add the dog record to the DB  NEXT
Jump to the pack list page

Just one JS statement:

//Add the new item.
DogPack.packDb.insert(newDog);

That's it. The new dog is in localStorage.

Marcus

Wait, I don't get it. That line doesn't say localStorage anywhere.

Georgina

I know!

When the page loaded, we bound a Taffy database to localStorage. So, changes to the DB are written to storage automatically.

Right! This is from the page load event:

1. $(document).ready(function () {
2.     ....
3.     //Create an empty Taffy DB.
4.     DogPack.packDb = TAFFY();
5.     //Link the DB to localStorage. Existing items will be loaded.
6.     DogPack.packDb.store("dogPack");

Line 6 binds packDb to localStorage("dogPack").

Redirect

Here the pseudocode again:

Validate the form's data  DONE
Make a new dog record  DONE
Add the dog record to the DB  DONE
Jump to the pack list page  NEXT

The last line is done like this:

//Go to list page.
window.location.href = "index.html";

Here's all of the code for the add button:

DogPack.add = function() {
    //Get input and validate.
    var newDogName = $("#dogName").val().trim();
    if ( newDogName == "" ) {
        alert("Sorry, you didn't give a dog name.");
        return;
    }
    var newDogDescription = $("#dogDescription").val().trim();
    if ( newDogDescription == "" ) {
        alert("Sorry, you didn't give a description.");
        return;
    }
    var newDogWeight = $("#dogWeight").val();
    if ( newDogWeight == "" ) {
        alert("Sorry, you didn't give a weight.");
        return;
    }
    //Data OK.
    //Add a new record.
    //Find the highest id so far.
    var highestId = DogPack.packDb().max("id");
    //New dog's id is one more.
    var newDogId = highestId + 1;
    //Create a new object.
    var newDog = {
        id: newDogId,
        name: newDogName,
        description: newDogDescription,
        weight: newDogWeight
    };
    //Add the new item.
    DogPack.packDb.insert(newDog);
    //Go to list page.
    window.location.href = "index.html";
};

The cancel button

Here's the add form again:

The last thing is the cancel button. Here's the HTML:

<button onclick="DogPack.forghedaboudit()"
        type="button" class="btn btn-danger"
        title="Forghedaboudit">Cancel</button>

Notice the btn-danger class. That's what makes the button red.

Here's the JS:

1. /**
2. * Forghedaboudit.
3. */
4. DogPack.forghedaboudit = function(){
5.     if ( confirm("Are you sure?") ) {
6.         window.location.href = "index.html";
7.     }
8. };

If the user clicks OK, confirm() returns true, otherwise it returns false.

If confirm() returns true, then:

window.location.href = "index.html";

That jumps to the dog list page, without creating a new dog.

Exercise

<footer class="blockquote-footer">

<small class='blockquote-footer'>

Summary