Build a Node.js Express HTML2PDF.js Invoice PDF Document Generator From HTML5 CSS3 Template in Javascript Deployed to Netlify Full Project For Beginners

 

 

Invoice-Generator

A Website for creating Business Invoices

This site is able to generate invoices from inputs of user. The user can upload Logo and enter other details for the generation. It generates to PDF. It’s still in progress but you still check it out

Technologies Used: HTML | CSS | Javascript | Bootstrap | html2pdf library

Visit it here : https://invoice-gen.netlify.app/

github-img

 

 

 

index.html

 

 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  
  <title>INVOICE GENERATOR</title>
  
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>


  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">  

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.9.3/html2pdf.bundle.min.js" integrity="sha512-YcsIPGdhPK4P/uRW6/sruonlYj+Q7UHWeKfTAkBW+g83NKM+jMJFJ4iAPfSnVp7BKD4dKMHmVSvICUbE/V1sSw==" crossorigin="anonymous"></script>

<link rel="stylesheet" href="css/index.css">

</head>
<body>
  <div class="container space-main " id="congrats">
    <div class="main mb-3" >
      <div class="logo-invoice-no space-between">
        <div class="logo mb-3 ">
              <input type="file" id="files" name="files[]" width="100px" />
              <button id="file_button" class="border-r">+ Add your logo</button>
        </div>
        <div class="invoice-no">
          <input type="text" value="INVOICE" class="border-none form-control text-right display-5" >
          <div class="input-group mt-2">
            <div class="input-group-prepend">
              <span class="input-group-text" id="basic-addon1">#</span>
            </div>
            <input type="text" class="form-control" value="1" aria-label="Username" aria-describedby="basic-addon1">
            </div>
        </div>
      </div>

      <section class="info-date space-between" id="info-date">
        <div class="info">
          <textarea name="" id="sender" class="mt-0 form-control" placeholder="Who is this invoice from ? (required)"></textarea>
          <div class="bill-ship space-between">
            <div class="bill flex-column mr-2 ">
              <input type="text" value="Bill To :" class="border-none form-control " style="margin-left: 0.1rem">
              <textarea name="" id="receiver" class="form-control required" placeholder="Who is this invoice to ? (required)"></textarea>
            </div>
            <div class="ship flex-column">
              <input type="text" value="Ship to" class="border-none form-control ">
              <textarea name="" id="text" class="form-control required"></textarea>
            </div>
          </div>
        </div>

          <div class="date ">
            <div class="box space-between">
              <input type="text" value="Date"  class="border-none form-control mr-2 mt-1">
              <input type="text" class="form-control" id="date">
            </div>

            <div class="box space-between">
              <input type="text" value="Due Date" class="border-none form-control  mr-2 mt-1">
              <input type="text" class="form-control ">
            </div>                        
          </div>

      </section>

      <section>
        <div class="content flex bg-white mt-5">
            <input type="text" value="Description" class="form-control desc">
            <input type="text" value="Quantity" class="form-control qty text-center">
            <input type="text" value="Rate" class="form-control rte ">
            <input type="text" value="Amount" class="form-control amt text-right">  
            <i class=" i bg-white "></i>
        </div>
      <div id="hook">
        <div class="items flex yo" id="table"> 
              <textarea autoresize name="" cols="10" rows="2" id="text" placeholder="Description of service or product ..." class="form-control"></textarea>
              <input type="number" id="qty" value="1" class="form-control text-center">
              <div class="rate-currency flex-no-align">
                <p class="bg-white p-1 mt-1" style="font-size: 0.9rem" id="currency">$</p>
                <input type="number" id="rate" value="0" class="form-control">
              </div>
              <div class="amount ">
                <h6 style="font-size:0.9rem ; font-weight: 500"><span id="currency">$</span> <span class="total">0.00</span></h6>
              </div>
              <div class="trash hide flex" >
                  <i class="fa fa-trash first-trash " id="trash" style="visibility: hidden"></i>            
              </div>
        </div>
      </div>
        
        <h5 class="totalsum">Total : <span id="currency" style="color: #dc3545">$</span> <span id="totalsum">0.00</span></h5>
    
        <br/>  
        <button class="btn bg-warning" id="add-item"> + add item  </button>
        </section>
  
        <div class="notes  col-md-5  flex-column mt-5">
          <input type="text" value="Notes / Terms" class="border-none form-control ">
          <textarea name="" id="text" style='width: 100%' class="form-control"></textarea>
        </div>
    </div>


  <aside id="aside">
    <button class="btn bg-danger btn-lg text-white" id="gen_pdf"> DOWNLOAD AS PDF</button> <br/><br/>
    <p> Choose currency : <span id="currency_name"></span></p>
                        <select class="form-control" name="currency" id="select_currency">
                                                            <option value="AED" >AED</option>
                                                            <option value="AFN" >AFN</option>
                                                            <option value="ALL" >ALL</option>
                                                            <option value="AMD" >AMD</option>
                                                            <option value="ARS" >ARS</option>
                                                            <option value="AUD" >AUD</option>
                                                            <option value="AZN" >AZN</option>
                                                            <option value="BAM" >BAM</option>
                                                            <option value="BDT" >BDT</option>
                                                            <option value="BGN" >BGN</option>
                                                            <option value="BHD" >BHD</option>
                                                            <option value="BIF" >BIF</option>
                                                            <option value="BND" >BND</option>
                                                            <option value="BOB" >BOB</option>
                                                            <option value="BRL" >BRL</option>
                                                            <option value="BZD" >BZD</option>
                                                            <option value="CAD" >CAD</option>
                                                            <option value="CDF" >CDF</option>
                                                            <option value="CHF" >CHF</option>
                                                            <option value="CLP" >CLP</option>
                                                            <option value="CNY" >CNY</option>
                                                            <option value="COP" >COP</option>
                                                            <option value="CRC" >CRC</option>
                                                            <option value="CVE" >CVE</option>
                                                            <option value="CZK" >CZK</option>
                                                            <option value="DJF" >DJF</option>
                                                            <option value="DKK" >DKK</option>
                                                            <option value="DOP" >DOP</option>
                                                            <option value="DZD" >DZD</option>
                                                            <option value="EGP" >EGP</option>
                                                            <option value="ERN" >ERN</option>
                                                            <option value="ETB" >ETB</option>
                                                            <option value="EUR" >EUR</option>
                                                            <option value="GBP" >GBP</option>
                                                            <option value="GEL" >GEL</option>
                                                            <option value="GHS"  selected="selected" >GHS</option>
                                                            <option value="GNF" >GNF</option>
                                                            <option value="GTQ" >GTQ</option>
                                                            <option value="HKD" >HKD</option>
                                                            <option value="HNL" >HNL</option>
                                                            <option value="HRK" >HRK</option>
                                                            <option value="HUF" >HUF</option>
                                                            <option value="IDR" >IDR</option>
                                                            <option value="ILS" >ILS</option>
                                                            <option value="INR" >INR</option>
                                                            <option value="IQD" >IQD</option>
                                                            <option value="IRR" >IRR</option>
                                                            <option value="ISK" >ISK</option>
                                                            <option value="JMD" >JMD</option>
                                                            <option value="JOD" >JOD</option>
                                                            <option value="JPY" >JPY</option>
                                                            <option value="KES" >KES</option>
                                                            <option value="KHR" >KHR</option>
                                                            <option value="KMF" >KMF</option>
                                                            <option value="KRW" >KRW</option>
                                                            <option value="KZT" >KZT</option>
                                                            <option value="LBP" >LBP</option>
                                                            <option value="LKR" >LKR</option> 
                                                            <option value="LTL" >LTL</option>
                                                            <option value="LVL" >LVL</option>
                                                            <option value="LYD" >LYD</option>
                                                            <option value="MAD" >MAD</option>
                                                            <option value="MDL" >MDL</option>
                                                            <option value="MGA" >MGA</option>
                                                            <option value="MKD" >MKD</option>
                                                            <option value="MUR" >MUR</option>
                                                            <option value="MXN" >MXN</option>
                                                            <option value="MYR" >MYR</option>
                                                            <option value="MZN" >MZN</option>
                                                            <option value="NAD" >NAD</option>
                                                            <option value="NGN" >NGN</option>
                                                            <option value="NIO" >NIO</option>
                                                            <option value="NOK" >NOK</option>
                                                            <option value="NPR" >NPR</option>
                                                            <option value="NZD" >NZD</option>
                                                            <option value="OMR" >OMR</option>
                                                            <option value="PAB" >PAB</option>
                                                            <option value="PEN" >PEN</option>
                                                            <option value="PHP" >PHP</option>
                                                            <option value="PKR" >PKR</option>
                                                            <option value="PLN" >PLN</option>
                                                            <option value="PYG" >PYG</option>
                                                            <option value="QAR" >QAR</option>
                                                            <option value="RSD" >RSD</option>
                                                            <option value="RUB" >RUB</option>
                                                            <option value="RWF" >RWF</option>
                                                            <option value="SAR" >SAR</option>
                                                            <option value="SDG" >SDG</option>
                                                            <option value="SEK" >SEK</option>
                                                            <option value="SGD" >SGD</option>
                                                            <option value="SOS" >SOS</option>
                                                            <option value="SYP" >SYP</option>
                                                            <option value="THB" >THB</option>
                                                            <option value="TND" >TND</option>
                                                            <option value="TOP" >TOP</option>
                                                            <option value="TRY" >TRY</option>
                                                            <option value="TTD" >TTD</option>
                                                            <option value="TWD" >TWD</option>
                                                            <option value="TZS" >TZS</option>
                                                            <option value="UAH" >UAH</option>
                                                            <option value="UGX" >UGX</option>
                                                            <option value="USD" >USD</option>
                                                            <option value="UYU" >UYU</option>
                                                            <option value="UZS" >UZS</option>
                                                            <option value="VEF" >VEF</option>
                                                            <option value="VND" >VND</option>
                                                            <option value="XAF" >XAF</option>
                                                            <option value="XOF" >XOF</option>
                                                            <option value="YER" >YER</option>
                                                            <option value="ZAR" >ZAR</option>
                                                    </select>
      </div>
    </aside>
  </div>


<script src="js/index.js"></script>
  


</body>
</html>

 

 

DOWNLOAD FULL SOURCE CODE

 

 

Leave a Reply