crud-operations/index.html at master · nairamagdyy/crud-operations · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE html>
<html>

<head>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
    <div class="w-75 mx-auto my-5">
        <label for="productName">Product Name</label>
        <input type="text" id="productName" class="form-control">
        <label for="productPrice" class="mt-2">Product Price</label>
        <input type="text" id="productPrice" class="form-control">
        <label for="productCategory" class="mt-2">Product Category</label>
        <input type="text" id="productCategory" class="form-control">
        <label for="productDescription" class="mt-2">Product Description</label>
        <input type="text" id="productDescription" class="form-control">
        <button class="mt-3 btn btn-primary" onclick="addProduct()" id="btn">Add</button>


    </div>

    <div class="w-75 mx-auto">
        <label for="search" class="fw-bold">Search By Name:</label>
        <input onkeyup="searchByName(value)" type="text" id="search" class="form-control">
    </div>

    <table class="mt-5 table w-75 mx-auto">
        <thead>
            <th>Index</th>
            <th>Product Name</th>
            <th>Product Price</th>
            <th>Product Category</th>
            <th>Product Description</th>
        </thead>
        <tbody id="demo">

        </tbody>

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

</html>