​

## *mdpad* example with Mithril inputs and outputs

​

This is an example [mdpad](https://mdpad.netlify.com) page.

The inputs and outputs are generated using the [mdpad-mithril](https://github.com/tshort/mdpad-js/blob/master/src/mdpad-mithril.js) helper functions. 

These helper functions rely on [Mithril](https://mithril.js.org/) and Bootstrap.

The value A is limited to between 1 and 10.

​

  <div id="input"></div>

​

## Results

​

Here are some results. As the inputs above change, the outputs should adjust accordingly. 

The plot is done with [Plotly-js](https://plot.ly/javascript/). 

​

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

​

​

​

<script src="https://unpkg.com/mdpad-js@0.3.2/dist/mdpad.min.js" crossorigin="anonymous"></script>

<script src="https://unpkg.com/mdpad-js@0.3.2/dist/mdpad-mithril.min.js" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/mithril/2.0.4/mithril.min.js"></script>

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<script src="https://cdn.plot.ly/plotly-1.52.2.min.js"></script>

​

<script>

​

​

var tbl = {

    fruit: ["orange", "apple", "banana", "apple"],

    k: [10, 20, 50, 99],

}

​

function mdpad_init() {

    var form = 

          m(".row", m(".col-md-6", 

            minput({ title:"Number A", mdpad:"A", value:3.3, min:1, max:10 }),

            mselect({ title: "Fruit", mdpad: "fruit", options: ["apple", "banana", "orange"]}),

          ));

    m.render(document.getElementById("input"), form);

}

​

function mdpad_update() {

    tbl["k * A"] = tbl.k.map((x) => mdpad.A * x);

    var colors = tbl.fruit.map((x) => x == mdpad.fruit ? "green" : "purple");   

    m.render(document.getElementById("output"), m("div",

      mdatatable(tbl, {theadclass: "thead-dark"}),

      m("p", "The first ", m("em", mdpad.fruit), 

        " in the table has k == ", m("b", tbl.k[tbl.fruit.indexOf(mdpad.fruit)]), "."),

      mplotly([{x: tbl.fruit, y: tbl["k * A"], type:"bar", marker: {color: colors}}]),

    ));

}

​

</script>

​