Phone Directory

script.js

/*

## Requirements:

- It has three fields Name, Mobile and Email. All 3 are required fields.
- Clicking on the Add Contact button should add the contact to the table.
- Before adding a contact, the following validations should occur:
    - Name - Should contain only Alphabets and Space. Should be less than or equal to 20 characters in length.
    - Mobile - Should contain only Numbers.Should be equal to 10 characters in length.
    - Email
      - Should be of a valid format
        - Email prefix can contain only alphanumeric characters and period character (".")
        - Email domain can contain only alphanumeric characters and must contain one period character (".")
        - Email prefix and domain should be joined with "@" symbol
      - Should be less than 40 characters in length.
- Show an error div with id 'error' if there is any error in input format or if there is any empty field.
- Error div should be displayed by default
- Valid contacts should get added sequentially in the table.
- After adding a valid contact, all fields should be reset to empty.
- Clicking on the Name heading in the table should sort it by ascending order of the contact name. Further clicks should alternately sort descending then ascending.

    ✓ should show error when input fields are empty (653 ms)

    ✓ should show error when invalid name is given (397 ms)

    ✓ should show error when invalid mobile number is given (271 ms)

    ✓ should show error when invalid email is given (210 ms)

    ✓ should add an item to the table when all fields are valid (262 ms)

    ✓ should reset input fields after adding a contact (183 ms)

    ✓ should allow sort by Contact Name Ascending (217 ms)

    ✓ should allow sort by Contact Name Descending (189 ms)
*/

document.addEventListener('DOMContentLoaded', () => {
    const submitButton = document.getElementById('submit');
    const errorDiv = document.getElementById('error');
    const contactsTableBody = document.querySelector('#summaryTable tbody');
    const sortNameHeader = document.getElementById('nameColumn');

    // Initial contacts list
    let contacts = [...window.contactsList]; // Use a copy of the initial list to avoid mutation issues
    let sortAscending = true; // Start with ascending order

    // Function to validate the input fields
    function validateInput(name, phone, email) {
        const nameRegex = /^[A-Za-z\s]{1,20}$/;
        const phoneRegex = /^\d{10}$/;
        const emailRegex = /^[A-Za-z0-9.]+@[A-Za-z0-9]+\.[A-Za-z]+$/;

        if (!name || !phone || !email) return false;
        if (!nameRegex.test(name)) return false;
        if (!phoneRegex.test(phone)) return false;
        if (!emailRegex.test(email) || email.length > 40) return false;

        return true;
    }

    // Function to display contacts in the table
    function displayContacts(contacts) {
        contactsTableBody.innerHTML = '';

        contacts.forEach(contact => {
            const row = document.createElement('tr');
            row.innerHTML = `<td>${contact.name}</td><td>${contact.mobile}</td><td>${contact.email}</td>`;
            contactsTableBody.appendChild(row);
        });
    }

    // Function to sort contacts by name
    function sortContactsByName(contacts, ascending) {
        return contacts.sort((a, b) => {
            if (ascending) {
                return a.name.localeCompare(b.name);
            } else {
                return b.name.localeCompare(a.name);
            }
        });
    }

    // Initial display of contacts
    displayContacts(contacts);

    submitButton.addEventListener('click', (e) => {
        e.preventDefault();

        const nameInput = document.getElementById('name');
        const phoneInput = document.getElementById('mobile');
        const emailInput = document.getElementById('email');

        const name = nameInput.value.trim();
        const phone = phoneInput.value.trim();
        const email = emailInput.value.trim();

        if (!validateInput(name, phone, email)) {
            errorDiv.style.display = 'block';
            return;
        } else {
            errorDiv.style.display = 'none';
        }

        const contact = { name, mobile: phone, email };
        contacts.push(contact);
        displayContacts(contacts);

        nameInput.value = '';
        phoneInput.value = '';
        emailInput.value = '';
    });

    sortNameHeader.addEventListener('click', () => {
        const sortedContacts = sortContactsByName([...contacts], sortAscending);
        displayContacts(sortedContacts);
        sortAscending = !sortAscending; // Toggle the sorting order
    });

    // Hide the error div by default
    errorDiv.style.display = 'none';
});