Calculator

simple web calculator for the following screen size to font size calculation:

by Ankit Patidar

HTML

<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.min.css">
<div class="col-xs-12">
    <div class="form-group">
        <label>Font size</label>
        <input class="form-control num" type="text" id="fontSize">(in points)</div>
    <div class="form-group">
        <label>Screen size</label>
        <input class="form-control num" type="text" id="screenSize">(diagonal in inches)</div>
    <div class="form-group">
        <label>Resolution of Screen</label>
        <div class="row">
            <div class="form-group col-xs-6">
                <div class="input-group">
                    <div class="input-group-addon">Width</div>
                    <input class="form-control num" type="text" id="resolutionX" value="1920">
                </div>
            </div>
            <div class="form-group col-xs-6">
                <div class="input-group">
                    <div class="input-group-addon">Height</div>
                    <input class="form-control num" type="text" id="resolutionY" value="1080">
                </div>
            </div>
        </div>
    </div>
    <div class="form-group">
        <label>Distance from Screen</label>
        <input class="form-control num" type="text" id="distance">(in feet)</div>
    <div class="form-group">
        <label>DPI/PPI setting</label>
        <input class="form-control num" type="text" id="ppi" value="72">
    </div>
    <div class="form-group">
        <input class="btn btn-success" type="button" value="Calculate" id="calculate">
    </div>
</div>

CSS

div {
    margin-bottom:5px
}

JavaScript

//fontSize screenSize resolution distance ppi
var fontSize;
var screenSize;
var resolutionX;
var resolutionY;
var distance;
var ppi;

$(document).ready(function () {
    resolutionY = $("#resolutionY").val();
    distance = $("#distance").val();

    if (distance == "") {
        distance = resolutionY * 8;
        $("#distance").val(distance);
    };

    $("#calculate").click(function () {
        fontSize = $("#fontSize").val();
        screenSize = $("#screenSize").val();
        resolutionX = $("#resolutionX").val();
        resolutionY = $("#resolutionY").val();
        distance = $("#distance").val();
        ppi = $("#ppi").val();

        if (fontSize == "") {
            distance = resolutionY * 8;
            $("#distance").val(distance);
        } else {
            distance = fontSize * 150;
            $("#distance").val(distance);
        }
        //alert(resolutionY);
    });

    $('.num').on('keypress', function (evt) {
        var charCode = (evt.which) ? evt.which : event.keyCode;
        return !(charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57));
    });

});