diff --git a/index.html b/index.html new file mode 100644 index 0000000..ec44f92 --- /dev/null +++ b/index.html @@ -0,0 +1,82 @@ + + + + + + CRUDS + + + + + + +
+ +
+
+ + +
+ + + + + +
+ + + + + + + +
+ + +
+ +
+ +
+ + +
+
+
+
+
+ + + + + + + + + + + + + + + + + + + +
idtitlepricetaxesadsdiscounttotalcategoryUpdatedelete
+
+
+ + + diff --git a/main.css b/main.css new file mode 100644 index 0000000..429c4d1 --- /dev/null +++ b/main.css @@ -0,0 +1,233 @@ +*{ + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body{ + background-color: #333; +} + +.container{ + margin: auto; + width: 70%; +} +input{ + width: 100%; + padding: 10px; + margin-top: 10px; + background-color: #333; + border: 1px solid #555; + border-radius: 5px; +} + + +.header{ + color: aliceblue; + text-align: center; +} + +.header h1{ + margin: 30px 0 10px 0; + font-size: 35px; +} + +.header p{ + font-size: 22px; + padding-bottom: 20px; +} + +input{ + transition: all .4s; + background-color: rgb(13, 0, 17); + border: 0; + color: aliceblue; +}input:focus{ + outline: transparent; + transform: scaleX(1.1); + font-size: 16px; +} + +.count{ + width: 100%; + display: flex; + flex-wrap: wrap; + justify-content: space-between; + align-items: center; +}.count input{ + flex-grow: 1; + flex-basis: 100px; + margin-right: 3px; +} +.count span{ + padding: 5px; + border-radius: 3px; + background-color: brown; + margin-top: 10px; + margin-left: 2px; +}.count span::before{ + content: "Total: "; +} + +.btn{ + margin-top: 13px; + width: 100%; + padding: 8px 0; + border-radius: 50px; + background-color: brown; + border: transparent; + font-weight: 600; + cursor: pointer; + transition: all .4s; +} +.btn:hover{ + opacity: .8; + letter-spacing: 1px; +} +.parentBTN{ + display: flex; + justify-content: space-around; +} +.search{ + width: 49%; +} + + + +/* Table */ + +table{ + width: 100%; + text-align: center; + color:#f0ffffa9; + margin-top: 30px; + border: 1px solid #444 ; + padding: 7px; + border-radius: 10px; + +} +thead{ + text-transform: uppercase; + font-family:Arial, Helvetica, sans-serif; + font-size: 13px; +} +tbody{ + + font-size: 13px; + font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; +} + +th{ + padding: 10px 0; +} + +#deleteAll{ + margin: 10px 0; +} +.updateAndDelete{ + color: aliceblue; + padding: 7px 15px; + margin: 5px 0; + border-radius: 10px; + border: transparent; + cursor: pointer; + transition: all .4s; +} +.updateAndDelete:hover{ + opacity: .8; +} +.update{ + background-color: #4361ee; +} +.Delete{ + background-color: brown; +} + + + + + + + + + + + + + +@media only screen and (max-width: 768px) { + /* CSS rules */ + .container{ + margin: 0 15px; + width: auto; + + } + } + + + @media only screen and (max-width: 426px) { + + .header h1 { + font-size: 25px; + } + + .header p { + font-size: 18px; + } + + table { + + display: block; + width: 100%; + border: none; + } + + thead { + display: none; + } + + tbody, tr, td { + display: block; + + } + + tr { + border: 1px solid #ddd; + margin: 20px 10px; + } + + td { + display: flex; + justify-content: space-around; + padding: 10px 0; + font-size: 14px; + border-bottom: 1px solid #ddd; + } + + td:last-child { + border-bottom: none; + } + td:first-child { + font-weight:bold; + font-size: 16px; + text-shadow: #dddddd31 2px 0px 2px ; + color: brown; + border: none; + } + + td:before { + text-transform: uppercase; + content: attr(data-label); + font-weight: bold; + font-size: 16px; + } + + .dis{ + display: inline-block; + border-bottom: none; + + } + .left{ + margin-left: 10px; + } +} \ No newline at end of file diff --git a/main.js b/main.js new file mode 100644 index 0000000..cc1487b --- /dev/null +++ b/main.js @@ -0,0 +1,304 @@ +// var +var header = document.getElementById("header"); +var body = document.getElementsByTagName("body"); + +// var total +var total = document.getElementById("total"); +var totall = document.querySelectorAll(".totall"); + + +// var inputs +var title = document.getElementById("productTitle"); +var price = document.getElementById("productPrice"); +var taxes = document.getElementById("productTaxes"); +var ads = document.getElementById("productAds"); +var discount = document.getElementById("productDiscount"); +var category = document.getElementById("productCategory"); +var count = document.getElementById("productCount"); + + +// var Table +var table = document.getElementById("table"); +var tbody = document.getElementById("tbody"); +var td = document.querySelectorAll("td"); +var firstChild = document.querySelector("td:first-child"); + + +// var Buttons +var create = document.getElementById("create"); +var addDelAll = document.getElementById("Add-btn-deleteAll"); // var div delete all + + +// var Search +var searchProduct = document.getElementById("productSearch"); + + + +// Total +totall.forEach( + function(totall){ + totall.addEventListener("input", + function(){ + if (price.value != ''){ + var sum = Number( price.value ) + +taxes.value + Number( ads.value ) - discount.value; + total.innerHTML = sum; + total.style.background = "green"; + } else{ + total.innerHTML = ''; + total.style.background = "brown"; + } + }) +}) + + + + + +// Create +let mood = 'Create Product'; +let tmp; +let productsArray; + +if(localStorage.product != null){ + productsArray = JSON.parse(localStorage.product); + ShowData(); +}else{ + productsArray = []; +} + + +create.addEventListener("click", createProduct); + +function createProduct(){ + let product = { + title : title.value.toLowerCase(), + price : price.value, + taxes : taxes.value, + ads : ads.value, + discount : discount.value, + category : category.value.toLowerCase(), + total : total.innerHTML, + count: count.value, + } + + create_and_update(product); + localStorage.setItem('product', JSON.stringify(productsArray)); + + ShowData(); +} + +// fun create & update +function create_and_update(product){ + if(title.value != ''){ + if ( mood === 'Create Product' ){ + // add new product [create] + if( product.count > 1){ + for(let i = 0; i < product.count ; i++){ + productsArray.push(product); + } + }else{ + productsArray.push(product); + } + }else { + // update a product + productsArray[tmp] = product; + mood = 'Create Product'; + create.innerHTML = mood; + count.style.display = 'block'; + idSpan.innerHTML = ''; + idSpan.style.marginLeft = '0'; + idSpan.style.padding = '0'; + + + scroll({ + top: 797, + behavior: "smooth" + }) + } + clearInputs(); + } + +} + + + + + +// clear inputs +function clearInputs(){ + title.value = ''; + price.value = ''; + taxes.value = ''; + ads.value = ''; + discount.value = ''; + category.value = ''; + count.value = ''; + total.innerHTML = ''; + total.style.background = 'brown'; +} + + + + +// Read +function ShowData(){ + let cartoona = ''; + for( let i=0 ; i < productsArray.length ; i++ ){ + cartoona += ` + + ${i+1} + ${productsArray[i].title} + ${productsArray[i].price} + ${productsArray[i].taxes} + ${productsArray[i].ads} + ${productsArray[i].discount} + ${productsArray[i].total} + ${productsArray[i].category} + + + + `; + } + + tbody.innerHTML = cartoona; + + // add a button delete all + if( productsArray.length > 0 ){ + addDelAll.innerHTML = ``; + } + else { + addDelAll.innerHTML = ``; + } + +} + + +// Update + +if (!document.getElementById('idSpan')) { + idSpan = document.createElement('span'); + idSpan.id = 'idSpan'; + idSpan.style.fontWeight = 'bold'; + idSpan.style.marginLeft = '5px'; + idSpan.style.background = 'brown'; + idSpan.style.padding = '5px'; + idSpan.style.borderRadius = '3px'; +} + + +function Update(i){ + title.value = productsArray[i].title; + price.value = productsArray[i].price; + taxes.value = productsArray[i].taxes; + ads.value = productsArray[i].ads; + discount.value = productsArray[i].discount; + category.value = productsArray[i].category; + total.innerHTML = productsArray[i].total; + count.style.display = 'none'; + if(price.value > 0){ + total.style.background = 'green'; + } + mood = 'Update Product'; + create.innerHTML = mood; + tmp = i; + + scroll({ + top: 33, + behavior: "smooth" + }) + + + // add id top inputs + idSpan.innerHTML = `ID: ${tmp+1}`; + + if (!document.getElementById('idSpan')) { + title.parentNode.insertBefore(idSpan, title); + } + +} + + + + + +// Delete +function Delete(i){ + productsArray.splice(i,1); + localStorage.product = JSON.stringify(productsArray); + ShowData(); +} + + +// Delete All +function DeleteAll(){ + localStorage.clear(); + productsArray.splice(0); + ShowData(); +} + + + + + + +// serach +let search = 'Title'; + +function searchByButton(id){ + if(id === "searchTitle"){ + search = "Title" + }else{ + search = "Category" + } + searchProduct.value = ''; + ShowData(); + searchProduct.placeholder = "Search by "+search; + searchProduct.focus() + searchInput() +} + + +function searchInput(value){ + let cartoona = ''; + if(search == "Title"){ + for(let i=0 ; i < productsArray.length ; i++){ + if(productsArray[i].title.includes(value.toLowerCase())){ + cartoona += ` + + ${i+1} + ${productsArray[i].title} + ${productsArray[i].price} + ${productsArray[i].taxes} + ${productsArray[i].ads} + ${productsArray[i].discount} + ${productsArray[i].total} + ${productsArray[i].category} + + + + `; + } + } + }else{ + for(let i=0 ; i < productsArray.length ; i++){ + if(productsArray[i].category.includes(value.toLowerCase())){ + cartoona += ` + + ${i+1} + ${productsArray[i].title} + ${productsArray[i].price} + ${productsArray[i].taxes} + ${productsArray[i].ads} + ${productsArray[i].discount} + ${productsArray[i].total} + ${productsArray[i].category} + + + + `; + } + } + } + tbody.innerHTML = cartoona; +} +