Skip to content

Commit

Permalink
first commit
Browse files Browse the repository at this point in the history
  • Loading branch information
@Ababnoub-Atef
Ababnoub-Atef committed Dec 29, 2023
0 parents commit 1cd931e
Show file tree
Hide file tree
Showing 4 changed files with 556 additions and 0 deletions.
1 change: 1 addition & 0 deletions img/folder-solid.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
165 changes: 165 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,165 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>CRUDS System</title>

<link rel="shortcut icon" href="img/folder-solid.svg" type="image/x-icon" />

<!-- ~Bootstrap -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
crossorigin="anonymous"
/>

<!-- #Font Awesome -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>

<!-- !CSS Style -->
<link rel="stylesheet" href="style.css" />
</head>

<body data-bs-theme="dark" class="bg-info-subtle">
<h1 class="text-center mt-4 text-info display-6 fw-bold">CRUD(S) System</h1>

<!-- #<form> -->

<div
class="container w-75 mx-auto mt-4 bg-info-subtle bg-gradient border border-info-subtle rounded-4 p-4 shadow"
>
<div class="form-floating mb-3">
<input
type="text"
class="form-control border-info-subtle rounded-pill"
id="productName"
placeholder=""
/>
<label for="productName" class="text-info-emphasis">Product Name</label>
</div>

<div class="form-floating mb-3">
<input
type="number"
class="form-control border-info-subtle rounded-pill"
id="productPrice"
placeholder=""
/>
<label for="productPrice" class="text-info-emphasis"
>Product Price</label
>
</div>

<div class="form-floating mb-3">
<input
type="text"
class="form-control border-info-subtle rounded-pill"
id="productCategory"
placeholder=""
/>
<label for="productCategory" class="text-info-emphasis"
>Product Category</label
>
</div>

<div class="form-floating mb-4">
<textarea
type="text"
class="form-control border-info-subtle rounded-pill"
id="productDesc"
placeholder=""
></textarea>
<label for="productDesc" class="text-info-emphasis"
>Product Description</label
>
</div>

<button onclick="addProduct();" id="addButton" class="addButton">
Add Product
</button>

<button
onclick="setProductToUpdate()"
id="updateButton"
class="updateButton d-none"
>
Update Product
</button>
</div>

<!-- #</form> -->

<!-- @<search> -->

<div
class="container-search w-75 mx-auto mt-5 d-flex justify-content-center"
>
<div class="catchIcon">
<svg
fill="#0dcaf0"
width="20px"
height="20px"
viewBox="0 0 1920 1920"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M790.588 1468.235c-373.722 0-677.647-303.924-677.647-677.647 0-373.722 303.925-677.647 677.647-677.647 373.723 0 677.647 303.925 677.647 677.647 0 373.723-303.924 677.647-677.647 677.647Zm596.781-160.715c120.396-138.692 193.807-319.285 193.807-516.932C1581.176 354.748 1226.428 0 790.588 0S0 354.748 0 790.588s354.748 790.588 790.588 790.588c197.647 0 378.24-73.411 516.932-193.807l516.028 516.142 79.963-79.963-516.142-516.028Z"
fill-rule="evenodd"
></path>
</svg>
</div>

<input
oninput="search(this.value)"
type="search"
placeholder="Search"
name="search"
id="search"
class="search text-info-emphasis pe-3"
/>
</div>

<!-- @</search> -->

<!-- |<table> -->

<table class="table w-75 mx-auto mt-3 border-info-subtle">
<thead>
<th class="text-info">Name</th>
<th class="text-info">Price</th>
<th class="text-info">Category</th>
<th class="text-info">Description</th>
<th class="text-info text-center">Update</th>
<th class="text-info text-center">Delete</th>
</thead>

<tbody id="tBody"></tbody>
</table>

<!-- |</table> -->

<!-- ~<js bootstrap> -->

<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
crossorigin="anonymous"
></script>

<!-- ~</js bootstrap> -->

<!-- ^<js> -->

