Add a live calculator (a la Alfred)

Super unoptimized. This increases the page size quite a bit. Add
require.js in the future?

TODO

@@ -0,0 +1 @@
+* Load assets using require.js

index.php

@@ -33,8 +33,8 @@ if( 'POST' === $_SERVER['REQUEST_METHOD'] ) {
 <div class="cols">
     <div class="col">
         <form method="post">
-            <textarea class="data" name="data"><?php if( $action ) echo $action->esc_raw(); ?></textarea><br>
+            <textarea class="data boxed" name="data"><?php if( $action ) echo $action->esc_raw(); ?></textarea><br>
-            <select name="action">
+            <select name="action" class="boxed">
                 <option value="QuotedPrintableDecode" <?php echo selected($action_str, 'QuotedPrintableDecode'); ?>>quoted_printable_decode()</option>
                 <option value="QuotedPrintableEncode" <?php echo selected($action_str, 'QuotedPrintableEncode'); ?>>quoted_printable_encode()</option>
                 <option value="Urlencode" <?php echo selected($action_str, 'Urlencode'); ?>>urlencode()</option>
@@ -50,8 +50,16 @@ if( 'POST' === $_SERVER['REQUEST_METHOD'] ) {
                 <option value="ParseStr" <?php echo selected($action_str, 'ParseStr'); ?>>parse_str()</option>
                 <option value="Ansi2Html" <?php echo selected($action_str, 'Ansi2HTml'); ?>>ansi-to-html</option>
             <select>
-            <input type="submit">
+            <input type="submit" class="boxed">
         </form>
+
+        <div class="math">
+            <h2>Math</h2>
+            <div>
+                <input type="text" class="math-expression boxed full-width" placeholder="2 + 2">
+                <input type="text" class="math-solution boxed full-width" style="display: none;">
+            </div>
+        </div>
     </div>
     <?php if( $action ) echo $action; ?>
 </div>
@@ -59,8 +67,8 @@ if( 'POST' === $_SERVER['REQUEST_METHOD'] ) {
 <section class="randomness">
     <h2>Randomness</h2>
     <ul>
-        <li><label for="md5">MD5</label><input id="md5" class="randomness-box" value="<?php echo md5(uniqid(mt_rand(), true)); ?>"></li>
+        <li><label for="md5">MD5</label><input id="md5" class="boxed randomness-box" value="<?php echo md5(uniqid(mt_rand(), true)); ?>"></li>
-        <li><label for="sha1">SHA1</label><input id="sha1" class="randomness-box" value="<?php echo sha1(uniqid(mt_rand(), true)); ?>"></li>
+        <li><label for="sha1">SHA1</label><input id="sha1" class="boxed randomness-box" value="<?php echo sha1(uniqid(mt_rand(), true)); ?>"></li>
     </ul>
 </section>
 
@@ -68,5 +76,9 @@ if( 'POST' === $_SERVER['REQUEST_METHOD'] ) {
     <a href="https://github.com/abackstrom/php-tools"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>
 </footer>
 
+<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
+<script src="math.min.js"></script>
+<script src="tools.js" async></script>
+
 </body>
 </html>

style.css

@@ -1,4 +1,6 @@
 * {
+    -o-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     box-sizing: border-box;
 }
@@ -34,9 +36,7 @@ label:after {
     content: ':';
 }
 
-input,
+.boxed {
-select,
-textarea {
     border: 1px solid #ccc;
     border-radius: 3px;
     padding: .5em;
@@ -143,3 +143,21 @@ footer {
     float: left;
     width: 45em;
 }
+
+.math {
+    margin: 1em 0;
+}
+
+.math-solution {
+    display: inline-block;
+    margin: 1em 0;
+    min-width: 100px;
+}
+
+.error {
+    color: red;
+}
+
+.full-width {
+    width: 100%;
+}

tools.js

@@ -0,0 +1,23 @@
+(function($) {
+
+var prev_expression,
+    $solution = $('.math-solution');
+
+$(document).on('focus', '.math-expression', function(e) {
+    $solution.slideDown();
+});
+
+$(document).on('keyup', '.math-expression', function(e) {
+    var expression = $(this).val().trim();
+
+    $solution.removeClass('error');
+
+    try {
+        $solution.val(math.eval(expression));
+    } catch (e) {
+        $solution.addClass('error');
+        $solution.val("Error: " + e.message);
+    }
+});
+
+})(jQuery);