Project Title : Address Book

S/w Used : HTML, CSS, JavaScript with LocalStorage for storing data (little Bootstrap)

Framework Used : Text Editor

Description : A small addressbook which is having name, email, contact no, and city which is having CRUD operations.

Till Today :

• From v1.0, design changed completely.
• Code done for Adding new Contact with modal window.
• And whenever new entry added that will get displayed in the table dynamically with del and edit buttons.
• Delete button action also done.
• Alignment I could not able to do well, so took chatGPT help.

To Do:

• Edit action and Search are pending.
• Add New screen is not getting closed after adding – has to be rectified.
• Design should get changed in AddNew screen
• Table – Headings font size should get changed. (As used bootstrap table class – th is not getting changed through css – have to research in it.
• Some Code duplication is there, have to be optimized like keep in one function (inside validationPassed & addNewContact).

Technical WorkFlow:

function validationPassed : This function checks all the fields are not empty.

function getAddrBook : This function returns an Array which extracts the existing contacts from localStorage, if available, and parse it. Otherwise an empty array will be returned.

function addNewContact : If validationPassed, then new contact entry is created from 4 fields (Name, Email, ContactNo and City), together will form an object and pushed into addrBook array (got through getAddrBook) and will get saved into localStorage. showBook() function is getting called immediately to show the added contact.

function showBook() : This is actually a table where rows(contacts) with delete and edit buttons are getting added dynamically and will be shown.

function deleteCont(idx) : As the name suggests it will take the index of the array as input and delete the contact when the delete button pressed.

Output till now :

AddNew Screen:

gitlab : https://gitlab.com/Sugirtha/Kaniyam.git