​

## Simple *mdpad* example

​

In this simple example, the inputs are hard-coded with HTML. In `mdpad_update()`, the result is updated using `innerHTML`.

​

<form class="form">

    <div class="form-group">

        <label class="col-form-label">Length of axis A</label>

        <input class="form-control" min="0" step="1" type="number" value="2" mdpad="A">

    </div>

    <div class="form-group">

        <label class="col-form-label">Length of axis B</label>

        <div class=""><input class="form-control" min="0" step="1" type="number" value="1" mdpad="B"></div>

    </div>

</form>

​

## Results

​

  <div id="output"></div>

<script src="https://cdn.jsdelivr.net/npm/mdpad-js@0.2.2/dist/mdpad.min.js" crossorigin="anonymous"></script>  

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />

​

<script>

​

function mdpad_update() {

    var area = mdpad.A * mdpad.B * Math.PI;

    document.getElementById("output").innerHTML = 

        "The area of this ellipse = " + area;

}

​

</script>

​