Metric to Imperial

by moob

HTML

<h3>Inches / Millimeters</h3>
<label>Millimeters: <input type="text" id="mm" placeholder="mm" /></label>
<label>Inches: <input type="text" id="in" placeholder="inches" value="" /></label>
<label>DP: <input type="text" id="dp" placeholder="dp" value="" /></label>


<h3>Ounces / Grams</h3>
<label>Grams: <input type="text" id="gr" placeholder="grams" /></label>
<label>Ounces: <input type="text" id="oz" placeholder="ounces" value="" /></label>

<h3>Yards / Meters</h3>
<label>Meters: <input type="text" id="mt" placeholder="Meters" /></label>
<label>Yards: <input type="text" id="yd" placeholder="Yards" value="" /></label>

<h3>Sq Yards / Sq Meters</h3>
<label>Sq Meters: <input type="text" id="smt" placeholder="Sq Meters" /></label>
<label>Sq Yards: <input type="text" id="syd" placeholder="Sq Yards" value="" /></label>

<h3>GSM / OZSY</h3>
<label>GSM: <input type="text" id="gsm" placeholder="gsm" /></label>
<label>OZ - SqYd: <input type="text" id="osy" placeholder="osy" value="" /></label>

<h3>GSM / OZSY (2)</h3>
<label>GSM: <input type="text" id="gpsm" placeholder="gpsm" /></label>
<label>OZ - SqYd: <input type="text" id="opsy" placeholder="opsy" value="" /></label>

CSS

* {box-sizing:border-box; font-family:Arial, sans-serif;}
label {display:table-cell; border:1px solid #fff; width:40%; position:relative; background-color:#eee; padding:8px;}
label + label + label {width:20%;}
label input {width:100%; font-size:1.5em;}

JavaScript

//in / mm
Object.prototype.toInches = function(dp){
    var inches = this/25.4;
    console.log(dp);
    return (dp!=null && dp>=0)?inches.toFixed(dp):inches;
}
Object.prototype.toMillimeters = function(dp){
    var millimeters = this*25.4;    
    return (dp!=null && dp>=0)?millimeters.toFixed(dp):millimeters;
}

//oz / g
Object.prototype.toOunces = function(dp){
    var ounces = this*0.035274;    
    return (dp!=null && dp>=0)?ounces.toFixed(dp):ounces;
}
Object.prototype.toGrams = function(dp){
    var grams = this/0.035274;    
    return (dp!=null && dp>=0)?grams.toFixed(dp):grams;
}

//meters to yards
Object.prototype.toYards = function(dp){
    var yards = this/0.9144;    
    return (dp!=null && dp>=0)?yards.toFixed(dp):yards;
}
Object.prototype.toMeters = function(dp){
    var meters = this*0.9144;    
    return (dp!=null && dp>=0)?meters.toFixed(dp):meters;
}

//sq meters to sq yards
Object.prototype.toSqYards = function(dp){
    var sqyards = this*1.1960;    
    return (dp!=null && dp>=0)?sqyards.toFixed(dp):sqyards;
}
Object.prototype.toSqMeters = function(dp){
    var sqmeters = this/1.1960;    
    return (dp!=null && dp>=0)?sqmeters.toFixed(dp):sqmeters;
}

//sq meters to sq yards
Object.prototype.toOzPerSqYards = function(dp){
    var gpsqyards = this*0.0294935247;    
    return (dp!=null && dp>=0)?gpsqyards.toFixed(dp):gpsqyards;
}
Object.prototype.toGrPerSqMeters = function(dp){
    var gpsqmeters = this/0.0294935247;    
    return (dp!=null && dp>=0)?gpsqmeters.toFixed(dp):gpsqmeters;
}







var m = document.getElementById("mm"),
    i = document.getElementById("in"),
    d = document.getElementById("dp"),
    g = document.getElementById("gr"),
    o = document.getElementById("oz"),
    mt = document.getElementById("mt"),
    yd = document.getElementById("yd"),
    smt = document.getElementById("smt"),
    syd = document.getElementById("syd"),
    gpsm = document.getElementById("gpsm"),
    opsy = document.getElementById("opsy"),
    dp...