Skip to content

Commit 1f08cf2

Browse files
deep100xdeep100x
committed
Update CRUD functionality
1 parent 6088804 commit 1f08cf2

File tree

1 file changed

+152
-187
lines changed

1 file changed

+152
-187
lines changed

‎projects/CRUD.html‎

Lines changed: 152 additions & 187 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
66
<title>CRUD JS</title>
77
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" />
8-
<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" /> -->
98
<script src="https://cdn.tailwindcss.com"></script>
109
<style>
1110
@media screen and (max-width: 630px) {
@@ -15,193 +14,159 @@
1514
}
1615
</style>
1716
</head>
18-
<body>
19-
<div class="container mx-auto">
20-
<h1 class="text-2xl md:text-3xl lg:text-4xl text-center font-medium text-black py-8 bg-blue-200">CRUD Application in <span class="text-indigo-600">JavaScript</span></h1>
21-
<a href="" class="absolute top-0 right-0">View code</a>
22-
23-
<div class="flex flex-col xl:flex-row py-5 text-lg">
24-
<div class="text-center xl:w-2/5 p-4">
25-
<div>
26-
<h2 class="text-indigo-600 font-medium text-2xl pb-5">User Detail</h2>
27-
<input
28-
class="block w-full mb-4 p-2 border border-gray-500 rounded-none focus:ring focus:ring-indigo-300 focus:outline-none"
29-
type="text"
30-
placeholder="Enter your name"
31-
required
32-
id="userName"
33-
/>
34-
<input
35-
class="block w-full mb-4 p-2 border border-gray-500 rounded-none focus:ring focus:ring-indigo-300 focus:outline-none"
36-
type="email"
37-
pattern="[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}"
38-
placeholder="Enter your email"
39-
required
40-
id="userEmail"
41-
/>
42-
<input
43-
class="block w-full mb-4 p-2 border border-gray-500 rounded-none focus:ring focus:ring-indigo-300 focus:outline-none"
44-
type="password"
45-
placeholder="Enter your password"
46-
required
47-
id="userPassword"
48-
/>
49-
<div class="flex items-center flex-wrap mb-4">
50-
<label for="gender" class="mr-4">Gender : </label>
51-
<label for="male"> <input type="radio" id="male" name="gender" value="Male" class="mr-1" /> Male</label>
52-
<label for="female"> <input type="radio" id="female" name="gender" value="Female" class="ml-4 mr-1" /> Female</label>
53-
</div>
54-
<div class="mb-4">
55-
<div class="flex items-center flex-wrap">
56-
<label for="hobbies" class="mr-4">Hobbies : </label>
57-
<label for="driving" class="mr-4"> <input type="checkbox" id="driving" name="hobbies" value="Driving" class="mr-1" /> Driving</label>
58-
<label for="cycling" class="mr-4"> <input type="checkbox" id="cycling" name="hobbies" value="Cycling" class="mr-1" /> Cycling</label>
59-
<label for="coding"> <input type="checkbox" id="coding" name="hobbies" value="Coding" class="mr-1" /> Coding</label>
60-
</div>
61-
</div>
62-
<div class="mb-4">
63-
<select name="course" id="course" class="block w-full p-2 border border-gray-500 rounded-none focus:ring focus:ring-indigo-300 focus:outline-none">
64-
<option value="" disabled selected>Select a course</option>
65-
<option value="full-stack">Full Stack</option>
66-
<option value="android">Android</option>
67-
<option value="animation">Animation</option>
68-
<option value="figma">Figma</option>
69-
</select>
70-
</div>
71-
<p id="InputIsEmptyMessage" class="text-left text-red-600 text-xl"></p>
72-
<button type="submit" class="block w-full border border-indigo-500 text-lg py-2 px-6 bg-indigo-600 text-white hover:bg-white hover:text-indigo-400" onclick="addUser()">
73-
Add user
74-
</button>
75-
</div>
76-
</div>
77-
78-
<div class="xl:w-3/5 p-4">
79-
<div class="text-center">
80-
<h2 class="text-indigo-600 font-medium text-2xl pb-5">User Table</h2>
81-
<div class="table-container overflow-x-auto">
82-
<table class="table-auto border border-gray-500 mx-auto w-full">
83-
<thead>
84-
<tr>
85-
<th class="sm:w-1/6 md:w-1/6 lg:w-1/6 xl:w-1/6 border border-gray-500 px-2 py-2">UserName</th>
86-
<th class="sm:w-1/6 md:w-1/6 lg:w-1/6 xl:w-1/6 border border-gray-500 px-2 py-2">Email</th>
87-
<th class="sm:w-1/6 md:w-1/6 lg:w-1/6 xl:w-1/6 border border-gray-500 px-2 py-2">Password</th>
88-
<th class="sm:w-1/6 md:w-1/6 lg:w-1/6 xl:w-1/6 border border-gray-500 px-2 py-2">Gender</th>
89-
<th class="sm:w-1/6 md:w-1/6 lg:w-1/6 xl:w-1/6 border border-gray-500 px-2 py-2">Hobbies</th>
90-
<th class="sm:w-1/6 md:w-1/6 lg:w-1/6 xl:w-1/6 border border-gray-500 px-2 py-2">course</th>
91-
<th class="sm:w-1/6 md:w-1/6 lg:w-1/6 xl:w-1/6 border border-gray-500 px-2 py-2">Actions</th>
92-
</tr>
93-
</thead>
94-
<tbody class="js-user-list">
95-
<!-- <tr>
96-
<td class="border border-gray-500 px-4 py-2"></td>
97-
<td class="border border-gray-500 px-4 py-2"></td>
98-
<td class="border border-gray-500 px-4 py-2"></td>
99-
<td class="border border-gray-500 px-4 py-2">
100-
<button class="border border-blue-500 text-lg py-2 px-6 bg-blue-600 text-white hover:bg-white hover:text-blue-400">
101-
<i class="fa-solid fa-pen-to-square"></i>
102-
</button>
103-
<button class="border border-red-500 text-lg py-2 px-6 bg-red-600 text-white hover:bg-white hover:text-red-400">
104-
<i class="fa-solid fa-trash"></i>
105-
</button>
106-
</td>
107-
</tr> -->
108-
</tbody>
109-
</table>
110-
</div>
111-
</div>
112-
</div>
17+
<body class="container mx-auto p-4">
18+
<h1 class="text-2xl text-center mb-4">CRUD APPLICATION</h1>
19+
<div class="flex ustify-evenly flex-col justify-center lg:flex-row lg:justify-evenly mt-10">
20+
<form id="userForm" onsubmit="return addOrUpdateUser(event)" class="mb-4 w-full lg:w-5/12 flex flex-col gap-1.5">
21+
<input type="text" id="name" placeholder="Name" class="block w-full p-2 border border-gray-500" />
22+
<p id="error-name" class="text-red-600"></p>
23+
<textarea id="address" placeholder="Address" class="block w-full p-2 border border-gray-500"></textarea>
24+
<p id="error-address" class="text-red-600"></p>
25+
<select id="country" class="block w-full p-2 border border-gray-500">
26+
<option value="" disabled selected>Select Country</option>
27+
<option value="India">India</option>
28+
<option value="Russia">Russia</option>
29+
<option value="Canada">Canada</option>
30+
<option value="America">America</option>
31+
</select>
32+
<p id="error-country" class="text-red-600"></p>
33+
<input type="number" id="age" placeholder="Age" class="block w-full p-2 border border-gray-500" />
34+
<p id="error-age" class="text-red-600"></p>
35+
<input type="number" id="phone" placeholder="Phone" class="block w-full p-2 border border-gray-500" />
36+
<p id="error-phone" class="text-red-600"></p>
37+
<p id="error-message" class="text-red-600 animate-bounce text-center text-xl"></p>
38+
<button type="submit" id="submit-btn" class="block w-full bg-blue-500 text-white p-2">Add Data</button>
39+
</form>
40+
<div class="border-r-2 border-gray-300"></div>
41+
<div class="table-container w-full lg:w-6/12">
42+
<table class="table-auto border border-gray-500 w-full">
43+
<thead>
44+
<tr>
45+
<th class="border border-gray-500 px-2 py-2">Id</th>
46+
<th class="border border-gray-500 px-2 py-2">Name</th>
47+
<th class="border border-gray-500 px-2 py-2">Address</th>
48+
<th class="border border-gray-500 px-2 py-2">Country</th>
49+
<th class="border border-gray-500 px-2 py-2">Age</th>
50+
<th class="border border-gray-500 px-2 py-2">Phone</th>
51+
<th class="border border-gray-500 px-2 py-2">Actions</th>
52+
</tr>
53+
</thead>
54+
<tbody id="userTableBody"></tbody>
55+
</table>
11356
</div>
11457
</div>
115-
116-
<script>
117-
const addUser = () => {
118-
const userNameInput = document.getElementById("userName")
119-
const userEmailInput = document.getElementById("userEmail")
120-
const userPasswordInput = document.getElementById("userPassword")
121-
122-
const userName = userNameInput.value
123-
const userEmail = userEmailInput.value
124-
const userPassword = userPasswordInput.value
125-
126-
const genderInput = document.querySelector('input[name="gender"]:checked')
127-
const gender = genderInput ? genderInput.value : ""
128-
const hobbiesInputs = document.querySelectorAll('input[name="hobbies"]:checked')
129-
const hobbies = Array.from(hobbiesInputs)
130-
.map((hobby) => hobby.value)
131-
.join(", ")
132-
const course = document.getElementById("course").value
133-
134-
const newRowHTML = `
135-
<tr>
136-
<td class="border border-gray-500 px-2 py-2">${userName}</td>
137-
<td class="border border-gray-500 px-2 py-2">${userEmail}</td>
138-
<td class="border border-gray-500 px-2 py-2">${userPassword}</td>
139-
<td class="border border-gray-500 px-2 py-2">${gender}</td>
140-
<td class="border border-gray-500 px-2 py-2">${hobbies}</td>
141-
<td class="border border-gray-500 px-2 py-2">${course}</td>
142-
<td class="border border-gray-500 px-2 py-2">
143-
<button class="border border-blue-500 text-lg py-2 px-6 bg-blue-600 text-white hover:bg-white hover:text-blue-400" onclick="editUser(this)">
144-
<i class="fa-solid fa-pen-to-square"></i>
145-
</button>
146-
<button class="border border-red-500 text-lg py-2 px-6 bg-red-600 text-white hover:bg-white hover:text-red-400" onclick="deleteUser(this)">
147-
<i class="fa-solid fa-trash"></i>
148-
</button>
149-
</td>
150-
</tr>
151-
`
152-
153-
const InputIsEmptyMessage = document.getElementById("InputIsEmptyMessage")
154-
if (userName === "" || userEmail === "" || userPassword === "" || gender === "" || hobbies === "" || course === "") {
155-
InputIsEmptyMessage.innerHTML = `Please enter all user information`
156-
} else {
157-
InputIsEmptyMessage.innerHTML = ``
158-
159-
document.querySelector(".js-user-list").insertAdjacentHTML("beforeend", newRowHTML)
160-
161-
userNameInput.value = ""
162-
userEmailInput.value = ""
163-
userPasswordInput.value = ""
164-
genderInput.checked = false
165-
hobbiesInputs.forEach((hobby) => (hobby.checked = false))
166-
document.getElementById("course").value = ""
167-
}
168-
}
169-
170-
const editUser = (button) => {
171-
const rowToEdit = button.closest("tr")
172-
const cells = rowToEdit.getElementsByTagName("td")
173-
174-
const existingUserName = cells[0].innerHTML
175-
const existingUserEmail = cells[1].innerHTML
176-
const existingUserPassword = cells[2].innerHTML
177-
const existingUserGender = cells[3].innerHTML
178-
const existingUserHobbies = cells[4].innerHTML
179-
const existingUserCourse = cells[5].innerHTML
180-
181-
document.getElementById("userName").value = existingUserName
182-
document.getElementById("userEmail").value = existingUserEmail
183-
document.getElementById("userPassword").value = existingUserPassword
184-
185-
const genderInputs = document.getElementsByName("gender")
186-
genderInputs.forEach((input) => {
187-
input.checked = input.value === existingUserGender
188-
})
189-
190-
const hobbiesInputs = document.getElementsByName("hobbies")
191-
const existingHobbies = existingUserHobbies.split(", ")
192-
hobbiesInputs.forEach((input) => {
193-
input.checked = existingHobbies.includes(input.value)
194-
})
195-
196-
document.getElementById("course").value = existingUserCourse
197-
198-
rowToEdit.remove()
199-
}
200-
201-
const deleteUser = (button) => {
202-
const rowDelete = button.closest("tr")
203-
rowDelete.remove()
204-
}
205-
</script>
20658
</body>
20759
</html>
60+
<script>
61+
let userData = [
62+
{
63+
name: "deep",
64+
address: "31 Shivnagar,SudamaChowk, Surat",
65+
country: "India",
66+
age: "21",
67+
phone: "258741258963",
68+
},
69+
]
70+
71+
const renderTable = () => {
72+
const tableBody = document.getElementById("userTableBody")
73+
tableBody.innerHTML = ""
74+
75+
userData.forEach((user, index) => {
76+
const row = document.createElement("tr")
77+
row.innerHTML = `
78+
<td class="border border-gray-500 px-2 py-2">${index + 1}</td>
79+
<td class="border border-gray-500 px-2 py-2">${user.name}</td>
80+
<td class="border border-gray-500 px-2 py-2">${user.address}</td>
81+
<td class="border border-gray-500 px-2 py-2">${user.country}</td>
82+
<td class="border border-gray-500 px-2 py-2">${user.age}</td>
83+
<td class="border border-gray-500 px-2 py-2">${user.phone}</td>
84+
<td class="border border-gray-500 px-2 py-2">
85+
<button class="bg-blue-500 text-white p-1" onclick="editUser(${index})">Edit</button>
86+
<button class="bg-red-500 text-white p-1" onclick="deleteUser(${index})">Delete</button>
87+
</td>
88+
`
89+
tableBody.appendChild(row)
90+
})
91+
}
92+
93+
const addOrUpdateUser = (event) => {
94+
event.preventDefault()
95+
96+
const name = document.getElementById("name").value.trim()
97+
const address = document.getElementById("address").value.trim()
98+
const country = document.getElementById("country").value
99+
const age = document.getElementById("age").value
100+
const phone = document.getElementById("phone").value
101+
102+
const errorMessage = document.getElementById("error-message")
103+
const errorName = document.getElementById("error-name")
104+
const errorAddress = document.getElementById("error-address")
105+
const errorCountry = document.getElementById("error-country")
106+
const errorAge = document.getElementById("error-age")
107+
const errorPhone = document.getElementById("error-phone")
108+
109+
errorMessage.textContent = ""
110+
errorName.textContent = ""
111+
errorAddress.textContent = ""
112+
errorCountry.textContent = ""
113+
errorAge.textContent = ""
114+
errorPhone.textContent = ""
115+
116+
let isValid = true
117+
if (!name) {
118+
errorName.textContent = "*name is required"
119+
isValid = false
120+
}
121+
if (!address) {
122+
errorAddress.textContent = "*address is required"
123+
isValid = false
124+
}
125+
if (!country) {
126+
errorCountry.textContent = "*country is required"
127+
isValid = false
128+
}
129+
if (!age) {
130+
errorAge.textContent = "*age is required"
131+
isValid = false
132+
}
133+
if (!phone) {
134+
errorPhone.textContent = "*phone is required"
135+
isValid = false
136+
}
137+
if (!isValid) {
138+
errorMessage.textContent = "Please enter all the *required details"
139+
return
140+
}
141+
142+
const newUser = { name, address, country, age, phone }
143+
if (editIndex === -1) {
144+
userData.push(newUser)
145+
} else {
146+
userData[editIndex] = newUser
147+
editIndex = -1
148+
document.getElementById("submit-btn").textContent = "Add Data"
149+
}
150+
151+
document.getElementById("userForm").reset()
152+
renderTable()
153+
}
154+
155+
let editIndex = -1
156+
const editUser = (index) => {
157+
const user = userData[index]
158+
document.getElementById("name").value = user.name
159+
document.getElementById("address").value = user.address
160+
document.getElementById("country").value = user.country
161+
document.getElementById("age").value = user.age
162+
document.getElementById("phone").value = user.phone
163+
editIndex = index
164+
}
165+
166+
const deleteUser = (index) => {
167+
userData.splice(index, 1)
168+
renderTable()
169+
}
170+
171+
document.addEventListener("DOMContentLoaded", renderTable)
172+
</script>

0 commit comments

Comments
 (0)