equation/index.html at master · sisiwei/equation · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
<!doctype html>
<html>
<head>
    <title>Equation!</title>
    <link href='http://fonts.googleapis.com/css?family=Roboto+Slab:400,700,300' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <link rel="stylesheet" type="text/css" href="css/equation.css" />
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript" src="js/handlebars.js"></script>
    <script type="text/javascript" src="js/underscore-min.js"></script>
    <script type="text/javascript" src="js/calculator.js"></script>
</head>
<body>
    <a href="https://github.com/sisiwei/equation/"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png" alt="Fork me on GitHub"></a>
    <h1>equation</h1>
    <h2 class="tagline">Generate your own calculator widget.</h2>
    <hr/>

    <div class="main-container">
        <div class="row cf">
            <div class="left">
                <h3>Here's an example</h3>
                You can make this exact calculator widget yourself.
            </div>
            <div class="right">
                <iframe src="http://sisiwei.github.io/equation/fahrenheit.html" width="384" height="240" frameborder="0"></iframe>
            </div>
        </div>
        <div class="row cf">
            <div class="left">
                <h6>Step 1:</h6>
                Pick a calculation you want to do, like a Celsus to Fahrenheit converter.
            </div>
            <div class="right">
                <pre>
<code>Celsius = (Degrees Fahrenheit - 32)/1.8</code>
                </pre>
            </div>
        </div>
         <div class="row cf">
            <div class="left">
                <h6>Step 2:</h6>
                Figure out what you want the reader to input. In this case, it's "Degrees Fahrenheit." But it has to be one word for now.
            </div>
            <div class="right">
                <pre>
<code>Celsius = (DegreesFahrenheit - 32)/1.8</code>
                </pre>
            </div>
        </div>
        <div class="row cf">
            <div class="left">
                <h6>Step 3:</h6>
                Copy only what's on the right side of the equation, and paste it into the input box in the next section!</div>
            <div class="right">
                <pre>
<code>(DegreesFahrenheit - 32)/1.8</code>
                </pre>
            </div>
        </div>
        <div class="row cf">
            <div class="left">
                <h6>Multiple inputs</h6>
                You can also add as many inputs for the user as you'd like. Ex: A tip calculating widget.</div>
            <div class="right">
                <pre>
<code>tip = 0.2*(TotalBill - Tax)</code>
                </pre>
            </div>
        </div>
        <div class="row cf">
            <div class="left">
                <h6>Variable names</h6>
                Variable names should start with a letter and can contain letters, numbers and _s. And feel free to use parentheses, +, -, * and /.</div>
            <div class="right">
                <pre>
<code>tip = 0.2*(Total_Bill - Tax12345)</code>
                </pre>
            </div>
        </div>

        <hr/>
        <h2 class="try">Try it yourself.</h2>
        <div class="maker">
            <label id="resultLabel">result  =  </label> <input id="equationInput" type="text" placeholder="Enter equation" />
            <span><img class="error" src="images/red-x.png"/></span>
            <button id="generateButton">Generate Calculator</button>
            <div class="rounding">
                <input type="checkbox" id="roundCheck" checked /> Round results to <input type="text" value="2" id="roundPlaces" /> decimal places
            </div>
        </div>

        <div class="reveal">
            <hr/>
            <h2>Preview</h2>
            <div id="calculator-preview"></div>
            <h2>Copy and Paste</h2>
            <textarea id="calculatorSource"></textarea>
        </div>

    </div>
    <hr/>
    <footer>
        <h2>Using Equation? Tweet <a href="https://twitter.com/sisiwei">@sisiwei</a> with your link! Once we collect a few, we'll display them here and link back to you.</h2>
        <h2>Created by <a href="https://twitter.com/smelendez">Steven Melendez</a> & <a href="https://twitter.com/sisiwei">Sisi Wei</a>, presented at <a href="http://aaja2013.sched.org/event/35b97055c0f795ed04884c4abd94f354?iframe=no#.UgfoYWTTUTg">AAJA 2013</a>. More features pending.</h2>
    </footer>
    <!--
        Expects to get passed a list of variables
        and an equation
        Like {variables: [x,y,abc_var], equation: "x+y*z"}
    -->

    <script type="text/x-handlebars-template" id="calculatorTemplate">

        <!-- Delete the next line if you want to use your own CSS styles -->
        <link rel="stylesheet" type="text/css" href="http://sisiwei.github.io/equation/css/equation.css">

        <div id="calculator-preview">
            <div class="equation-container">
                <h3>Headline here</h3>
                <p class="guff">Sample guff text explaining the calculator.</p>
                <div class="calculator">
                    {{#each variables}}
                        <div class="var-input-wrapper">
                            <label>{{this}}:</label>
                            <input type="text" placeholder="0" class="variable-input" id="variable-input-{{this}}" />
                        </div>
                    {{/each}}
                    <div class="calc-results cf">
                        <button id="calculate-button">Calculate</button>
                        <div class="result-label">Result Label: <span id="result"></span></div>
                    </div>
                </div>
            </div>
        </div>

        <script type="text/javascript">
            function calculate(){
                {{#each variables}} var {{this}} = +$('#variable-input-{{this}}').val() || 0; {{/each}}
                var result = {{equation}};
                {{#if round}} result = result.toFixed({{roundPlaces}}); {{/if}}
                $('#result').text(result);
                $('.result-label').fadeIn();
            }
            $('#calculate-button').click(function(){
                calculate();
                $('.variable-input').keyup(calculate);
            });

    </script>
</body>

</html>