javascriptAsgn/index.html at master · umar968/javascriptAsgn · 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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="styles.css" />
    <script src="index.js"></script>
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
      crossorigin="anonymous"
    />
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"
      integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js"
      integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF"
      crossorigin="anonymous"
    ></script>
    <title>Javascript Assignment</title>
  </head>

  <body>
    <div class="container">
      <div class="row mb-5">
        <div class="col-3 text-center m-3">
          <button
            id="addProduct"
            onclick="handleAddProduct(this)"
            class="btn btn-success"
          >
            Add a new Product
          </button>
          <form onsubmit="handleFormSubmit(event)" id="productForm">
            <div>
              <label class="form-label" for="productName">Product Name</label>
              <input
                class="form-control"
                type="text"
                id="productName"
                name="productName"
                required
              />
              <label class="form-label" for="productPrice">Product Price</label>
              <input
                class="form-control"
                type="number"
                id="productPrice"
                name="productPrice"
                value=""
                onchange="checkInteger(event)"
                oninput="checkInteger(event)"
                required
              />
              <p class="error"></p>
              <label class="form-label" for="numberOfProducts"
                >Number of Products:</label
              >
              <input
                class="form-control"
                type="number"
                id="numberOfProducts"
                name="numberOfProducts"
                value=""
                onchange="checkInteger(event)"
                oninput="checkInteger(event)"
                required
              />
              <p class="error"></p>
              <div class="m-3 mb-5">
                <button
                  id="addbtn"
                  class="btn btn-outline-primary"
                  type="submit"
                >
                  Add
                </button>
                <button
                  type="button"
                  onclick="handleCancel()"
                  class="btn btn-outline-success"
                >
                  Cancel
                </button>
              </div>
            </div>
          </form>
        </div>
        <div class="col-6 m-3 mx-5 dataTable">
          <h2>List of Products</h2>
          <table class="table table-bordered">
            <thead>
              <tr>
                <th scope="col">No.</th>
                <th scope="col">Product Name</th>
                <th scope="col">Product Price</th>
                <th scope="col">Number of Products</th>
                <th scope="col">Delete this Product</th>
              </tr>
            </thead>
            <tbody id="tableBody"></tbody>
          </table>
        </div>
      </div>

      <div class="row calculations">
        <hr />
        <div class="col-12">
          <button class="btn btn-info" onclick="handleCalculateTotal()">
            Calculate Total
          </button>
          <button class="btn btn-danger" onclick="handleClearAll()">
            Clear All
          </button>
        </div>
        <div class="mt-5">
          <h2>Total:<span id="totalDisplay"></span></h2>
        </div>
      </div>
    </div>
  </body>
</html>