Embeddable Molecular Weight Calculator for Your Site

Add a professional Molecular Weight Calculator to your website. You can easily customize the style to match your design while keeping the functionality intact. Simply copy the code below and paste it into your site's HTML.

Calculator Preview

Chemical Formula

Example: H2O, NaCl, C6H12O6

Installation Instructions

1.Copy the code in the text box below
2.Paste it into your HTML page
3.You may edit the CSS or HTML layout, but do not modify the JavaScript
4.Keep the attribution link "powered by Ultimate Calc Hub"

<!--BEGIN OF MOLECULAR WEIGHT CALCULATOR CODE-->
<!-- Terms of Use (see below) -->
<div id="uch-embed-calc">
  <h2 style="margin-bottom: 1rem;">Molecular Weight Calculator</h2>
  
  <div style="margin-bottom: 1rem;">
    <label for="formula">Chemical Formula:</label>
    <input type="text" id="formula" style="width: 100%; padding: 8px; margin-top: 4px; border: 1px solid #ccc; border-radius: 4px;">
    <small style="display: block; margin-top: 4px; color: #666;">Example: H2O, NaCl, C6H12O6</small>
  </div>
  
  <button onclick="calculateMolecularWeight()" style="background: var(--uch-accent); color: white; padding: 8px 16px; border: none; border-radius: 4px; cursor: pointer; width: 100%;">
    Calculate Molecular Weight
  </button>
  
  <div id="result" style="margin-top: 1rem; text-align: center; font-weight: bold;"></div>
  <div id="breakdown" style="margin-top: 0.5rem; text-align: left; font-size: 0.9rem;"></div>
  
  <center id="uch-credit" style="margin-top: 1rem; font-size: 0.875rem;">
    powered by <a href="https://ultimatecalchub.com" target="_blank" rel="dofollow" style="color: var(--uch-accent); text-decoration: none;">Ultimate Calc Hub</a>
  </center>
</div>

<script>
const atomicWeights = {
  H: 1.008, He: 4.003, Li: 6.94, Be: 9.012, B: 10.81, C: 12.011, N: 14.007,
  O: 15.999, F: 18.998, Ne: 20.180, Na: 22.990, Mg: 24.305, Al: 26.982,
  Si: 28.085, P: 30.974, S: 32.06, Cl: 35.45, Ar: 39.948, K: 39.098,
  Ca: 40.078, Sc: 44.956, Ti: 47.867, V: 50.942, Cr: 51.996, Mn: 54.938,
  Fe: 55.845, Co: 58.933, Ni: 58.693, Cu: 63.546, Zn: 65.38, Ga: 69.723,
  Ge: 72.630, As: 74.922, Se: 78.971, Br: 79.904, Kr: 83.798, Rb: 85.468,
  Sr: 87.62, Y: 88.906, Zr: 91.224, Nb: 92.906, Mo: 95.95, Tc: 98,
  Ru: 101.07, Rh: 102.91, Pd: 106.42, Ag: 107.868, Cd: 112.41, In: 114.82,
  Sn: 118.71, Sb: 121.76, Te: 127.60, I: 126.90, Xe: 131.29, Cs: 132.91,
  Ba: 137.33, La: 138.91, Ce: 140.12, Pr: 140.91, Nd: 144.24, Pm: 145,
  Sm: 150.36, Eu: 151.96, Gd: 157.25, Tb: 158.93, Dy: 162.50, Ho: 164.93,
  Er: 167.26, Tm: 168.93, Yb: 173.05, Lu: 174.97, Hf: 178.49, Ta: 180.95,
  W: 183.84, Re: 186.21, Os: 190.23, Ir: 192.22, Pt: 195.08, Au: 196.967,
  Hg: 200.59, Tl: 204.38, Pb: 207.2, Bi: 208.98, Po: 209, At: 210,
  Rn: 222, Fr: 223, Ra: 226, Ac: 227, Th: 232.04, Pa: 231.04, U: 238.03
};

function calculateMolecularWeight() {
  const formula = document.getElementById('formula').value.trim();
  if (!formula) {
    document.getElementById('result').innerHTML = 'Please enter a chemical formula';
    document.getElementById('breakdown').innerHTML = '';
    return;
  }

  let totalWeight = 0;
  let currentElement = '';
  let currentNumber = '';
  const breakdown = [];

  function addToTotal(element, number) {
    if (element) {
      const count = number ? parseInt(number) : 1;
      const weight = atomicWeights[element];
      if (weight) {
        totalWeight += weight * count;
        breakdown.push(`${element}${number ? count : 1} = ${(weight * count).toFixed(3)} g/mol`);
      }
    }
  }

  for (let i = 0; i < formula.length; i++) {
    const char = formula[i];
    if (char >= 'A' && char <= 'Z') {
      addToTotal(currentElement, currentNumber);
      currentElement = char;
      currentNumber = '';
    } else if (char >= 'a' && char <= 'z') {
      currentElement += char;
    } else if (char >= '0' && char <= '9') {
      currentNumber += char;
    }
  }
  addToTotal(currentElement, currentNumber);

  document.getElementById('result').innerHTML = `Molecular Weight = ${totalWeight.toFixed(3)} g/mol`;
  document.getElementById('breakdown').innerHTML = breakdown.join('<br>');
}
</script>

<style>
:root {
  --uch-accent: #0066ff;
  --uch-bg: #f9f9f9;
  --uch-text: #333;
}

#uch-embed-calc {
  font-family: system-ui, -apple-system, sans-serif;
  background: var(--uch-bg);
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  max-width: 500px;
  margin: 0 auto;
}

#uch-embed-calc input:focus {
  outline-color: var(--uch-accent);
}

#uch-embed-calc button:hover {
  opacity: 0.9;
}

#breakdown {
  padding: 0.5rem;
  margin-top: 0.5rem;
  background: rgba(0,0,0,0.03);
  border-radius: 4px;
}
</style>
<!--
TERMS OF USE
By embedding this calculator, you agree:
1. The materials are provided "as is" and without warranties.
2. You may customize HTML/CSS but not modify JavaScript.
3. Keep "powered by Ultimate Calc Hub" with its link.
4. Copyright belongs to Ultimate Calc Hub (https://ultimatecalchub.com).
5. Do not remove or alter these terms.
-->
<!--END OF MOLECULAR WEIGHT CALCULATOR CODE-->

Terms of Use

By embedding this calculator, you agree to the following:

1.The materials are provided "as is" without warranties of any kind
2.You may customize the HTML and CSS, but not the JavaScript code
3.You must keep the "powered by Ultimate Calc Hub" text and link
4.The copyright belongs to Ultimate Calc Hub
5.You must not remove or alter these terms

About Molecular Weight Calculation

The Molecular Weight Calculator helps determine the molar mass of chemical compounds by summing the atomic weights of all atoms in a molecule. This is essential for chemical calculations and stoichiometry.

•How It Works

The calculator processes chemical formulas using these steps:

–Parses the chemical formula element by element
–Multiplies each element's atomic weight by its count
–Sums all values to get the total molecular weight

•Customization Options

The calculator's appearance can be customized using CSS variables:

–--uch-accent: Main accent color
–--uch-bg: Background color
–--uch-text: Text color