Browse Source

Add a live calculator (a la Alfred)

Super unoptimized. This increases the page size quite a bit. Add
require.js in the future?
master
Annika Backstrom 4 years ago
parent
commit
da3a110037
5 changed files with 109 additions and 8 deletions
  1. +1
    -0
      TODO
  2. +17
    -5
      index.php
  3. +47
    -0
      math.min.js
  4. +21
    -3
      style.css
  5. +23
    -0
      tools.js

+ 1
- 0
TODO View File

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

+ 17
- 5
index.php View File

@@ -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>
<select name="action">
<textarea class="data boxed" name="data"><?php if( $action ) echo $action->esc_raw(); ?></textarea><br>
<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="sha1">SHA1</label><input id="sha1" class="randomness-box" value="<?php echo sha1(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="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>

+ 47
- 0
math.min.js
File diff suppressed because it is too large
View File


+ 21
- 3
style.css View File

@@ -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,
select,
textarea {
.boxed {
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%;
}

+ 23
- 0
tools.js View File

@@ -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);

Loading…
Cancel
Save