Skip to content

Commit

Permalink
product managment system with cruds functionality
Browse files Browse the repository at this point in the history
  • Loading branch information
@omarali96
omarali96 committed Sep 11, 2023
0 parents commit ac6c88f
Show file tree
Hide file tree
Showing 3 changed files with 481 additions and 0 deletions.
151 changes: 151 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,151 @@
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]> <html class="no-js"> <![endif]-->
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="main">
<!-- Header Begins -->

<div class="header">
<h1>PMS</h1>
<p>Products Managment system</p>
</div>
<!-- Header Ends -->


<!-- Inputs Begins -->

<div class="inputs">
<input placeholder="title" type="text" id="title">
<div class="pricing">

<input onkeyup="getTotal()" type="number" id="price" placeholder="Price">
<input onkeyup="getTotal()" type="number" id="tax" placeholder="Tax %">
<input onkeyup="getTotal()" type="number" id="cpl" placeholder="Cost Per Lead">
<input onkeyup="getTotal()" type="number" id="discount" placeholder="Discount %">
<label id="total"></label>
</div>
<input placeholder="Product Count" type="number" id="count">
<input placeholder="Category" type="text" id="category">
<div class="btnCreate"><button onclick="addProduct()" id="submit">Create Product</button></div>

</div>

<!-- Inputs Ends -->



<!-- Products Begins -->

<div class="products">

<div class="searchBlock">
<input onkeyup="searchData(this.value)" placeholder="search" type="text" id="search">
<div class="btnSearch">
<button onclick="searchProductBy(this.id)" id="searchTitle">Search By Title</button>
<button onclick="searchProductBy(this.id)" id="searchCategory">Search By Category</button>
</div>

</div>
<div id="deleteAll"></div>
<table>
<tr>
<th>ID</th>
<th>Title</th>
<th>Price</th>
<th>Tax</th>
<th>C.P.L</th>
<th>Discount</th>
<th>Total</th>
<th>Count</th>
<th>Category</th>
<th>Update</th>
<th>Delete</th>
</tr>
<tbody id ="tbody">
<!-- <tr>
<td>1</td>
<td>MI</td>
<td>9000</td>
<td>14</td>
<td>50</td>
<td>100</td>
<td>9164</td>
<td>Phone</td>
<td>
<button id ="update">Update</button>
</td>
<td><button id ="delete">Delete</button></td>
</tr>
<tr>
<td>1</td>
<td>MI</td>
<td>9000</td>
<td>14</td>
<td>50</td>
<td>100</td>
<td>9164</td>
<td>Phone</td>
<td>
<button id ="update">Update</button>
</td>
<td><button id ="delete">Delete</button></td>
</tr>
<tr>
<td>1</td>
<td>MI</td>
<td>9000</td>
<td>14</td>
<td>50</td>
<td>100</td>
<td>9164</td>
<td>Phone</td>
<td>
<button id ="update">Update</button>
</td>
<td><button id ="delete">Delete</button></td>
</tr>
<tr>
<td>1</td>
<td>MI</td>
<td>9000</td>
<td>14</td>
<td>50</td>
<td>100</td>
<td>9164</td>
<td>Phone</td>
<td>
<button id ="update">Update</button>
</td>
<td><button id ="delete">Delete</button></td>
</tr> -->
</tbody>
</table>
</div>
<!-- Products Ends -->
</div>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
<![endif]-->

<script src="main.js" async defer></script>
</body>
</html>
233 changes: 233 additions & 0 deletions main.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,233 @@
let title = document.getElementById("title");
let tax = document.getElementById("tax");
let cpl = document.getElementById("cpl");
let discount = document.getElementById("discount");
let price = document.getElementById("price");
let total = document.getElementById("total");
let count = document.getElementById("count");
let category = document.getElementById("category");
let submit = document.getElementById("submit");

let mode = "create";
let globalIndex;

// get total price (create)
function getTotal() {
if (price.value != "") {
let totalPrice =
+price.value +
(+tax.value * price.value) / 100 +
+cpl.value -
(+discount.value * price.value) / 100;
total.innerHTML = Math.round(totalPrice);
total.style.background = "green";
} else {
total.style.background = "red";
}
}

