-
Notifications
You must be signed in to change notification settings - Fork 2
Expand file tree
/
Copy pathCRUD.html
More file actions
172 lines (160 loc) · 6.03 KB
/
CRUD.html
File metadata and controls
172 lines (160 loc) · 6.03 KB
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
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CRUD JS</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" />
<script src="https://cdn.tailwindcss.com"></script>
<style>
@media screen and (max-width: 630px) {
.table-container {
overflow-x: auto;
}
}
</style>
</head>
<body class="container mx-auto p-4">
<h1 class="text-2xl text-center mb-4">CRUD APPLICATION</h1>
<div class="flex ustify-evenly flex-col justify-center lg:flex-row lg:justify-evenly mt-10">
<form id="userForm" onsubmit="return addOrUpdateUser(event)" class="mb-4 w-full lg:w-5/12 flex flex-col gap-1.5">
<input type="text" id="name" placeholder="Name" class="block w-full p-2 border border-gray-500" />
<p id="error-name" class="text-red-600"></p>
<textarea id="address" placeholder="Address" class="block w-full p-2 border border-gray-500"></textarea>
<p id="error-address" class="text-red-600"></p>
<select id="country" class="block w-full p-2 border border-gray-500">
<option value="" disabled selected>Select Country</option>
<option value="India">India</option>
<option value="Russia">Russia</option>
<option value="Canada">Canada</option>
<option value="America">America</option>
</select>
<p id="error-country" class="text-red-600"></p>
<input type="number" id="age" placeholder="Age" class="block w-full p-2 border border-gray-500" />
<p id="error-age" class="text-red-600"></p>
<input type="number" id="phone" placeholder="Phone" class="block w-full p-2 border border-gray-500" />
<p id="error-phone" class="text-red-600"></p>
<p id="error-message" class="text-red-600 animate-bounce text-center text-xl"></p>
<button type="submit" id="submit-btn" class="block w-full bg-blue-500 text-white p-2">Add Data</button>
</form>
<div class="border-r-2 border-gray-300"></div>
<div class="table-container w-full lg:w-6/12">
<table class="table-auto border border-gray-500 w-full">
<thead>
<tr>
<th class="border border-gray-500 px-2 py-2">Id</th>
<th class="border border-gray-500 px-2 py-2">Name</th>
<th class="border border-gray-500 px-2 py-2">Address</th>
<th class="border border-gray-500 px-2 py-2">Country</th>
<th class="border border-gray-500 px-2 py-2">Age</th>
<th class="border border-gray-500 px-2 py-2">Phone</th>
<th class="border border-gray-500 px-2 py-2">Actions</th>
</tr>
</thead>
<tbody id="userTableBody"></tbody>
</table>
</div>
</div>
</body>
</html>
<script>
let userData = [
{
name: "deep",
address: "31 Shivnagar,SudamaChowk, Surat",
country: "India",
age: "21",
phone: "258741258963",
},
]
const renderTable = () => {
const tableBody = document.getElementById("userTableBody")
tableBody.innerHTML = ""
userData.forEach((user, index) => {
const row = document.createElement("tr")
row.innerHTML = `
<td class="border border-gray-500 px-2 py-2">${index + 1}</td>
<td class="border border-gray-500 px-2 py-2">${user.name}</td>
<td class="border border-gray-500 px-2 py-2">${user.address}</td>
<td class="border border-gray-500 px-2 py-2">${user.country}</td>
<td class="border border-gray-500 px-2 py-2">${user.age}</td>
<td class="border border-gray-500 px-2 py-2">${user.phone}</td>
<td class="border border-gray-500 px-2 py-2">
<button class="bg-blue-500 text-white p-1" onclick="editUser(${index})">Edit</button>
<button class="bg-red-500 text-white p-1" onclick="deleteUser(${index})">Delete</button>
</td>
`
tableBody.appendChild(row)
})
}
const addOrUpdateUser = (event) => {
event.preventDefault()
const name = document.getElementById("name").value.trim()
const address = document.getElementById("address").value.trim()
const country = document.getElementById("country").value
const age = document.getElementById("age").value
const phone = document.getElementById("phone").value
const errorMessage = document.getElementById("error-message")
const errorName = document.getElementById("error-name")
const errorAddress = document.getElementById("error-address")
const errorCountry = document.getElementById("error-country")
const errorAge = document.getElementById("error-age")
const errorPhone = document.getElementById("error-phone")
errorMessage.textContent = ""
errorName.textContent = ""
errorAddress.textContent = ""
errorCountry.textContent = ""
errorAge.textContent = ""
errorPhone.textContent = ""
let isValid = true
if (!name) {
errorName.textContent = "*name is required"
isValid = false
}
if (!address) {
errorAddress.textContent = "*address is required"
isValid = false
}
if (!country) {
errorCountry.textContent = "*country is required"
isValid = false
}
if (!age) {
errorAge.textContent = "*age is required"
isValid = false
}
if (!phone) {
errorPhone.textContent = "*phone is required"
isValid = false
}
if (!isValid) {
errorMessage.textContent = "Please enter all the *required details"
return
}
const newUser = { name, address, country, age, phone }
if (editIndex === -1) {
userData.push(newUser)
} else {
userData[editIndex] = newUser
editIndex = -1
document.getElementById("submit-btn").textContent = "Add Data"
}
document.getElementById("userForm").reset()
renderTable()
}
let editIndex = -1
const editUser = (index) => {
const user = userData[index]
document.getElementById("name").value = user.name
document.getElementById("address").value = user.address
document.getElementById("country").value = user.country
document.getElementById("age").value = user.age
document.getElementById("phone").value = user.phone
editIndex = index
}
const deleteUser = (index) => {
userData.splice(index, 1)
renderTable()
}
document.addEventListener("DOMContentLoaded", renderTable)
</script>