Calculator: Aspect ratio

Basic calculator for aspect ration

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">

  <br>

  <form>
    <div class="form-group">
      <label for="original">Base width and height </label>
      <input id="w" class="form-control" /> by <input id="h" class="form-control" />
    </div>
    <div class="form-group">
      <label for="newvalue"> Generated width and height </label>
      <input id="gw" class="form-control" /> by <input id="gh" class="form-control" />
    </div>
    <button id="btn-round" class="btn btn-primary" type="button">Round Ceiling</button>
  </form>

  <br>

  <h2 id="result"></h2>

</div>

CSS

input {
  text-align: center;
  width: 64px;
}

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

body,
input {
  font-size: 14px;
}

h1 {
  font-size: 18px;
}

h2 {
  font-size: 16px;
}

JavaScript

var flags = {
  "rounding": 0
};

$(function() {

  $("#gw").keyup(function() {
    var r = gcdr();
    $("#gh").val(round($("#gw").val() / r));
  });

  $("#gh").keyup(function() {
    var r = gcdr();
    $("#gw").val(round(r * $("#gh").val()));
  });

  $("#btn-round").click(function() {
    var v = $("#btn-round").text();
    if (v == "Round Ceiling") {
      $("#btn-round").text("Round Floor");
      flags.rounding = 1;
    } else if (v == "Round Floor") {
      $("#btn-round").text("No Rounding");
      flags.rounding = 2;
    } else {
      $("#btn-round").text("Round Ceiling");
      flags.rounding = 0;
    }

  });
});

function gcd(a, b) {
  return (b == 0) ? a : gcd(b, a % b);
}

function gcdr() {
  var r = gcd($("#w").val(), $("#h").val());
  return ($("#w").val() / r) / ($("#h").val() / r)
}

function round(v) {
  return flags.rounding == 0 ? Math.ceil(v) :
    flags.rounding == 1 ? Math.floor(v) : v;
}