Open In App

Contact Management System Using TypeScript

Last Updated : 04 Feb, 2025
Comments
Improve
Suggest changes
Like Article
Like
Report

The Contact Book App in TypeScript aims to create an organized system for managing and storing contact information. This tool allows users to add, edit, and delete contacts, ensuring easy access to personal details while providing a streamlined and user-friendly experience for managing contacts effectively.

What We Are Going To Create

We’ll build an application that allows users to

  • Enter contact details such as name, email, and phone number.
  • Add, edit, and delete contacts from the contact book.
  • Display a list of all saved contacts.
  • Search for contacts by name or email.
  • Ensure proper data entry with basic validation (e.g., valid email format).
  • Provide visual feedback when a contact is successfully added or updated.

Project Preview

Screenshot-edit
Contact Book Using TypeScript

Contact Book - HTML and CSS Setup

This HTML code creates a simple contact book form. It allows users to enter contact details such as name, email, and phone number. This CSS code provides styling for the contact book form, ensuring a clean, user-friendly design with modern touches like padding, borders, and hover effects for a seamless experience.

HTML 
<html>
<head>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
            margin: 0;
            padding: 0;
            width: 50vw;
            height: 50vw;
        }
        .container {
            width: 80%;
            margin: 0 auto;
            padding: 20px;
            background-color: #fff;
            box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
        }
        h1 {
            text-align: center;
            color: #333;
        }
        .form-container {
            margin-bottom: 30px;
        }
        .form-container input,
        .form-container select {
            width: 100%;
            padding: 10px;
            margin: 10px 0;
            border-radius: 4px;
            border: 1px solid #ccc;
        }
        .form-container button {
            padding: 10px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        .form-container button:hover {
            background-color: #45a049;
        }
        .contact-list {
            overflow-x: auto;
        }
        #contactTable {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }
        #contactTable th,
        #contactTable td {
            border: 1px solid #ddd;
            padding: 10px;
            text-align: center;
        }
        #contactTable th {
            background-color: #4CAF50;
            color: white;
        }
        #contactTable tr:hover {
            background-color: #f1f1f1;
        }
        button.delete-btn {
            background-color: #f44336;
            color: white;
            border: none;
            padding: 5px 10px;
            cursor: pointer;
        }
        button.delete-btn:hover {
            background-color: #d32f2f;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Contact Book</h1>
        <div class="form-container">
            <h2>Add Contact</h2>
            <form id="contactForm">
                <input type="text" id="name" placeholder="Name" required />
                <input type="text" id="phone" placeholder="Phone" required />
                <input type="email" id="email" placeholder="Email" required />
                <select id="label">
                    <option value="Family">Family</option>
                    <option value="Friend">Friend</option>
                    <option value="Business">Business</option>
                    <option value="Work">Work</option>
                </select>
                <button type="submit">Add Contact</button>
            </form>
        </div>
        <div class="contact-list">
            <h2>Contacts</h2>
            <table id="contactTable">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Phone</th>
                        <th>Email</th>
                        <th>Label</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>
    <script src="index.js"></script>
</body>
</html>

In this example

  • The HTML structure includes a form for users to input contact details (name, phone, email, and category) and a table to display contacts with columns for Name, Phone, Email, Label, and Actions (for deletion or modification).
  • The form and table are enclosed in a container, with headings to label each section.
  • The CSS applies basic styles for font, input fields, buttons, and table layout.
  • The form inputs and buttons are styled with padding, borders, and hover effects for improved interaction.
  • The contact table is styled for readability, with hover effects for rows and a red delete button for actions.

Contact Book - TypeScript Logic

This TypeScript code handles the logic for managing contacts in the contact book. It allows users to add, edit, and delete contacts, ensuring data integrity by validating the entered contact details (e.g., checking for a valid email format). The contact list is dynamically updated, and users receive visual feedback when a contact is successfully added, modified, or deleted.

JavaScript 
enum Label {
    Family = "Family",
    Friend = "Friend",
    Business = "Business",
    Work = "Work"
}

type Contact = {
    id: number;
    name: string;
    phone: string;
    email: string;
    label: Label;
};

let contacts: Contact[] = [];
const form = document.getElementById("contactForm") as HTMLFormElement;
const table = document.getElementById("contactTable") as HTMLTableElement;

function addContact(name: string, phone: string, email: string, label: Label = Label.Friend): Contact {
    const contact: Contact = {
        id: contacts.length + 1,
        name,
        phone,
        email,
        label
    };
    contacts.push(contact);
    return contact;
}

function removeContact(contactId: number): boolean {
    const initialLength = contacts.length;
    contacts = contacts.filter(contact => contact.id !== contactId);
    return contacts.length !== initialLength;
}

function render(): void {
    const tbody = table.querySelector("tbody");
    if (tbody) {
        tbody.innerHTML = "";
        contacts.forEach(contact => {
            const tr = document.createElement("tr");
            tr.innerHTML = `
                <td>${contact.name}</td>
                <td>${contact.phone}</td>
                <td>${contact.email}</td>
                <td>${contact.label}</td>
                <td><button class="delete-btn" onclick="deleteContact(${contact.id})">Delete</button></td>
            `;
            tbody.appendChild(tr);
        });
    }
}

function deleteContact(contactId: number): void {
    if (removeContact(contactId)) {
        render();
    }
}

form?.addEventListener("submit", (e: Event) => {
    e.preventDefault();
    const name = (document.getElementById("name") as HTMLInputElement).value;
    const phone = (document.getElementById("phone") as HTMLInputElement).value;
    const email = (document.getElementById("email") as HTMLInputElement).value;
    const label = (document.getElementById("label") as HTMLSelectElement).value as Label;
    addContact(name, phone, email, label);
    render();
    form.reset();
});

render();

In this example

  • Enums define contact labels (Family, Friend, Business, Work).
  • Contact type ensures consistent contact data with fields like name, phone, email, and label.
  • addContact adds a contact, while removeContact deletes a contact by ID.
  • renderContacts updates the table with contact details and a delete button.
  • Form submission adds a new contact, updates the table, and resets the form.

Convert to JavaScript File

Now You need to convert the TypeScript file into JavaScript to render by browser. Use one of the following command-

npx tsc task.ts
tsc task.ts
  • The command tsc task.ts compiles the calculator.ts TypeScript file into a task.js JavaScript file.
  • It places the output in the same directory as the input file by default.

Complete Code

HTML 
<html>
<head>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
            margin: 0;
            padding: 0;
            width: 50vw;
            height: 50vw;
        }
        .container {
            width: 80%;
            margin: 0 auto;
            padding: 20px;
            background-color: #fff;
            box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
        }
        h1 {
            text-align: center;
            color: #333;
        }
        .form-container {
            margin-bottom: 30px;
        }
        .form-container input,
        .form-container select {
            width: 100%;
            padding: 10px;
            margin: 10px 0;
            border-radius: 4px;
            border: 1px solid #ccc;
        }
        .form-container button {
            padding: 10px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        .form-container button:hover {
            background-color: #45a049;
        }
        .contact-list {
            overflow-x: auto;
        }
        #contactTable {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }
        #contactTable th,
        #contactTable td {
            border: 1px solid #ddd;
            padding: 10px;
            text-align: center;
        }
        #contactTable th {
            background-color: #4CAF50;
            color: white;
        }
        #contactTable tr:hover {
            background-color: #f1f1f1;
        }
        button.delete-btn {
            background-color: #f44336;
            color: white;
            border: none;
            padding: 5px 10px;
            cursor: pointer;
        }
        button.delete-btn:hover {
            background-color: #d32f2f;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Contact Book</h1>
        <div class="form-container">
            <h2>Add Contact</h2>
            <form id="contactForm">
                <input type="text" id="name" placeholder="Name" required />
                <input type="text" id="phone" placeholder="Phone" required />
                <input type="email" id="email" placeholder="Email" required />
                <select id="label">
                    <option value="Family">Family</option>
                    <option value="Friend">Friend</option>
                    <option value="Business">Business</option>
                    <option value="Work">Work</option>
                </select>
                <button type="submit">Add Contact</button>
            </form>
        </div>
        <div class="contact-list">
            <h2>Contacts</h2>
            <table id="contactTable">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Phone</th>
                        <th>Email</th>
                        <th>Label</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>
    <script>
        var Label;
        (function (Label) {
            Label["Family"] = "Family";
            Label["Friend"] = "Friend";
            Label["Business"] = "Business";
            Label["Work"] = "Work";
        })(Label || (Label = {}));
        var contacts = [];
        var form = document.getElementById("contactForm");
        var table = document.getElementById("contactTable");
        function addContact(name, phone, email, label) {
            if (label === void 0) { label = Label.Friend; }
            var contact = {
                id: contacts.length + 1,
                name: name,
                phone: phone,
                email: email,
                label: label,
            };
            contacts.push(contact);
            return contact;
        }
        function remove(contactId) {
            var contactToRemove = contacts.find(function (contact)
               { return contact.id === contactId; });
            if (contactToRemove) {
                contacts = contacts.filter(function (contact) 
                    { return contact.id !== contactToRemove.id; });
                return true;
            }
            return false;
        }
        function render() {
            var tbody = table.querySelector("tbody");
            if (tbody) {
                tbody.innerHTML = "";
                contacts.forEach(function (contact) {
                    var tr = document.createElement("tr");
                    tr.innerHTML = "\n<td>".concat(contact.name, "</td>\n<td>").concat(contact.phone, "</td>\n<td>").concat(contact.email, "</td>\n <td>").concat(contact.label, "</td>\n  <td><button class=\"delete-btn\" onclick=\"deleteContact(").concat(contact.id, ")\">Delete</button></td>\n");
                    tbody.appendChild(tr);
                });
            }
        }
        function deleteContact(contactId) {
            var success = remove(contactId);
            if (success) {
                render();
            }
        }
        form === null || form === void 0 ? void 0 : form.addEventListener("submit", function (e) {
            e.preventDefault();
            var name = document.getElementById("name").value;
            var phone = document.getElementById("phone").value;
            var email = document.getElementById("email").value;
            var label = document.getElementById("label")
                .value;
            addContact(name, phone, email, label);
            render();
            form.reset();
        });
        render();
    </script>
</body>
</html>

Next Article
TypeScript Parameter Type Annotations

S
sneha2dmo
Improve
Article Tags :

Similar Reads

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox