Created CRUD Application · HanifVW/30DaysOfJavaScript@9b670a2 · GitHub
Skip to content

Commit 9b670a2

Browse files
Salma-HamedSalma-Hamed
committed
Created CRUD Application
1 parent 9d4b232 commit 9b670a2

9 files changed

Lines changed: 176 additions & 0 deletions

File tree

‎30DaysOfJavaScript/assets/91.PNG‎

105 KB
Loading

‎91 - CRUD Application/css/bootstrap.min.css‎

Lines changed: 7 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎91 - CRUD Application/css/main.css‎

Lines changed: 10 additions & 0 deletions

‎91 - CRUD Application/index.html‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<html>
2+
<head>
3+
<link rel="stylesheet" href="css/bootstrap.min.css">
4+
<link rel="stylesheet" href="css/main.css">
5+
<title>Crud Application</title>
6+
</head>
7+
<body>
8+
<div class="container my-5">
9+
<div class="item card p-5 w-50 m-auto p-4">
10+
<label for="productName">Product Name</label>
11+
<input id="productName" type="text">
12+
<label for="productCategory">Product Category</label>
13+
<input id="productCategory" type="text">
14+
<label for="productPrice">Product Price</label>
15+
<input id="productPrice" type="text">
16+
<label for="productDescription">Product Description</label>
17+
<textarea class="form-control" id="ProductDescription" cols="30" rows="10"></textarea>
18+
<button onclick="getData()" id="add" class="btn btn-info my-5">Add</button>
19+
<div id="cont"></div>
20+
</div>
21+
</div>
22+
<div class="container my-5">
23+
<div class="w-50 m-auto">
24+
<input id="searchIn" class="form-control search" onkeyup="search(this.value)" type="text" placeholder="Search...">
25+
</div>
26+
<table class="table text-center table-hover my-5">
27+
<thead>
28+
<th>Index</th>
29+
<th>Name</th>
30+
<th>Category</th>
31+
<th>Price</th>
32+
<th>Description</th>
33+
<th>Update</th>
34+
<th>Delete</th>
35+
</thead>
36+
<tbody id="demo">
37+
</tbody>
38+
</table>
39+
</div>
40+
<script src="js/jquery-3.5.1.slim.min.js"></script>
41+
<script src="js/popper.min.js"></script>
42+
<script src="js/bootstrap.min.js"></script>
43+
<script src="js/main.js"></script>
44+
</body>
45+
</html>

‎91 - CRUD Application/js/bootstrap.min.js‎

Lines changed: 7 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎91 - CRUD Application/js/jquery-3.5.1.slim.min.js‎

Lines changed: 2 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎91 - CRUD Application/js/main.js‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
var productName = document.getElementById('productName');
2+
var productCategory = document.getElementById( 'productCategory');
3+
var productPrice = document.getElementById('productPrice');
4+
var productDescription = document.getElementById('ProductDescription');
5+
var products = [];
6+
if(localStorage.getItem('products',products) == null)
7+
{
8+
products = [];
9+
}
10+
else
11+
{
12+
products = JSON.parse(localStorage.getItem('products',products));
13+
display();
14+
}
15+
function getData(){
16+
var product = {
17+
name:productName.value,
18+
category:productCategory.value,
19+
price:productPrice.value,
20+
description:productDescription.value
21+
};
22+
products.push(product);
23+
localStorage.setItem('products',JSON.stringify(products));
24+
display();
25+
}
26+
function display(){
27+
var x = "";
28+
for(var i = 0; i < products.length; i++)
29+
{
30+
x += `<tr>
31+
<td>${i + 1}</td>
32+
<td>${products[i].name}</td>
33+
<td>${products[i].category}</td>
34+
<td>${products[i].price}</td>
35+
<td>${products[i].description}</td>
36+
<td><button onclick="update(${i})" class="btn bg-info w-100 p-2">Update</button></td>
37+
<td><button onclick="del(${i})" class="btn bg-danger w-100 p-2">Delete</button></td>
38+
</tr>`;
39+
}
40+
document.getElementById('demo').innerHTML = x;
41+
}
42+
43+
function del(index){
44+
products.splice(index,1);
45+
localStorage.setItem('products',JSON.stringify(products));
46+
display();
47+
}
48+
function clr(){
49+
productName.value = "";
50+
productCategory.value = "";
51+
productPrice.value = "";
52+
productDescription.value = "";
53+
}
54+
function update(index)
55+
{
56+
document.getElementById('add').style.display = "none";
57+
document.getElementById('cont').innerHTML = `<button onclick="updateProduct(${index})" class="w-100 btn btn-info my-5">Update</button>`
58+
productName.value = products[index].name;
59+
productCategory.value = products[index].category;
60+
productPrice.value = products[index].price;
61+
productDescription.innerHTML = products[index].description;
62+
}
63+
function updateProduct(index)
64+
{
65+
products[index].name = productName.value;
66+
products[index].category = productCategory.value;
67+
products[index].price = productPrice.value;
68+
products[index].description = productDescription.value;
69+
localStorage.setItem('products',JSON.stringify(products));
70+
display();
71+
clr();
72+
document.getElementById('add').style.display = "block";
73+
document.getElementById('cont').innerHTML = '';
74+
}
75+
76+
function search(searchIn){
77+
var searchResult='';
78+
for(var i = 0; i < products.length; i++)
79+
{
80+
if(products[i].name.toLowerCase().includes(searchIn.toLowerCase()))
81+
{
82+
searchResult += `<tr>
83+
<td>${i + 1}</td>
84+
<td>${products[i].name.replace(searchIn, `<span>${searchIn}</span>`)}</td>
85+
<td>${products[i].category}</td>
86+
<td>${products[i].price}</td>
87+
<td>${products[i].description}</td>
88+
<td><button onclick="update(${i})" class="btn bg-info w-100 p-2">Update</button></td>
89+
<td><button onclick="del(${i})" class="btn bg-danger w-100 p-2">Delete</button></td>
90+
</tr>`;
91+
}
92+
}
93+
document.getElementById('demo').innerHTML = searchResult;
94+
}

‎91 - CRUD Application/js/popper.min.js‎

Lines changed: 5 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎index.html‎

Lines changed: 6 additions & 0 deletions

0 commit comments

Comments
 (0)