Skip to content

Commit

Permalink
CRUDS
Browse files Browse the repository at this point in the history
  • Loading branch information
@Omar-Muhammadd
Omar-Muhammadd committed Oct 13, 2024
0 parents commit 00e58f0
Show file tree
Hide file tree
Showing 3 changed files with 619 additions and 0 deletions.
82 changes: 82 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,82 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CRUDS</title>

<!-- CDN -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"
integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<link rel="stylesheet" href="main.css" />
</head>
<body>
<section>
<div class="header" id="header">
<h1>CRUDS</h1>
<p>Product Management System</p>
<p>Create, Read, Update, Delete, Search</p>
</div>
<div class="body">
<div class="container">
<input type="text" id="productTitle" class="input" placeholder="Product Title" />

<div class="count">
<input type="number" id="productPrice" class="input totall" placeholder="Price" />
<input type="number" id="productTaxes" class="input totall" placeholder="Taxes" />
<input type="number" id="productAds" class="input totall" placeholder="Ads" />
<input type="number" id="productDiscount" class="input totall" placeholder="Discount" />
<span id="total"></span>
</div>

<input type="number" id="productCount" class="input" placeholder="Count" />
<input type="text" id="productCategory" class="input" placeholder="Product Category" />

<button class="btn" type="submit" id="create">Create Product</button>
<input onkeyup="searchInput(this.value)" type="text" id="productSearch" class="input" placeholder="Product Search" />

<div class="parentBTN">
<button onclick="searchByButton(this.id)" class="btn search" type="submit" id="searchTitle">Search by Title</button>
<button onclick="searchByButton(this.id)" class="btn search" type="submit" id="searchCategory">Search by Category</button>
</div>

<div id="Add-btn-deleteAll">

</div>


</div>
</div>
</section>
<section>
<div class="container containerTable">
<table id="table">
<thead>
<tr>
<th>id</th>
<th>title</th>
<th>price</th>
<th>taxes</th>
<th>ads</th>
<th>discount</th>
<th>total</th>
<th>category</th>
<th>Update</th>
<th>delete</th>
</tr>
</thead>

<tbody id="tbody">

</tbody>
</table>
</div>
</section>
<script src="main.js"></script>
</body>
</html>
233 changes: 233 additions & 0 deletions main.css
Original file line number Diff line number Diff line change
@@ -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;
}
}
Loading

0 comments on commit 00e58f0

Please sign in to comment.