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:

• A link to the GitHub repository created as a result of your latest attempt at this practice WOD. Make sure you include the complete URL so that I can click on it in my mailer. Note: the final commit to the branch of the repo associated with this WOD must have been made before the submission time and date, otherwise you will not receive credit for this assignment.

• The number of times you have attempted this practice WOD so far, and for each time, how long it took you.

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.