Aspect ratio calculator

Basic calculator for aspect ration

by Joey Albert Abano

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<p>
  Base width and height <input id="w" /> by <input id="h" />
</p>
<p>
  Generated width and height <input id="gw" /> by <input id="gh" />
</p>
<p> 
<button id="btn-round">Round Ceiling</button>
</p>

CSS

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

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;
}