Embed

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Formula Calculator & PDF Download</title>
  <style>
    /* General Page Styles */
    body {
      font-family: Arial, sans-serif;
      margin: 20px;
    }
    /* Calculator Heading */
    h4 {
      font-size: 1.5em;
      margin-bottom: 10px;
    }
    /* Calculator Table Styles */
    table {
      width: 100%;
      border-collapse: collapse;
      margin-bottom: 20px;
    }
    th, td {
      border: 1px solid #ccc;
      padding: 8px;
      text-align: center;
    }
    input[type="number"] {
      width: 100px;
      padding: 5px;
    }
    /* Download Button Style */
    .download-btn {
      padding: 10px 20px;
      font-size: 1em;
      cursor: pointer;
      margin-top: 20px;
    }
  </style>
  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.5.25/jspdf.plugin.autotable.min.js"></script>
</head>
<body>
  
  <h4>Formula Calculator</h4>
  <table id="productTable">
    <thead>
      <tr>
        <th>Product</th>
        <th>Input (mg)</th>
        <th>Volume (mL)</th>
        <th>Cost (USD)</th>
      </tr>
    </thead>
    <tbody>
      
      <tr data-density="1.5" data-price="0.05">
        <td>Product X</td>
        <td>
          <input type="number" id="product_x_input" value="0" min="0" oninput="calculateTotals()" autocomplete="off">
        </td>
        <td class="volume">0.00</td>
        <td class="cost">0.00</td>
      </tr>
      <tr data-density="1" data-price="0.10">
        <td>Product Y</td>
        <td>
          <input type="number" id="product_y_input" value="0" min="0" oninput="calculateTotals()" autocomplete="off">
        </td>
        <td class="volume">0.00</td>
        <td class="cost">0.00</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <th>Total</th>
        <th id="totalMg">0</th>
        <th id="totalVolume">0.00</th>
        <th id="totalCost">0.00</th>
      </tr>
    </tfoot>
  </table>
  
  
  <button class="download-btn" onclick="downloadPDF()">Download Formula</button>
  
  <script>
    // Calculate totals based on user inputs
    function calculateTotals() {
      let totalMg = 0, totalVolume = 0, totalCost = 0;
      const rows = document.querySelectorAll('#productTable tbody tr');
      
      rows.forEach(row => {
        const density = parseFloat(row.getAttribute('data-density'));
        const price = parseFloat(row.getAttribute('data-price'));
        const inputField = row.querySelector('input');
        const mg = parseFloat(inputField.value) || 0;
        
        const volume = mg * density;
        const cost = mg * price;
        
        row.querySelector('.volume').textContent = volume.toFixed(2);
        row.querySelector('.cost').textContent = cost.toFixed(2);
        
        totalMg += mg;
        totalVolume += volume;
        totalCost += cost;
      });
      
      document.getElementById('totalMg').textContent = totalMg;
      document.getElementById('totalVolume').textContent = totalVolume.toFixed(2);
      document.getElementById('totalCost').textContent = totalCost.toFixed(2);
    }
    
    document.addEventListener('DOMContentLoaded', calculateTotals);
    
    // Generate and download a PDF that includes the entire calculator table,
    // including the user input numbers.
    function downloadPDF() {
      // Ensure the latest totals are calculated
      calculateTotals();
      
      // Clone the table so we can modify the "Input (mg)" column to display values instead of the input element.
      const originalTable = document.getElementById('productTable');
      const clonedTable = originalTable.cloneNode(true);
      
      // Update each row in the cloned table: replace the input element in the second cell with its value.
      const clonedRows = clonedTable.querySelectorAll('tbody tr');
      clonedRows.forEach((row, index) => {
        const originalRow = originalTable.querySelectorAll('tbody tr')[index];
        const inputValue = originalRow.querySelector('input').value;
        // Set the text content of the second cell to the input value
        row.cells[1].textContent = inputValue;
      });
      
      // Create a new jsPDF instance
      const { jsPDF } = window.jspdf;
      const doc = new jsPDF();
      
      // Add a title to the PDF
      doc.setFontSize(16);
      doc.text("Formula Calculator Results", 14, 15);
      
      // Use autoTable to convert the cloned HTML table to a PDF table.
      doc.autoTable({
        html: clonedTable,
        startY: 20,
        theme: 'grid',
        headStyles: { fillColor: [220, 220, 220] }
      });
      
      // Save the PDF file
      doc.save("formula_results.pdf");
    }
  </script>
</body>
</html>

Call to action

Partner with Solerter in Kasson, MN, to enhance your supplement manufacturing processes with precision and expertise. Discover tailored solutions for your unique needs today.

Product	Input (mg)	Volume (mL)	Cost (USD)
Product X		0.00	0.00
Product Y		0.00	0.00
Total	0	0.00	0.00

Formula Calculator

Elevate Your Supplement Production