├── index.html
├── public
├── index.js
├── models
│ └── Contact.js
└── services
│ └── ContactService.js
├── src
├── index.ts
├── models
│ └── Contact.ts
└── services
│ └── ContactService.ts
├── style.css
└── tsconfig.json
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Contact Management App
7 |
8 |
9 |
10 | Contact Management App
11 |
12 |
13 |
Add Contact
14 |
15 |
16 |
17 |
18 |
19 |
20 |
24 |
25 |
26 |
27 |
28 |
--------------------------------------------------------------------------------
/public/index.js:
--------------------------------------------------------------------------------
1 | "use strict";
2 | Object.defineProperty(exports, "__esModule", { value: true });
3 | // // without DOM
4 | const Contact_1 = require("./models/Contact");
5 | const ContactService_1 = require("./services/ContactService");
6 | const contactService = new ContactService_1.default();
7 | // Add contacts
8 | const contact1 = new Contact_1.default(1, 'Alice', 'alice@example.com', '123-456-7890');
9 | const contact2 = new Contact_1.default(2, 'Bob', 'bob@example.com', '987-654-3210');
10 | contactService.addContact(contact1);
11 | contactService.addContact(contact2);
12 | // Get contacts
13 | const contacts = contactService.getContacts();
14 | console.log('All Contacts:', contacts);
15 | // Delete a contact
16 | contactService.deleteContact(1);
17 | console.log('current Contacts:', contactService.getContacts());
18 | // Update a contact
19 | const contactIdToUpdate = 2;
20 | const updatedContact = new Contact_1.default(contactIdToUpdate, 'Updated Alice', 'updated@example.com', '555-555-5555');
21 | contactService.updateContact(contactIdToUpdate, updatedContact);
22 | // With DOM
23 | // Import the Contact and ContactService classes
24 | // import Contact from './models/Contact.js';
25 | // import ContactService from './services/ContactService.js';
26 | // // Create an instance of ContactService
27 | // const contactService = new ContactService();
28 | // // Get references to the HTML elements
29 | // const nameInput = document.getElementById('nameInput') as HTMLInputElement;
30 | // const emailInput = document.getElementById('emailInput') as HTMLInputElement;
31 | // const phoneInput = document.getElementById('phoneInput') as HTMLInputElement;
32 | // const addContactButton = document.getElementById(
33 | // 'addContactButton'
34 | // ) as HTMLButtonElement;
35 | // const contactList = document.getElementById('contactList') as HTMLUListElement;
36 | // // Function to render the contact list
37 | // function renderContactList(): void {
38 | // if (!contactList) return;
39 | // contactList.innerHTML = '';
40 | // const contacts: Contact[] = contactService.getContacts();
41 | // contacts.forEach((contact) => {
42 | // const listItem = document.createElement('li');
43 | // listItem.textContent = `${contact.name} | ${contact.email} | ${contact.phone}`;
44 | // if (contactList) contactList.appendChild(listItem);
45 | // });
46 | // }
47 | // // Event listener for the Add Contact button
48 | // if (addContactButton && nameInput && emailInput && phoneInput) {
49 | // addContactButton.addEventListener('click', () => {
50 | // const name: string = nameInput.value;
51 | // const email: string = emailInput.value;
52 | // const phone: string = phoneInput.value;
53 | // if (name && email && phone) {
54 | // const newContact: Contact = new Contact(Date.now(), name, email, phone);
55 | // contactService.addContact(newContact);
56 | // renderContactList();
57 | // // Clear input fields
58 | // nameInput.value = '';
59 | // emailInput.value = '';
60 | // phoneInput.value = '';
61 | // } else {
62 | // alert('Please fill in all fields.');
63 | // }
64 | // });
65 | // }
66 | // // Initial rendering of the contact list
67 | // renderContactList();
68 |
--------------------------------------------------------------------------------
/public/models/Contact.js:
--------------------------------------------------------------------------------
1 | "use strict";
2 | Object.defineProperty(exports, "__esModule", { value: true });
3 | class Contact {
4 | constructor(id, name, email, phone) {
5 | this.id = id;
6 | this.name = name;
7 | this.email = email;
8 | this.phone = phone;
9 | }
10 | }
11 | exports.default = Contact;
12 |
--------------------------------------------------------------------------------
/public/services/ContactService.js:
--------------------------------------------------------------------------------
1 | "use strict";
2 | Object.defineProperty(exports, "__esModule", { value: true });
3 | class ContactService {
4 | constructor() {
5 | this.contacts = [];
6 | }
7 | addContact(contact) {
8 | if (!contact) {
9 | throw new Error('Invalid contact object.');
10 | }
11 | this.contacts.push(contact);
12 | }
13 | getContacts() {
14 | return this.contacts;
15 | }
16 | deleteContact(id) {
17 | const index = this.contacts.findIndex((contact) => contact.id === id);
18 | if (index === -1) {
19 | throw new Error(`Contact with ID ${id} not found.`);
20 | }
21 | this.contacts.splice(index, 1);
22 | }
23 | updateContact(id, updatedContact) {
24 | if (!updatedContact) {
25 | throw new Error('Invalid updated contact object.');
26 | }
27 | const existingContact = this.contacts.find((contact) => contact.id === id);
28 | if (!existingContact) {
29 | throw new Error(`Contact with ID ${id} not found.`);
30 | }
31 | // Update the existing contact with the new data
32 | existingContact.name = updatedContact.name;
33 | existingContact.email = updatedContact.email;
34 | existingContact.phone = updatedContact.phone;
35 | }
36 | }
37 | exports.default = ContactService;
38 |
--------------------------------------------------------------------------------
/src/index.ts:
--------------------------------------------------------------------------------
1 | // // without DOM
2 | import Contact from './models/Contact';
3 | import ContactService from './services/ContactService';
4 |
5 | const contactService = new ContactService();
6 |
7 | // Add contacts
8 | const contact1 = new Contact(1, 'Alice', 'alice@example.com', '123-456-7890');
9 | const contact2 = new Contact(2, 'Bob', 'bob@example.com', '987-654-3210');
10 |
11 | contactService.addContact(contact1);
12 | contactService.addContact(contact2);
13 |
14 | // Get contacts
15 | const contacts = contactService.getContacts();
16 | console.log('All Contacts:', contacts);
17 |
18 | // Delete a contact
19 | contactService.deleteContact(1);
20 | console.log('current Contacts:', contactService.getContacts());
21 |
22 | // Update a contact
23 | const contactIdToUpdate = 2;
24 | const updatedContact = new Contact(
25 | contactIdToUpdate,
26 | 'Updated Alice',
27 | 'updated@example.com',
28 | '555-555-5555'
29 | );
30 | contactService.updateContact(contactIdToUpdate, updatedContact);
31 |
32 | // With DOM
33 | // Import the Contact and ContactService classes
34 | // import Contact from './models/Contact.js';
35 | // import ContactService from './services/ContactService.js';
36 |
37 | // // Create an instance of ContactService
38 | // const contactService = new ContactService();
39 |
40 | // // Get references to the HTML elements
41 | // const nameInput = document.getElementById('nameInput') as HTMLInputElement;
42 | // const emailInput = document.getElementById('emailInput') as HTMLInputElement;
43 | // const phoneInput = document.getElementById('phoneInput') as HTMLInputElement;
44 | // const addContactButton = document.getElementById(
45 | // 'addContactButton'
46 | // ) as HTMLButtonElement;
47 | // const contactList = document.getElementById('contactList') as HTMLUListElement;
48 |
49 | // // Function to render the contact list
50 | // function renderContactList(): void {
51 | // if (!contactList) return;
52 | // contactList.innerHTML = '';
53 | // const contacts: Contact[] = contactService.getContacts();
54 | // contacts.forEach((contact) => {
55 | // const listItem = document.createElement('li');
56 | // listItem.textContent = `${contact.name} | ${contact.email} | ${contact.phone}`;
57 | // if (contactList) contactList.appendChild(listItem);
58 | // });
59 | // }
60 |
61 | // // Event listener for the Add Contact button
62 | // if (addContactButton && nameInput && emailInput && phoneInput) {
63 | // addContactButton.addEventListener('click', () => {
64 | // const name: string = nameInput.value;
65 | // const email: string = emailInput.value;
66 | // const phone: string = phoneInput.value;
67 |
68 | // if (name && email && phone) {
69 | // const newContact: Contact = new Contact(Date.now(), name, email, phone);
70 | // contactService.addContact(newContact);
71 | // renderContactList();
72 |
73 | // // Clear input fields
74 | // nameInput.value = '';
75 | // emailInput.value = '';
76 | // phoneInput.value = '';
77 | // } else {
78 | // alert('Please fill in all fields.');
79 | // }
80 | // });
81 | // }
82 |
83 | // // Initial rendering of the contact list
84 | // renderContactList();
85 |
--------------------------------------------------------------------------------
/src/models/Contact.ts:
--------------------------------------------------------------------------------
1 | class Contact {
2 | constructor(
3 | public id: number,
4 | public name: string,
5 | public email: string,
6 | public phone: string
7 | ) {}
8 | }
9 |
10 | export default Contact;
11 |
--------------------------------------------------------------------------------
/src/services/ContactService.ts:
--------------------------------------------------------------------------------
1 | // services/ContactService.ts
2 | import Contact from '../models/Contact';
3 |
4 | class ContactService {
5 | private contacts: Contact[] = [];
6 |
7 | addContact(contact: Contact): void {
8 | if (!contact) {
9 | throw new Error('Invalid contact object.');
10 | }
11 | this.contacts.push(contact);
12 | }
13 |
14 | getContacts(): Contact[] {
15 | return this.contacts;
16 | }
17 |
18 | deleteContact(id: number): void {
19 | const index = this.contacts.findIndex(
20 | (contact: Contact) => contact.id === id
21 | );
22 | if (index === -1) {
23 | throw new Error(`Contact with ID ${id} not found.`);
24 | }
25 | this.contacts.splice(index, 1);
26 | }
27 |
28 | updateContact(id: number, updatedContact: Contact): void {
29 | if (!updatedContact) {
30 | throw new Error('Invalid updated contact object.');
31 | }
32 | const existingContact = this.contacts.find(
33 | (contact: Contact) => contact.id === id
34 | );
35 |
36 | if (!existingContact) {
37 | throw new Error(`Contact with ID ${id} not found.`);
38 | }
39 |
40 | // Update the existing contact with the new data
41 | existingContact.name = updatedContact.name;
42 | existingContact.email = updatedContact.email;
43 | existingContact.phone = updatedContact.phone;
44 | }
45 | }
46 |
47 | export default ContactService;
48 |
--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 | /* styles.css */
2 |
3 | body {
4 | font-family: Arial, sans-serif;
5 | margin: 0;
6 | padding: 0;
7 | background-color: #f5f5f5;
8 | display: flex;
9 | flex-direction: column;
10 | justify-content: center;
11 | align-items: center;
12 | min-height: 100vh;
13 | }
14 |
15 | .container {
16 | max-width: 400px;
17 | margin: 0 auto;
18 | padding: 20px;
19 | background-color: #fff;
20 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
21 | border-radius: 8px;
22 | }
23 |
24 | h1 {
25 | text-align: center;
26 | color: #333;
27 | font-size: 24px;
28 | }
29 |
30 | .contact-form {
31 | text-align: center;
32 | margin: 20px;
33 | }
34 |
35 | .contact-form h2 {
36 | color: #333;
37 | margin-bottom: 10px;
38 | font-size: 20px;
39 | }
40 |
41 | .contact-form input {
42 | padding: 10px;
43 | margin: 10px;
44 | width: 100%;
45 | border: 1px solid #ccc;
46 | border-radius: 5px;
47 | font-size: 16px;
48 | }
49 |
50 | .contact-form button {
51 | padding: 10px 20px;
52 | margin-top: 10px;
53 | background-color: #007bff;
54 | color: #fff;
55 | border: none;
56 | border-radius: 5px;
57 | cursor: pointer;
58 | font-size: 16px;
59 | }
60 |
61 | .contact-form button:hover {
62 | background-color: #0056b3;
63 | }
64 |
65 | .contact-list {
66 | margin: 20px;
67 | padding: 20px;
68 | background-color: #fff;
69 | border: 1px solid #ccc;
70 | border-radius: 5px;
71 | }
72 |
73 | .contact-list h2 {
74 | color: #333;
75 | margin-bottom: 10px;
76 | font-size: 20px;
77 | }
78 |
79 | .contact-list ul {
80 | list-style-type: none;
81 | padding: 0;
82 | }
83 |
84 | .contact-list li {
85 | padding: 10px;
86 | border-bottom: 1px solid #ccc;
87 | font-size: 16px;
88 | color: #333;
89 | }
90 |
91 | .contact-list li:last-child {
92 | border-bottom: none;
93 | }
94 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "ES2016",
4 | // "target": "ES6",
5 | "module": "CommonJS",
6 | // "module": "ES6",
7 | "rootDir": "./src",
8 | "outDir": "./public",
9 | "strict": true,
10 | "noUnusedLocals": true,
11 | "noUnusedParameters": true
12 | },
13 | "include": ["./src"]
14 | // "files": ["./src/index.ts", "./src/app.ts"]
15 | }
16 |
--------------------------------------------------------------------------------