E43: Digits, Part 2

For this experience, you will continue designing mockup pages for Digits.

When you are finished, your digits application will implement two additional pages: an “Add Contact” page:

and an “Edit Contact” page:

Before starting this WOD, download meteor-example-form, make sure it runs on your laptop, and watch the associated screencast so you understand how it works.

As with the last WOD, feel free to watch me solve it first, and then try it yourself.

Note that switching GitHub branches on a running meteor application has the potential to put the application into an inconsistent state. To minimize problems, whenever you switch branches while doing meteor development, it is best to:

  1. Quit meteor.
  2. Invoke meteor reset to clear out the contents of the database.
  3. Re-invoke meteor. For applications based upon meteor-application-template, you can use meteor npm run start, which runs a script found in package.json that resolves to meteor --no-release-check --settings ../config/settings.development.json.

The WOD

Ready? Let’s begin:

  1. Start your timer.

  2. Create and switch to a branch called “add-edit-mockups-1” in your local repository. You will do all the work for this WOD in this branch.

  3. Create a new page called “Add Contact”:

    • There will be two files called add-contact-page.html and add-contact-page.js in the imports/ui/pages directory.
    • Those files must be imported by the index.js file in their directory.
    • These files will define a template called “Add_Contact_Page”.
    • The router will direct to this page via the url /add-contact.
    • The template will present a form with input controls for first, last, address, phone, and email as strings.
    • The menu will provide a link to this page.
  4. Create a new page called “Edit Contact”:

    • There will be two files called edit-contact-page.html and edit-contact-page.js in the imports/ui/pages directory.
    • These files will define a template called “Edit_Contact_Page”.
    • The template will present a form with input controls for first, last, address, phone, and email as strings.
    • The router will direct to this page via the url /edit-contact/:id.
    • (We will create a link to this page later.)
  5. Once you’ve finished, commit your changes to GitHub, and check to see that your changes are there.

  6. Stop your timer and record your time. Be sure to record it, because you will need your WOD time data when you write your technical essay.

Rx: <16 min Av: 16-20 min Sd: 20-25 min DNF: 25+ min

Demonstration

You can watch this before doing the WOD if you like:

If you want to try this WOD again, just commit your branch, then switch to the master branch to reset your system to its state at the end of the first Digits experience. Then create a new branch called add-edit-mockups-2 and start over.

Submission instructions

By the time and date indicated on the Schedule page, submit this assignment via Laulima.

Your submission should contain:

You will receive full credit for this practice WOD as long as you have attempted it at least once and submitted the email with all required data before the due date. Your code does not have to run perfectly for you to receive full credit. However, if you do not repeat each practice WOD until you can finish it successfully in at least AV time, you are unlikely to do well on the in-class WOD. To reduce the stress associated with this course, I recommend that you repeat each practice WOD as many times as necessary to achieve at least AV before its due date.