Aspect Ratio Calc

by SpYk3

HTML

<h1 style="opacity: .1;">Aspect Ratio Calc</h1>
<table>
  <thead>
    <tr>
      <th colspan="2">
        Original
      </th>
      <th colspan="2">
        New
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <label for="oW">Width</label>
      </td>
      <td>
        <label for="oH">Height</label>
      </td>
      <td>
        <label for="nW">Width</label>
      </td>
      <td>
        <label for="nH">Height</label>
      </td>
    </tr>
    <tr>
      <td>
        <input id="oW" min="0" type="number" value="800" />
      </td>
      <td>
        <input id="oH" min="0" type="number" value="600" />
      </td>
      <td>
        <input id="nW" min="0" type="number" value="" />
      </td>
      <td>
        <input id="nH" min="0" type="number" value="1200" />
      </td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th colspan="4" style="text-align: center;">
        <button>Clear</button>
      </th>
    </tr>
    <tr>
      <th colspan="2" style="text-align: center;">
        <label for="ar">Aspect Ratio</label>
      </th>
      <td colspan="2" style="text-align: center;">
        <input readonly="readonly" id="ar" />
      </td>
    </tr>
  </tfoot>
</table>

CSS

table {
  border-collapse: collapse;
  border: 1px solid;
}

input {
  width: 7em;
}

th,
td {
  border: 1px solid;
}

th,
tbody tr:first-child td {
  padding: .25em .5em;
}

tr th:first-child,
tr td:nth-child(2) {
  border-right-width: 2px;
}

tr th:last-child,
tr td:nth-child(3) {
  border-left-width: 2px;
}

tbody tr td:nth-child(3),
tbody tr td:nth-child(4),
tbody tr td:nth-child(3) input,
tbody tr td:nth-child(4) input {
  text-align: right;
}

JavaScript

/*-------------------------COPY&PASTE------------------------------*/
function aspectRatioHD(){if(2==arguments.length){var d=function(a){a=parseFloat((""+a).replace(/[^0-9.]/g,""));return a==a?a:void 0},a=function(a){var b={},c;for(c in a)if(a.hasOwnProperty(c))switch(c.toLowerCase()){case "height":b.h=d(a[c]);break;case "width":b.w=d(a[c])}if("number"!=typeof b.h||b.h!=b.h)b.h=void 0;if("number"!=typeof b.w||b.w!=b.w)b.w=void 0;return b},b=a(arguments[0]),a=a(arguments[1]);if(b.w&&b.h&&a.w&&a.h)return Math.round(a.w/a.h*100)/100==Math.round(b.w/b.h*100)/100?(b=function e(a,
b){return b?e(b,a%b):a},b=b(a.w,a.h),[a.w/b,a.h/b]):a.w/a.h==b.w/b.h;if(b.w&&b.h&&!a.w&&a.h)return Math.round(b.w/b.h*a.h);if(b.w&&b.h&&a.w&&!a.h)return Math.round(a.w/(b.w/b.h));if(!b.w&&b.h&&a.w&&a.h)return Math.round(a.w/a.h*b.h);if(b.w&&!b.h&&a.w&&a.h)return Math.round(b.w/(a.w/a.h))}else throw Error("Invalid Amount of Arguments. Must have 2 arguments such as: [{height:1,width:2},{height:3}]");};
/*-------------------------COPY&PASTE------------------------------*/

/*-----------THE FOLLOWING IS SIMPLY FOR THE EXAMPLE---------------*/
$(function() {
	$(document).on('change keyup', 'input', function(e) {
  	var oh = parseFloat($('#oH').val().replace(/[^0-9.]/g, '')),
    		ow = parseFloat($('#oW').val().replace(/[^0-9.]/g, '')),
        nh = parseFloat($('#nH').val().replace(/[^0-9.]/g, '')),
        nw = parseFloat($('#nW').val().replace(/[^0-9.]/g, ''));
     
     if (oh && ow && nh && nw) {
     	switch(this.id) {
      	case "oH":
      	case "oW":
        	if (nh) $('#nW').val(nw = aspectRatioHD({ "height": oh, "width": ow }, { "height": nh }));
          else $('#nH').val(nh = aspectRatioHD({ "height": oh, "width": ow }, { "width": nw }));
          break;
      	case "nH":
        	if (oh && ow) $('#nW').val(nw = aspectRatioHD({ "height": oh, "width": ow }, { "height": nh }));
        	else if (oh) $('#oW').val(ow = aspectRatioHD({ "height": oh }, { "height": nh, "width": nw }));
 ...