<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>
        <div class="form-group">
          <input id="lbsInput" type="number" class="form-control form-control-lg" placeholder="Enter Pounds...">
        </div>
      </form>
      <div id="output">
        <div class="card card-primary mb-2">
          <div class="card-block">
            <h4>Grams:</h4>
            <div id="gramsOutput"></div>
          </div>
        </div>

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

        <div class="card card-danger mb-2">
          <div class="card-block">
            <h4>Ounces:</h4>
            <div id="ozOutput"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
body{
  margin-top:70px;
  background:#333;
  color:#fff;
}
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;
});

External CSS

  1. https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.