JSFiddle - React, Tailwind, and code Playground

by zshift

HTML

<script src="http://fonts.googleapis.com/css?family=Open+Sans:300,400"></script>
<script src="http://kasimahmic.koding.com/works/PPI/resources/base64.js"></script>
<body class="ppiApp">
    <div class="update">Update Available!</div> <span class="open"></span>

    <div class="holder">
        <div class="calculator">
            <label for="h_res">Horizontal Resolution (px)</label>
            <label for="v_res">Vertical Resolution (px)</label>
            <label for="diag">Diagonal Measurement (in)</label>
            <br>
            <input type="text" id="h_res" placeholder="0"></input>
            <input type="text" id="v_res" placeholder="0"></input>
            <input type="text" id="diag" placeholder="0"></input>
        </div>
        <div class="results">
             <h2>Your screen size is:</h2>
 <span id="width">0"</span>
 <span id="height">0"</span>

             <h2>Your Pixels Per Inch (PPI) is:</h2>
 <span id="ppi">0</span>

        </div> <a href="#" return false id="more">Click to see more (useless) info...</a>

        <div class="more">
            	<h4>Your screen size in centimeters is about <span id="centiWidth">___cm</span> wide by <span id="centiHeight">___cm</span> tall.</h4>

            	<h4>Each inch on your screen is about <span id="lengthX">___px</span> wide by <span id="lengthY">___px</span> tall.</h4>

            	<h4>Your screen has about <span id="area">___ square inches</span> (in.<sup>2</sup>).</h4>

            	<h4>Your screens aspect ratio is <span id="aspectRatio">__:__</span>.</h4>

            	<h4>You have a total of <span id="pixels">___ pixels</span> in your screen.</h4>

        </div>
        <p>*All measurements are taken in landscape.</p>
    </div>
    <div class="presets"> <span class="close"></span>

         <h2>Presets</h2>

        <ul>
            <li>Mobile</li>
            <li class="preset" data-h="960" data-v="640" data-diag="3.5">iPhone 4</li>
            <li class="preset" data-h="1136" data-v="640"...

CSS

::selection {
    background: rgb(255, 185, 41);
    background: rgba(255, 185, 41, 0.5);
}
::-moz-selection {
    background: rgb(255, 185, 41);
    background: rgba(255, 185, 41, 0.5);
}
.ppiApp input:focus {
    outline:none;
}
.update {
    color: #fff;
    display: none;
}
.ppiApp body, .ppiApp {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #202020;
    margin: 0;
    overflow-x: hidden;
    overflow-y: auto !important;
}
.ppiApp .holder {
    position: relative;
    min-width: 250px !important;
    width: 80%;
    background: #474747;
    margin: 20px auto 5px auto;
    padding: 10px 10px 25px 10px;
    text-align: center;
    border-radius: 10px;
    box-shadow: 0 0 10px #000;
}
.ppiApp .holder p {
    position: absolute;
    bottom: 2px;
    right: 5px;
    font: 300 12px'Open Sans', Arial;
    color: #FFF;
    margin: 0;
}
.ppiApp label {
    display: inline-block;
    width: 30%;
    font: 300 16px'Open Sans', Arial;
    color: #FFF;
    vertical-align: top;
}
.ppiApp input {
    width: 30%;
    height: 35px;
    background: #FFF;
    margin: 10px 0;
    padding: 10px;
    font: 300 16px'Open Sans', Arial;
    text-align: center;
    border: none;
    border-radius: 20px;
    box-sizing: border-box;
    box-shadow: 0 1px 0 #222, inset 0 1px 3px #777;
}
.ppiApp .results {
    text-align: center;
}
.ppiApp h2 {
    font: 200 20px'Open Sans', Arial;
    color: #FFF;
    margin: 16px;
}
.ppiApp .results span {
    display: inline-block;
    min-width: 250px;
    max-width: 100%;
    margin: 5px auto;
    padding: 20px;
    font: 300 50px'Open Sans', Arial;
    color: #FFF;
    text-overflow: ellipsis;
    overflow: hidden;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    border-radius: 20px;
    box-sizing: border-box;
    box-shadow: 0 1px 0 #333, inset 0 1px 0 #ffa833;
}
.ppiApp #width {
    background:#FF9200 url('http://kasimahmic.koding.com/works/PPI/resources/x.png') no-repeat;
}
.ppiApp #height {
   ...

JavaScript

$(document).ready(function() {

    // Sets the default values for the resolution
    $('#h_res').val(screen.width);
    $('#v_res').val(screen.height);

    // The calculator
    function calculate() {

        // Detects what you put in the fields
        var x = $('#h_res').val();
        var y = $('#v_res').val();
        var d = $('#diag').val();

        // Calculates the screen size
        var ratio = y / x;
        var devWidth = Math.sqrt( Math.pow(d,2) / ( 1 + Math.pow(ratio,2)) );
        var devHeight = devWidth * ratio;

        // Displays the result rounded to two decimal places
        $('#height').text(devHeight.toFixed(2) + '"');
        $('#width').text(devWidth.toFixed(2) + '"');

        // Calculates the PPI
        var area = devHeight * devWidth;
        var ppi = Math.sqrt(x * y / area);

        // Displays the result rounded to two decimal places
        $('#ppi').text(ppi.toFixed(2));
        
        // Calculates the width and height of each inch of the device screen in px
        var lengthX = Math.sqrt(ppi);
        var lengthY = Math.sqrt(ppi);
        
        // Displays the result
        $('#lengthX').text(lengthX.toFixed(2) + ' px');
        $('#lengthY').text(lengthY.toFixed(2) + ' px');
        
        // Calculates the screen size in centimeters
        var centiWidth = devWidth * 2.54;
        var centiHeight = devHeight * 2.54;
        
        // Displays the result
        $('#centiWidth').text(centiWidth.toFixed(2) + ' cm');
        $('#centiHeight').text(centiHeight.toFixed(2) + ' cm');
        
        // Displays square inches in the screen (calculated earlier)
        $('#area').html(area.toFixed(2) + ' square inches');
        
        // Calculates the amount of pixels there are in the screen
        var pixels = (x * y);
        
        // Displays the result
        $('#pixels').text(pixels + ' pixels');
        
        // Calculates the screens aspect ratio (kinda buggy)
        var aspectRatio = (x /...