jQuery Address Book

Introduction

This is the skeleton for an address book front-end application based on the address book API.

The API itself is hosted at https://loopback-rest-api-demo-ziad-saab.c9.io/api and is CORS-enabled, loosely meaning "you can access it thru AJAX from any domain".

This project was created by simply running foundation new address_book --libsass, and a bit of code was added on top of what Foundation generated.

In index.html, we removed all the content of the body and replaced it with a single div with ID app. This is a common pattern when creating a Single-Page Application. Indeed, our application will not be refreshing the browser's page when we interact with it. It will use AJAX requests to talk to an API, and display the results live.

In js/app.js, we created a basic skeleton for the application. This JavaScript file is divided into multiple sections:

Initialization section, where we load Foundation's JavaScript components and set some constants
A data-retrieval section. This presents a set of functions that talk to our API. The functions are using jQuery.getJSON to talk to the API and retrieve some content.

You will need to add some more functions in there and complete some existing functions. The functions in there return the result of jQuery.getJSON, which is a promise-like object on which you can call .then. You can see these functions being used in the next section. 3. A "views" section. The functions in there will use the data-retrieval functions to get some data from the API, and then use some of jQuery's DOM Manipulation functions to display the retrieved content on the page.

Take your time to identify these different sections in app.js, and look at the code in there.

Look more closely at the displayAddressBooksList function on line 38. Here we are creating elements that look like this: <li data-id="1">some name</li>. This is a common pattern, where we are attaching a piece of data to an HTML element. Later on, when this element is clicked, we are retrieving the ID -- in this case it's the ID of the address book we are displaying -- and then calling another function with it (look at line 42)

Work

Complete the provided application skeleton to get the following things done:

Upon entering the interface, the user should see a list of the first 5 address books, sorted by name
Below the list, there should be two pagination buttons: previous page and next page
The buttons should be active/inactive depending on whether there are more results to show
The address book names should be clickable. Upon clicking on an address book name, the interface switches to show a list of entries
The list of entries should show the first 5 entries, sorted by last name. Each entry should be displayed as Last Name, First Name
Above the list of entries should be a link to go back to the address book listing
Below the list of entries should be two pagination buttons, same as for the address book listing
The entries should be clickable. Upon clicking on an entry, the interface should switch to show the full entry using an HTML vertical table. The spec is the same as the command line version of the address book. Basically, display all the entry data as well as related data such as addresses, phones and emails.
Above the entry table should be a link to go back to the current address book

Challenge

As a challenge, add the following functionality:

When viewing an entry, an EDIT button is made available.
When clicking on EDIT, the view will toggle between "view" and "edit mode"
In "edit mode", the first name, last name and birthday will be changed to <input> elements. Editing them and pressing ENTER will change them thru the API
In "edit mode", each email, address and phone number will have a DELETE button next to it. Clicking this button should delete the entry in the API and update the UI
In "edit mode", each of email, address and phone sections will have an ADD button. Clicking this button should open a popup with a form to add a new sub-entry of that type

nk1tz / jquery-addressbook Goto Github PK