djibril-coulybaly/Phone-Directory

Phone Directory that allows users to add a contact with a name, number and email. Features include dynamic searching, ascending and descending sorting of contacts and validation/error handling

Phone Directory

📔 Table of Contents

• Introduction
• Getting Started
• Demonstration
• Directory Structure

---

Introduction

This web application demonstrates the use of asynchronous programming and filtering data. Created using HTML, CSS and JavaScript, the web application adds a contact to the directory with their name, number and email. The contacts are added sequentically to the directory.

Contacts are dynamically searched as the user is typing the number. The directory can be sorted in ascending or descending order by clicking on the directory headings - Name, Mobile and Email.

Validation and error handing have also been enforced to provide the user with a seamless experience.

---

🧰 Getting Started

To run the web application:

1. Navigate to the folder named "Web Application"
2. Open the file "index.html" in your browser
3. Enter the following information:
   • Name (Alphabet/whitespace only and ≤ 20 characters)
   • Number (Numbers only and ≤ 10 characters)
   • Email (Format 'xxx@xxx.xx' and ≤ 40 characters)

---

📷 Demonstration

---

📁 Directory Structure

|-- Web Application
|   |-- Assets
|   |   |-- CSS
|   |   |   '-- style.css
|   |   |-- JavaScript
|   |   |   |-- addContact.js
|   |   |   |-- displayContactSummary.js
|   |   |   '-- sortFilter.js
|   '-- index.html