-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
81 lines (73 loc) · 2.62 KB
/
script.js
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
const data = JSON.parse(localStorage.getItem("data")) || [];
const nameInput = document.querySelector(".name");
const lastNameInput = document.querySelector(".lastname");
const mailInput = document.querySelector(".mail");
const submitButton = document.querySelector(".submit-button");
const userList = document.querySelector(".user-list");
const search = document.querySelector("#search");
submitButton.addEventListener("click", () => {
const name = nameInput.value;
const lastname = lastNameInput.value;
const mail = mailInput.value;
const pattern = /^[^ ]+@[^ ]+\.[a-z]{2,3}$/;
if (name && lastname && mail.match(pattern)) {
const users = { name, lastname, mail };
data.push(users);
updateLocalStorage();
renderUserList();
nameInput.value = "";
lastNameInput.value = "";
mailInput.value = "";
} else {
alert("Please fill the required spaces");
}
});
function renderUserList() {
userList.innerHTML = "";
data.forEach((user, index) => {
const li = document.createElement("li");
li.classList.add("list-item");
li.innerHTML = `<h2><span class="usernames">${user.name} ${user.lastname}</span> ${user.mail}</h2>
<button class="edit-button" data-index="${index}" >Edit</button>
<button class="delete-button" data-index="${index}" >Delete</button> `;
userList.appendChild(li);
});
}
userList.addEventListener("click", (e) => {
if (e.target.classList.contains("edit-button")) {
const dataIndex = e.target.getAttribute("data-index");
const newName = prompt("Edit First Name", data[dataIndex].name);
const newLastName = prompt("Edit Last Name", data[dataIndex].lastname);
const newMail = prompt("Edit Mail", data[dataIndex].mail);
if (newName !== null && newLastName !== null && newMail !== null) {
data[dataIndex].name = newName;
data[dataIndex].lastname = newLastName;
data[dataIndex].mail = newMail;
search.value = "";
}
updateLocalStorage();
renderUserList();
} else if (e.target.classList.contains("delete-button")) {
const dataIndex = e.target.getAttribute("data-index");
data.splice(dataIndex, 1);
updateLocalStorage();
renderUserList();
search.value = "";
}
});
function updateLocalStorage() {
localStorage.setItem("data", JSON.stringify(data));
}
search.addEventListener("input", () => {
const value = search.value.toLowerCase();
const listItems = document.querySelectorAll(".list-item");
listItems.forEach((item) => {
let text = item.textContent;
if (text.toLowerCase().includes(value)) {
item.style.display = "";
} else {
item.style.display = "none";
}
});
});
renderUserList();