View the step-by-step solution to:

Question



3. Feature Descriptions

3.1 A start page with an empty contact list

When a

user starts the application for the first time, it shows an empty list of contacts and two

buttons (or icons) allowing the use to list contacts or to create a new contact.

phpwBAANT.png

3.2 New contact page

When a user clicks the "New" button, it shows a form to let the user type in contact

Information

phpPxYrH0.png


All fields are required and the email has a pattern "[email protected]" pattern. The

phone number must be 10 digits not started with 0 and 1. When the user clicks submit with

valid data, it saves the data to the backend REST API. The web page then displays a details page.

3.3 Details Page

Once added, a details page is displayed as the following.

phpRGFZiy.png

A user can edit or delete this newly created contact.

3.4 Contact list allowing update, edit and delete

If a user clicks the index button, it shows all created contacts with buttons allowing the user to

see details, edit or delete it. When a user accesses the site with saved data, it shows the list too.


phpmOsWXm.png

3.5 The edit page

It's like the new page filled with data from the selected contact.

The user should be able to change any field. And valid changes are written to the backend when

the user submits the change.

phpmFHEWg.png

3.6 The Delete

If the user clicks the delete button, it shows a confirmation dialog. If the user cancels, nothing

happen. Otherwise, the contact is deleted from the backend and is removed from the web

page.

php0R3OAE.png

php0R3OAE.png

phpmFHEWg.png

phpmOsWXm.png

Contact Management
Index
+ New
Contact list
#
Name
Email
Phone
25
James Bond [email protected]
9989787876
DETAILS
EDIT
DELETE
26
Alice
[email protected]
38888883738
DETAILS
EDIT
DELETE

phpPxYrH0.png

phpRGFZiy.png

phpwBAANT.png

Recently Asked Questions

Why Join Course Hero?

Course Hero has all the homework and study help you need to succeed! We’ve got course-specific notes, study guides, and practice tests along with expert tutors.

  • -

    Study Documents

    Find the best study resources around, tagged to your specific courses. Share your own to gain free Course Hero access.

    Browse Documents
  • -

    Question & Answers

    Get one-on-one homework help from our expert tutors—available online 24/7. Ask your own questions or browse existing Q&A threads. Satisfaction guaranteed!

    Ask a Question
Let our 24/7 Web Design tutors help you get unstuck! Ask your first question.
A+ icon
Ask Expert Tutors You can ask You can ask ( soon) You can ask (will expire )
Answers in as fast as 15 minutes
A+ icon
Ask Expert Tutors