Responsive Equations

by sturobson

HTML

<h1>The Responsive Web Designer's Calculator</h1>

<p>So, you've decided to go all Responsive Web Design on your next project. Let's face it, why wouldn't you? (I know, "it depends")</p>

<form id="result">
    <label for="selector">selector <span>example: body</span></label>
    <input type="text" id="element" label="element">
    <label for="target">target <span>example: 980px</span></label>
    <input type="number" id="target" label="target">
    <label for="border">border <span>example: 10px, 10px, 10px, 10px</span></label>
    <input type="text" id="border" label="border">
    <label for="margin">margin <span>example: 10px, 10px, 10px, 10px</span></label>
    <input type="text" id="margin" label="margin">
    <label for="padding">padding <span>example: 10px, 10px, 10px, 10px</span></label>
    <input type="text" id="padding" label="padding">
    <label for="context">context <span>example: 1024px</span></label>
    <input type="number" id="context" label="context">
    <input type="submit" id="results"></form>
<div id="code-results">

</div>

CSS

* { margin: 0 auto; padding:0; }
body { font-size: 62.5%; padding: 3%; }
h1 { text-align:center; line-height: 1.4em; font-size: 2.4em;}
p { font-size: 1.4em; line-height: 1.4em; }

label{ display: block; font-size: 1.4em; padding: 1em 0 0.5em 0; }

form span { font-size: 0.8em; color: #999; }

p#code-results {
    color: #111;
    font-family: 'Monaco', 'Courier';
    font-size: 12px;
    display: block;
    padding-left: 10px;
    margin-top: 10px;
}
p#code-results span {
    display: block; padding-left: 20px;
}

JavaScript

$(document).ready(function() {
   
$(function(){
    $("#result").submit(function(e) {
        e.preventDefault();
       
        var ele = $("#element").val(),
            target = $("#target").val(),
            context = $("#context").val(),
            border = $("#border").val(),
            margin = $("#margin").val(),
            padding = $("#padding").val();

        console.log(ele, target, context, border, margin, padding);

        var DoubleMargin = parseInt(margin, 10) * 2;
        var DoublePadding = parseInt(padding, 10) * 2;
        var DoubleBorder = parseInt(border, 10) * 2;
        
        
        var ActualTarget = parseInt(target, 10) - parseInt(DoubleBorder, 10) - parseInt(DoubleMargin, 10) - parseInt(DoublePadding, 10) * 1;
        var result3 = parseInt(target, 10) - parseInt(DoubleMargin, 10) * 1;
        var MarginResult = ((parseInt(margin, 10) / parseInt(target, 10)) * 100).toFixed(5);
        var PaddingResult = ((parseInt(padding, 10) / parseInt(target, 10)) * 100).toFixed(5);
        var OriginalResult = ((parseInt(ActualTarget, 10) / parseInt(context, 10)) * 100).toFixed(5);

        
        var BorderResult = parseInt(target, 10) - parseInt(border, 10) * 1;
           
       
        //$(".result").append(ele + " " + result + "%");
        $("<p></p>", {
            html: ele + " {<br><span>width: " + OriginalResult + "%;" + " /* " + ActualTarget + " (originally " + target + ") / " + context + " */ " + "<br>border: " + border + "px; " + "<br>margin: " + MarginResult + "%; " + "<br>padding: " + PaddingResult+ "%;" + "<br> </span>}"
        }).hide().appendTo("#code-results").fadeIn();
    });

}); 
    
});