Contact Management System Using TypeScript
Last Updated :
04 Feb, 2025
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
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>
Similar Reads
Contact Management System Using TypeScript
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 effe
7 min read
Task Management App Using TypeScript
Task management apps help users organize their daily activities effectively. In this article, we will create a simple task management app that allows users to add and delete tasks. We’ll use HTML for structure, CSS for styling, and TypeScript for functionality to make it robust and type-safe. What W
7 min read
TypeScript Interface vs Type Statements
In TypeScript, interface and type are used to define the structure of objects and custom types. While interfaces enforce contracts for classes and support multiple inheritance, types offer flexibility for defining complex and reusable type aliases. Each serves distinct use cases. Table of Content In
3 min read
TypeScript Using Type Parameters in Generic Constraints
TypeScript Generics allows you to write reusable code that works with different types. In this article, we will explore how to use type parameters in generic constraints to ensure that which types are allowed in generic types or functions. Syntax:function functionName<Type extends ConstraintType
2 min read
Moment.js using with Typescript
In this article, we will learn how to use the Moment.js library with Typescript language. Typescript is a strongly-typed programming language that wraps JavaScript and gives it optional static typing. It is free and open source and is maintained by Microsoft. Using Moment.js with Typescript: To use
1 min read
Create a Contact Form using HTML CSS & JavaScript
A contact form is a web form used to collect user information and messages, facilitating communication between visitors and site owners. It is essential for feedback, inquiries, and support. Create a contact form using HTML for structure, CSS for styling, and JavaScript for validation and submission
3 min read
How to Pass Over an Element Using TypeScript and jQuery ?
This article will show how we can pass an HTML element to a function using jQuery and TypeScript together. There are different ways available in which we can pass an element to a function using TypeScript and jQuery as listed below. Before moving on to the implementation, make sure that you have jQu
4 min read
TypeScript Parameter Type Annotations
TypeScript Parameter type annotations are used to specify the expected data types of function parameters. They provide a way to explicitly define the types of values that a function expects as arguments. Parameter type annotations are part of TypeScript's static typing system, and they help catch ty
2 min read
Calculator App Using TypeScript
A calculator app is a perfect project for practising TypeScript along with HTML and CSS. This app will have basic functionalities like addition, subtraction, multiplication, and division. It provides a clean and interactive interface for the user while using TypeScript to handle logic safely and eff
6 min read
TypeScript Construct Signatures
TypeScript Construct Signatures define the shape of a constructor function, specifying the parameters it expects and the type of object it constructs. They use the new keyword in a type declaration to ensure the correct instantiation of classes or objects. Syntaxtype Constructor = new (param1: Type1
3 min read