<script src="main.js"></script>

<!-- ^</js> -->
</body>
</html>
139 changes: 139 additions & 0 deletions main.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,139 @@
var productNameInput = document.getElementById("productName");
var productPriceInput = document.getElementById("productPrice");
var productCategoryInput = document.getElementById("productCategory");
var productDescInput = document.getElementById("productDesc");
var addButton = document.getElementById("addButton");
var updateButton = document.getElementById("updateButton");
var updatedproduct;

var productList = [];

if (localStorage.getItem("products") !== null) {
productList = JSON.parse(localStorage.getItem("products"));

displayProductList(productList);
}

function addProduct() {
if (validInputs() === true) {
var product = {
name: productNameInput.value,
price: productPriceInput.value,
category: productCategoryInput.value,
desc: productDescInput.value,
};

productList.push(product);

clearInputs();

setItemInlocalStorage();

displayProductList(productList);

} else {
alert("Please enter a valid Name, Price and Description")
}
}

function clearInputs() {
productNameInput.value = "";
productPriceInput.value = "";
productCategoryInput.value = "";
productDescInput.value = "";
}

function setItemInlocalStorage() {
localStorage.setItem("products", JSON.stringify(productList));
}

function displayProductList(list) {
var table = ``;

for (var i = 0; i < list.length; i++) {
table += `
<tr>
<td>${list[i].name}</td>
<td>${list[i].price}</td>
<td>${list[i].category}</td>
<td>${list[i].desc}</td>
<td><div class="d-flex justify-content-center"><button onclick ="getproductToUpdate(${i})" class="update btn btn-outline-update rounded-pill"><div class="icon"><i class="fa-solid fa-pen update"></i></div><div class="text">Update</div></button></div></td>
<td><div class="d-flex justify-content-center"><button class="delete btn btn-outline-danger rounded-pill" onclick="deleteProduct(${i});"><div class="icon"><i class="fa-solid fa-trash-can"></i></div><div class="text">Delete</div></button></div></td>
</tr>
`;
}
document.getElementById("tBody").innerHTML = table;
}

function deleteProduct(index) {
productList.splice(index, 1);

setItemInlocalStorage();

displayProductList(productList);
}

function search(term) {
var filterdList = [];
var termLowerCase = term.toLowerCase();

for (let i = 0; i < productList.length; i++) {
if (productList[i].name.toLowerCase().includes(termLowerCase)) {
filterdList.push(productList[i]);

displayProductList(filterdList);
} else if (productList[i].category.toLowerCase().includes(termLowerCase)) {
filterdList.push(productList[i]);

displayProductList(filterdList);
} else if (productList[i].desc.includes(termLowerCase)) {
filterdList.push(productList[i]);

displayProductList(filterdList);
} else if (productList[i].price.includes(term)) {
filterdList.push(productList[i]);

displayProductList(filterdList);
}
}
}

function getproductToUpdate(i) {
addButton.classList.add("d-none");
updateButton.classList.remove("d-none");
productNameInput.value = productList[i].name;
productPriceInput.value = productList[i].price;
productCategoryInput.value = productList[i].category;
productDescInput.value = productList[i].desc;
updatedproduct = i;
}

function setProductToUpdate() {
addButton.classList.remove("d-none");
updateButton.classList.add("d-none");
productList[updatedproduct].name = productNameInput.value;
productList[updatedproduct].price = productPriceInput.value;
productList[updatedproduct].category = productCategoryInput.value;
productList[updatedproduct].desc = productDescInput.value;

clearInputs();

setItemInlocalStorage();

displayProductList(productList);
}

function validInputs() {
var paternText = /[a-zA-Z0-9]{2,}/;
var paternNum = /[0-9]{2,}/;

if (
paternText.test(productNameInput.value) === true &&
paternNum.test(productPriceInput.value) === true &&
paternText.test(productCategoryInput.value) === true
) {
return true;
} else {
return false;
}
}
Loading

0 comments on commit 1cd931e

Please sign in to comment.