<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

  <title>Weight converter</title>
  <style>
    body{
      margin-top: 70px;
      background: #505050;
      color:#fff;
  }
  </style>
</head>

<body>
    
    <div class="container">
        <div class="row">
            <div class="col-md-4">

            </div>
            <div class="col-md-4">
                <h1 class="display-5 text-center">Weight converter</h1>
                <form>
                    <div class="form-group">
                        <input 
                        id="lbsInput"
                        type="number" 
                        class="form-control-lg w-100" 
                        placeholder="Enter pounds...">
                    </div>
                </form>
                <div id="output">
                    <div class="card bg-primary mb-2 p-2">
                        <div class="card-block">
                            <h4>Grams:</h4>
                            <div id="gramsOutput"></div>
                        </div>
                    </div>
                    <div class="card bg-success mb-2 p-2">
                        <div class="card-block">
                            <h4>Kilograms:</h4>
                            <div id="kilogramsOutput"></div>
                        </div>
                    </div>
                    <div class="card bg-danger mb-2  p-2">
                        <div class="card-block">
                            <h4>Ounces:</h4>
                            <div id="ouncesOutput"></div>
                        </div>              
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                
            </div>
        </div>
    </div>
    
</body>
</html>
document.querySelector('#lbsInput').addEventListener('input', function(e){
            let lbs = e.target.value
            let grams = lbs / 0.0022046;
            let kilograms = lbs / 2.2046;
            let ounces = lbs * 16;

            document.querySelector('#gramsOutput').innerHTML = grams.toFixed(2);
            document.querySelector('#kilogramsOutput').innerHTML = kilograms.toFixed(2);
            document.querySelector('#ouncesOutput').innerHTML = ounces;
        });

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.