Simple JavaScript Weight Converter

Summary

Using vanilla Javascript, HTML and CSS we can build a pounds to kilogram weight conversion calculator.

Also:

• pounds to grams
• pounds to ounces

Tech

• HTML
• CSS
• JavaScript

HTML

Link to Bootstrap.

<link
  href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
  rel="stylesheet"
/>

Add elements to body of page.

<div class="container">
  <div class="row">
    <div class="col-md-6 offset-md-3">
      <h1 class="display-4 text-center mb-3">Weight Converter</h1>
      <form class="mb-4">
        <div class="form-group">
          <input
            type="number"
            class="form-control form-control-lg"
            placeholder="Enter Pounds..."
            id="lbsInput"
          />
        </div>
      </form>

      <div id="output">
        <div class="card bg-primary mb-2">
          <div class="card-body">
            <h4>Grams:</h4>
            <div id="gramsOutput"></div>
          </div>
        </div>

        <div class="card bg-success mb-2">
          <div class="card-body">
            <h4>Kilograms:</h4>
            <div id="kgOutput"></div>
          </div>
        </div>

        <div class="card bg-danger mb-2">
          <div class="card-body">
            <h4>Ounces:</h4>
            <div id="ozOutput"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

JS Code

Add js code.

document.getElementById('output').style.visibility = 'hidden';
document.getElementById('lbsInput').addEventListener('input', function (e) {
  document.getElementById('output').style.visibility = 'visible';
  let lbs = e.target.value;
  document.getElementById('gramsOutput').innerHTML = lbs / 0.0022046;
  document.getElementById('kgOutput').innerHTML = lbs / 2.2046;
  document.getElementById('ozOutput').innerHTML = lbs * 16;
});

Demo

View demo on JS Fiddle.

Link to Demo