//create product (create)
function checkAndDeclare() {
if (localStorage.products != null) {
products = JSON.parse(localStorage.getItem("products"));
} else {
products = [];
}
}
checkAndDeclare();
const addProduct = function () {
let product = {
title: title.value.toLowerCase(),
price: price.value,
tax: tax.value,
cpl: cpl.value,
discount: discount.value,
total: total.innerHTML,
count: count.value,
category: category.value.toLowerCase(),
};
if (
title.value != "" &&
price.value != "" &&
tax.value != "" &&
cpl.value != "" &&
discount.value != "" &&
count.value != "" &&
category.value != ""
) {
if (mode == "create") {
products.push(product);
} else {
products[globalIndex] = product;
mode = "create";
submit.innerHTML = "Create Product";
}
clearData();
} else {
alert("Please fill all fields");
}

//save into localStorage (create)
localStorage.setItem("products", JSON.stringify(products));
console.log(products);

dataRender();
};

//clear after creation (create)

function clearData() {
title.value = "";
price.value = "";
tax.value = "";
cpl.value = "";
discount.value = "";
total.innerHTML = "";
count.value = "";
category.value = "";
}

//Read

function dataRender() {
getTotal();
let table = "";
for (let i = 0; i < products.length; i++) {
table += `
<tr>
<td>${i + 1}</td>
<td>${products[i].title}</td>
<td>${products[i].price}</td>
<td>${products[i].tax}</td>
<td>${products[i].cpl}</td>
<td>${products[i].discount}</td>
<td>${products[i].total}</td>
<td>${products[i].count}</td>
<td>${products[i].category}</td>
<td>
<button onclick="updateProduct(${i})" id ="update">Update</button>
</td>
<td><button onclick="deleteProduct(${i})" id ="delete">Delete</button></td>
</tr>
`;
}
document.getElementById("tbody").innerHTML = table;
let deleteAll = document.getElementById("deleteAll");
if (products.length > 0) {
deleteAll.innerHTML = `<button onclick="deleteAllProducts()">Delete All(${products.length})</button>`;
} else {
deleteAll.innerHTML = "";
}
}
dataRender();

//delete

function deleteProduct(index) {
products.splice(index, 1);
localStorage.setItem("products", JSON.stringify(products));
dataRender();
}

// delete all

function deleteAllProducts() {
products = [];
localStorage.setItem("products", JSON.stringify(products));
dataRender();
}

//update

function updateProduct(index) {
title.value = products[index].title;
price.value = products[index].price;
tax.value = products[index].tax;
cpl.value = products[index].cpl;
discount.value = products[index].discount;
total.innerHTML = products[index].total;
count.value = products[index].count;
category.value = products[index].category;

mode = "update";
submit.innerHTML = mode;
globalIndex = index;
scroll({
top: 0,
behavior: "smooth",
});
}

//search

let searchMode = "title";

function searchProductBy(id) {
let search = document.getElementById("search");

if (id == "searchTitle") {
searchMode = "title";
search.placeholder = "search by title";
} else {
searchMode = "category";
search.placeholder = "search by category";
}
search.focus();
search.value = "";
dataRender();
}

function searchData(value) {
let search = value;
let table = "";
for (let i = 0; i < products.length; i++) {
if (searchMode == "title") {
// console.log(products[i]);
// || products[i].category.includes(search)
if (products[i].title.toLowerCase().includes(search)) {
console.log(products[i]);
table += `
<tr>
<td>${i + 1}</td>
<td>${products[i].title}</td>
<td>${products[i].price}</td>
<td>${products[i].tax}</td>
<td>${products[i].cpl}</td>
<td>${products[i].discount}</td>
<td>${products[i].total}</td>
<td>${products[i].count}</td>
<td>${products[i].category}</td>
<td>
<button onclick="updateProduct(${i})" id ="update">Update</button>
</td>
<td><button onclick="deleteProduct(${i})" id ="delete">Delete</button></td>`;
}
} else {
if (products[i].category.toLowerCase().includes(search)) {
table += `
<tr>
<td>${i + 1}</td>
<td>${products[i].title}</td>
<td>${products[i].price}</td>
<td>${products[i].tax}</td>
<td>${products[i].cpl}</td>
<td>${products[i].discount}</td>
<td>${products[i].total}</td>
<td>${products[i].count}</td>
<td>${products[i].category}</td>
<td>
<button onclick="updateProduct(${i})" id ="update">Update</button>
</td>
<td><button onclick="deleteProduct(${i})" id ="delete">Delete</button></td>`;
}
}
}

document.getElementById("tbody").innerHTML = table;
}

//validating data
Loading

0 comments on commit ac6c88f

Please sign in to comment.