deyanivanov966

jQuery101

Oct 27th, 2021
926
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <meta name="description" content="jQuery-Task 101" />
  8.     <meta name="author" content="Deyan Ivanov" />
  9.     <meta name="keywords" content="jQuery, Task, 101" />
  10.     <title>jQuery-Task 101</title>
  11.     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
  12.     <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  13.     <script src="https://kit.fontawesome.com/47ba4a2d2a.js"></script>
  14.     <link rel="stylesheet" href="jQuery101.css" />
  15.     <script src="./jQuery101.js"></script>
  16. </head>
  17. <body>
  18. <header>
  19.     <div class="div-header">
  20.         <h6 class="invoice">
  21.             Invoice Details <i class="fas fa-tools icon"></i>
  22.         </h6>
  23.     </div>
  24.     <div class="client-div div-header">
  25.         <h6 class="client">Client Name</h6>
  26.     </div>
  27.     <div class="name-div div-header">
  28.         <h6 class="name">Deyan Ivanov</h6>
  29.     </div>
  30.     <div class="date-div div-header">
  31.         <h6 class="date">27/10/2021</h6>
  32.     </div>
  33. </header>
  34. <div class="container-fluid container-products d-flex">
  35.     <div class="row">
  36.         <div class="col-xl-12 col-md-12 col-xs-12 button-col">
  37.             <div class="button-div">
  38.                 <input type="button" value="Add New Product" class="btnAdd" />
  39.             </div>
  40.         </div>
  41.         <div class="col-xl-12 col-md-12 col-xs-12 col-product">
  42.             <table class="table product-table">
  43.                 <tr class="multTr">
  44.                     <td scope="col">
  45.                         <label for="productName">Product Name</label>
  46.                         <input type="text" value="" class="productName" />
  47.                     </td>
  48.  
  49.                     <td scope="col">
  50.                         <label for="quantity">Quantity</label>
  51.                         <input type="number" value="" class="quantity" />
  52.                     </td>
  53.  
  54.                     <td scope="col">
  55.                         <label for="price">Price</label>
  56.                         <input type="number" value="" class="price" />
  57.                     </td>
  58.  
  59.                     <td scope="col">
  60.                         <label for="productName" class="total-label">Total</label>
  61.                         <input type="text" value="" class="total" disabled />
  62.                     </td>
  63.                 </tr>
  64.             </table>
  65.         </div>
  66.         <div class="col-xl-12 col-md-12 col-xs-12 discount-col">
  67.             <label for="discount" class="discount-label">Discount %:&nbsp;</label>
  68.             <input type="number" value="" class="discount" />
  69.         </div>
  70.     </div>
  71. </div>
  72. <div class="container-fluid container-all-total d-flex">
  73.     <div class="row row-all-total">
  74.         <div class="col-xl-12 col-md-12 col-xs-12 d-flex col-all-total">
  75.             <table class="table total-table">
  76.                 <tr>
  77.                     <td scope="col">
  78.                         <label for="sub-total" class="sub-total-label">Sub Total</label>
  79.                         <input type="text" value="" class="sub-total" disabled />
  80.                     </td>
  81.                 </tr>
  82.                 <tr>
  83.                     <td scope="col">
  84.                         <label for="total-discount" class="total-discount-label"
  85.                        >Total Discount</label
  86.                        >
  87.                         <input type="text" value="" class="total-discount" disabled />
  88.                     </td>
  89.                 </tr>
  90.                 <tr>
  91.                     <td scope="col">
  92.                         <label for="all-total" class="all-total-label">Total All</label>
  93.                         <input type="text" value="" class="all-total" disabled />
  94.                     </td>
  95.                 </tr>
  96.             </table>
  97.         </div>
  98.     </div>
  99. </div>
  100. <footer>
  101.     <p>Code with love &lt;3</p>
  102. </footer>
  103. </body>
  104. </html>
  105.  
RAW Paste Data