-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathTask 5.html
147 lines (131 loc) · 4.07 KB
/
Task 5.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact Management System</title>
<style>
body {
font-family: Arial, sans-serif;
}
#contact-list {
margin-top: 20px;
}
#contact-list table {
width: 100%;
border-collapse: collapse;
}
#contact-list th, #contact-list td {
border: 1px solid #dddddd;
padding: 8px;
text-align: left;
}
#contact-list th {
background-color: #f2f2f2;
}
#contact-form {
margin-top: 20px;
}
#contact-form input[type="text"], #contact-form input[type="tel"], #contact-form input[type="email"] {
width: 100%;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
#contact-form input[type="submit"] {
background-color: #4CAF50;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
#contact-form input[type="submit"]:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<h2>Contact Management System</h2>
<div id="contact-form">
<h3>Add New Contact</h3>
<form id="add-contact-form">
<input type="text" id="name" placeholder="Name" required><br>
<input type="tel" id="phone" placeholder="Phone Number" required><br>
<input type="email" id="email" placeholder="Email Address" required><br>
<input type="submit" value="Add Contact">
</form>
</div>
<div id="contact-list">
<h3>Contact List</h3>
<table>
<thead>
<tr>
<th>Name</th>
<th>Phone</th>
<th>Email</th>
<th>Action</th>
</tr>
</thead>
<tbody id="contact-table-body">
</tbody>
</table>
</div>
<script>
// Function to add a new contact
function addContact() {
var name = document.getElementById('name').value;
var phone = document.getElementById('phone').value;
var email = document.getElementById('email').value;
var contact = {
name: name,
phone: phone,
email: email
};
var contacts = JSON.parse(localStorage.getItem('contacts')) || [];
contacts.push(contact);
localStorage.setItem('contacts', JSON.stringify(contacts));
displayContacts();
document.getElementById('add-contact-form').reset();
}
// Function to display contacts
function displayContacts() {
var contacts = JSON.parse(localStorage.getItem('contacts')) || [];
var tableBody = document.getElementById('contact-table-body');
tableBody.innerHTML = '';
contacts.forEach(function(contact, index) {
var row = tableBody.insertRow();
var nameCell = row.insertCell(0);
var phoneCell = row.insertCell(1);
var emailCell = row.insertCell(2);
var actionCell = row.insertCell(3);
nameCell.textContent = contact.name;
phoneCell.textContent = contact.phone;
emailCell.textContent = contact.email;
var deleteButton = document.createElement('button');
deleteButton.textContent = 'Delete';
deleteButton.onclick = function() {
deleteContact(index);
};
actionCell.appendChild(deleteButton);
});
}
// Function to delete a contact
function deleteContact(index) {
var contacts = JSON.parse(localStorage.getItem('contacts')) || [];
contacts.splice(index, 1);
localStorage.setItem('contacts', JSON.stringify(contacts));
displayContacts();
}
// Display existing contacts on page load
displayContacts();
// Add event listener to the add contact form
document.getElementById('add-contact-form').addEventListener('submit', function(event) {
event.preventDefault();
addContact();
});
</script>
</body>
</html>