Calculator: Meter to Voxel

Calculate the number of voxel in a meter.

by Joey Albert Abano

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/4.2.1/cerulean/bootstrap.min.css">
<div class="container">
  <form>
    <div class="row">
      <select class="form-control">
        <option>Metric Converter</option>
      </select>
    </div>
    <div class="row">
      <div class="col-sm-6">
        <div class="row">
          <input id="i1" class="form-control">
        </div>
        <div class="row">
          <select id="s1" class="form-control">
            <option value="mm">Millimeters</option>
            <option value="cm">Centimeters</option>
            <option value="m" selected="selected">Meters</option>
            <option value="in">Inches</option>
            <option value="ft">Feet</option>
            <option value="v">Voxel</option>
          </select>
        </div>
      </div>
      <div class="col-sm-6">
        <div class="row">
          <input id="i2" class="form-control">
        </div>
        <div class="row">
          <select id="s2" class="form-control">
            <option value="mm">Millimeters</option>
            <option value="cm">Centimeters</option>
            <option value="m">Meters</option>
            <option value="in">Inches</option>
            <option value="ft">Feet</option>
            <option value="v" selected="selected">Voxel</option>
          </select>
        </div>
      </div>
    </div>
  </form>
</div>

CSS

input {
  text-align: center;
}

body {
  background: #222;
  color: #fff;
}

body,input,select {
  font-size: 11px;
}

h1 {
  font-size: 18px;
}

h2 {
  font-size: 16px;
}

JavaScript

var _c = {
  'm': {
    v: 1
  },
  'cm': {
    v: 100
  },
  'mm': {
    v: 1000
  },
  'in': {
    v: 39.37
  },
  'ft': {
    v: 3.281
  },
  'v': {
    v: 32
  }
}

$(function() {
  let f = function() {
    render($(this).attr('id'));
  };
  $('input').on('keyup', f);
  $('select').on('change', f);
});

function render(id) {
  let s1 = $('#s1').val(),
    s2 = $('#s2').val(),
    i1 = parseFloat($('#i1').val()),
    i2 = parseFloat($('#i2').val());

  if (id == 'i1' || id == 's1') {
    $('#i2').val(convert(i1, s1, s2));
  } else {
    $('#i1').val(convert(i2, s2, s1));
  }

}

function convert(v, c1, c2) {
  v = v / _c[c1].v;
  v = v * _c[c2].v;
  return isNaN(v) ? '' : v;
}