Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
283 lines (264 sloc) 16.1 KB
<html lang="en">
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-85053368-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-85053368-1');
</script>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Calculator Gator | A math tool by Pius Wong | Calculator Gator is a simple web calculator that helps you visualize integers, fractions, addition, subtraction, multiplication, division, and squaring.">
<meta name="author" content="Pius Wong | www.piuswong.com">
<meta property="og:site_name" content="Calculator Gator | A math tool by Pius Wong"/>
<meta property="og:title" content="Calculator Gator | A math tool by Pius Wong" />
<meta property="og:url" content="http://www.piuswong.com/calculatorgator/" />
<meta property="og:type" content="website" />
<meta property="og:description" content="A web calculator to help you visualize integers, fractions, addition, subtraction, multiplication, division, and squaring." />
<meta property="og:image" content="http://www.piuswong.com/calculatorgator/img/teaser.png" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="Calculator Gator" />
<meta name="twitter:creator" content="@PiusWong">
<meta name="twitter:title" content="Calculator Gator | A math tool by Pius Wong" />
<meta name="twitter:description" content="A web calculator to help you visualize integers, fractions, addition, subtraction, multiplication, division, and squaring." />
<meta name="twitter:image" content="http://www.piuswong.com/calculatorgator/img/teaser.png" />
<!-- icons -->
<link href="font-awesome.min.css" rel="stylesheet" type="text/css">
<link rel="icon" type="image/png" href="favicon.ico"/>
<link href="https://fonts.googleapis.com/css?family=Exo+2|Oxygen|Abel|Patrick+Hand+SC" rel="stylesheet">
<link href="main.css" rel="stylesheet">
</head>
<body>
<header>
<h1>The Calculator Gator</h1>
<h2>A math toy by <a href="http://www.piuswong.com" title="Link to Pius's projects">Pius Wong</a></h2>
<div id="mainChar">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 2625.022 1342.022" enable-background="new 0 0 2625.022 1342.022" xml:space="preserve">
<rect width="100%" height="100%" fill="none" />
<path d="M2562.057,112.664c-5.93,12.226,13.089,27.649,13.408,51.328c-0.967,3.791-2.837,7.289-3.816,11.093
c-2.417-0.267-4.923,0.089-7.226-0.636c-33.512-20.05-36.245-21.483-53.631-18.038c-24.88,1.775-51.012,38.147-54.547,40.579
c-1,0.685-40.963,39.485-54.967,62.993c-1.056,0.331-2.086,0.661-3.078,1.005c-1.45,2.188-3.295,5.317-6.386,4.363
c-6.755-1.794-12.047-7.022-18.687-9.083c-14.172-2.325-33.569,14.577-40.185,28.126c-2.76,5.432-2.862,11.614-4.401,17.415
c-2.078,5.918,3.558,9.203-2.964,18.611c-15.758-8.651-16.89-19.671-43.645-27.108c-9.541-1.323-21.002,0.025-27.146,8.345
c-2.9,3.956-7.454,6.64-8.994,11.487c-1.705,4.223-5.788,6.857-7.569,10.978c-3.219,10.775-9.274,20.417-14.705,30.186
c-7.484,15.043-21.458,7.113-29.639,3.893c-3.549-1.501-7.378-2.404-10.482-4.745c-3.613,1.31-7.378,2.124-11.131,2.799
c-2.9,5.19-7.62,9.362-9.184,15.252c-1.972,7.442-5.139,14.807-4.771,22.656c1.426,62.435,37.744,50.23,84.657,50.985
c18.427-0.238,76.659-6.917,77.661-7.06c10.315-1.512,51.103-1.387,52.104-1.425c64.718-1.507,119.253,12.017,139.725-10.991
c5.622-6.144,8.955-13.878,13.598-20.735c4.617-7.073,5.915-16.893,13.662-21.562c2.519-0.687,5.19-0.305,7.81-0.242
c2.481,5.406,7.582,8.854,10.609,13.891c4.503,7.467,12.047,12.632,19.921,16.041c3.269,1.794,6.144,4.389,9.999,4.936
c0.166,0.852,0.369,1.705,0.598,2.57c1.259,0.611,2.519,1.208,3.854,1.819c-1.196,4.325-2.073,8.854-4.681,12.606
c-14.981,20.134-15.737,16.079-26.561,24.297c-16.513,12.73-90.704,42.38-97.937,44.421c-4.63,1.259-8.078,4.719-12.199,6.907
c-47.689,26.034-44.914,36.755-61.276,51.99c-3.969,4.096-6.856,9.273-11.754,12.403c-6.886,4.248-16.845,16.908-56.76,32.26
c-10.994,6.222-73.381,28.559-87.544,28.177c-12.182,5.289-66.295,10.873-113.113,0.394c-34.047-5.52-64.247-12.539-95.05,3.905
c-61.045,26.219-81.054,75.205-133.67,73.195c-13.739,0.903-27.159-2.684-40.745-3.943c-32.756,3.396-26.951,6.432-54.687,18.547
c-86.536,53.421-132.198,41.426-208.888,25.607c-4.859-0.636-10.304-1.616-14.68,1.259c-3.511,4.999-0.687,11.232-0.509,16.804
c2.76,8.879,4.605,18.076,5.037,27.388c0.678,70.703,18.876,64.615,31.064,85.038c-10.38,1.31-20.137-3.346-30.008-5.724
c-35.054-8.942-31.959,10.974-46.367,7.887c-4.376-3.651-5.076-10.864-10.94-12.886c-10.482-3.893-20.875,4.033-31.37,1.285
c-0.165,0.725-0.483,2.163-0.649,2.875c-4.834,0.432-9.592-0.331-14.311-1.196c-0.153-2.201-0.407-4.401-0.751-6.551
c0.7,0.127,2.112,0.382,2.824,0.509c-5.368-1.387-2.926-7.48-2.862-11.411c-2.581-10.171-21.93-15.743-28.266-20.735
c-7.896-13.101,27.192-23.356,20.29-47.143c-4.808-6.385-29.888-22.164-37.17-31.395c-4.783-5.063-12.047-5.813-18.013-8.815
c-1.972-0.827-3.791-2.315-6.017-2.239c-5.597,0.191-10.965-1.781-16.537-1.908c-6.208-0.878-12.441,0.318-18.661-0.076
c-6.376,1.51-49.471,13.993-49.471,13.993c-5.775,1.781-11.97,1.603-17.631,3.791c-41.153,15.671-180.401-14.399-211.051-28.838
c-22.477-5.819-41.27-14.396-65.945-12.772c-23.033-0.496-39.521,9.215-41.101,11.08c-14.156,14.382-42.805,43.009-41.597,55.297
c9.881,2.049,27.067,4.244,60.297-6.755c-3.6-2.633-10.164-4.859-7.683-10.52c30.91-20.96,69.478-34.528,101.385-14.896
c12.454,7.683,26.879,13.128,36.241,24.907c6.449,9.897,11.461,21.384,11.08,33.43c5.483,5.19,14.184,9.464,14.96,17.771
c0.954,1.132,1.883,2.239,2.9,3.371c-0.56,0.344-1.679,1.03-2.251,1.361c0.674,1.081,1.336,2.15,2.022,3.244
c-1.157,2.112-2.252,4.643-4.923,5.037c-15.167,7.923-30.412-12.885-60.589-4.414c4.515,3.914,17.957,10.035,28.495,28.596
c-0.623,1.285-1.221,2.582-1.781,3.893c-14.581-0.066-25.26-25.439-62.103-16.83c-8.065,1.081-16.27-0.28-24.119-2.048
c-5.689,4.616-157.704,51.097-252.241-47.919c-25.462-44.516-2.105-56.742,1.616-85.776c-2.646-0.598-6.259-0.445-7.429-3.447
c-4.834-0.216-9.63,0.547-14.311,1.666c-5.343,1.336-10.927,0.254-16.283,1.527c-104.921,26.598-73.475-21.586-213.976-4.058
c-3.638,0.483-7.327-0.471-10.927,0.267c-2.722,1.043-5.203,2.786-8.129,3.244c-1.005,0.139-35.568,5.632-46.749,8.332
c-23.248,8.245-49.669,8.494-57.027,31.013c-2.544,7.127,2.495,25.23,2.659,26.23c0.509,2.748,2.964,4.529,4.274,6.907
c5.125,7.002,1.576,10.814,17.186,22.287c13.483,9.569,27.903,36.42,44.764,41.877c13.652,2.389,22.508-11.842,32.107-9.146
c7.022,1.107,11.334,7.276,17.415,10.317c5.356,3.193,12.365,2.633,17.033,7.162c11.029,10.189,14.018,26.078,24.284,36.878
c8.765,5.47,19.972-0.979,28.965,4.071c11.309,9.233,25.045,31.634,35.809,35.287c4.836,2.294,4.589-0.02,27.477,1.832
c2.226,4.796,7.327,7.085,10.253,11.347c2.611,3.387,8.633,20.294,16.715,26.574c16.075,9.185,15.426,0.491,38.875,1.488
c26.056,6.667,32.977,21.713,46.774,19.997c8.688-1.942,19.833-10.206,33.646-9.68c20.419,4.043,37.013,21.857,50.896,27.986
c36.199,10.4,58.502,37.92,82.062,52.817c43.011,33.213,34.403,6.396,79.034,45.566c18.208,15.125,26.246,17.04,45.986,17.936
c30.318-0.751,37.93,16.193,65.525,30.81c4.134,3.155,9.541,1.844,14.196,3.498c4.147,1.463,8.51,0.394,12.772,0.369
c18.974,1.87,55.059,25.539,58.465,29.232c7.353,2.353,14.667,4.91,22.02,7.276c31.527-8.837,46.862,23.524,72.916,37.323
c9.817,6.052,31.604-7.299,40.338-8.179c17.829,2.357,3.781-4.531,33.392,11.016c5.241,3.066,11.589,3.218,17.504,3.028
c6.869-1.921,13.204-5.852,20.48-6.348c21.245-1.942,41.314,23.767,57.816,30.975c12.756,7.578,60.29,2.089,106.638,28.189
c2.366,1.298,3.155,4.007,4.3,6.284c-10.435,1.423-8.676,5.392-56.964,0.7c-16.115,0.199-61.486-5.252-82.52-5.953
c-2.824-0.572-4.91-3.04-7.772-3.397c-15.269,4.072-27.792-2.198-48.492-2.671c-5.546-0.102-10.825-2.201-16.359-2.162
c-2.762-0.015-21.848-1.008-32.323-6.004c-4.758-1.972-9.668,1.654-14.476,0.293c-7.747-2.315-16.003-1.781-23.737-4.121
c-9.541-3.104-20.277-1.692-29.41-5.865c-12.12-0.691-23.98-4.714-66.899-12.25c-6.984-3.625-14.985-3.091-22.516-4.49
c-7.416-1.145-14.324-4.643-21.892-4.821c-3.727-0.204-7.632-0.649-10.698-2.939c-3.206-2.951-7.645-0.127-11.334-1.539
c-7.531-2.798-15.774-2.646-23.203-5.712c-3.282-1.298-6.844-1.17-10.278-1.081c-0.394-0.763-1.183-2.264-1.577-3.015
c-1.285,0.636-2.608,1.119-3.982,1.45c-12.263-1.87-24.131-5.674-36.394-7.467c-3.46-0.903-7.404-1.005-10.113-3.6
c-3.831,2.97-12.398-1.54-43.747-6.411c-46.335-12.483-357.594-52.295-357.594-52.295c-11.716-0.14-23.317-2.023-34.982-3.015
c-2.442-0.127-4.211-1.844-6.068-3.18c-3.753-1.387-7.467,1.336-11.271,0.789c-2.02-0.195-26.027-2.946-28.838-4.923
c-4.592-3.587-10.278,0.216-15.367-0.738c-2.203-0.387-74.203-9.818-84.135-13.242c-8.243-2.989-17.224-2.379-25.658-4.529
c-7.162-1.895-14.209-4.274-21.574-5.254c-6.92-0.878-13.001-4.923-20.035-5.266c-8.319-0.878-15.443-5.826-23.648-7.073
c-8.256-2.252-16.448-5.037-23.775-9.49c-23.552-3.584-149.518-72.739-170.649-94.63c-16.013-5.37-81.914-62.745-82.914-63.439
c-21.039-15.096-34.147-33.758-38.964-38.595c-21.778-27.726-18.854-34.892-26.396-46.215c0.916-1.018,1.832-2.01,2.748-3.015
c-1.145,0.038-2.29,0.076-3.435,0.14c-3.651-8.676-3.18-18.28-6.042-27.172c-2.062-7.913-2.975-1.701-2.175-19.526
c0.634-7.664-7.675-30.697-3.931-43.518c1.348-4.16-0.814-8.281-0.751-12.454c0.068-28.882-2.418-11.02,0.394-30.657
c-3.041-22.85-1.09-20.042,0.305-22.719c-4.294-7.378-0.844-32.606-0.89-44.586c-0.025-6.246,3.714-11.741,3.867-17.962
c0-16.859,22.775-79.378,23.076-82.113c1.056-4.198,1.043-9.032,3.778-12.568c4.338-3.74,7.874-8.485,13.052-11.169
c4.745-2.913,11.411-4.172,13.471-10.088c0.043-16.362-3.503-32.575,15.532-42.157c25.219-13.344,23.115-7.424,38.34-20.379
c6.931-5.754,0.059-15.764,26.434-30.772c5.915-3.129,10.622-8.281,17.046-10.507c11.015-3.661,10.497-31.892,20.099-37.437
c8.612-5.33,17.796-10.113,27.795-12.148c71.433-23.584,56.818-29.805,100.939-37.31c48.019-7.907,49.805-36.895,88.244-31.777
c19.858,4.163,35.994,4.605,54.61-5.953c27.665-16.35,60.97-9.859,83.919-12.212c22.172,0.42,41.279-15.29,63.693-13.191
c46.138,6.272,54.878,7.691,80.993,0.738c67.442-24.31,65.094-7.128,100.634-9.706c20.946-3.875,27.233-17.596,58.388-4.91
c5.368,2.188,11.283,2.595,16.575,5.025c11.553,5.818,45.215-22.204,69.43-13.535c8.676,1.717,17.262,4.401,26.205,4.401
c4.49-0.216,9.083,2.252,13.446,0.293c37.015-16.156,72.304,20.872,125.096,26.815c80.305,9.923,81.3,7.845,110.289,1.603
c36.266-9.336,54.189,0.413,92.111,10.902c5.775,1.717,12.11,1.984,17.237,5.47c10.075,0.458,19.844,3.638,29.983,3.396
c16.588,2.163,33.506,1.819,49.853,5.686c21.982,3.418,52.115,30.498,114.347,43.441c4.681,0.572,9.999,0.28,13.586,3.956
c5.864-1.844,12.047-0.267,18.038-0.025c59.148,7.176,174.934-11.359,199.106-13.471c9.82-3.218,19.819-5.966,29.576-9.452
c1.488-0.674,3.155-0.356,4.758-0.229c-0.115-0.522-0.356-1.577-0.483-2.099c45.944-18.548,50.589-40.213,103.827-45.057
c35.891-5.17,40.645-23.282,61.836-35.809c5.712-3.969,9.897-9.808,16.028-13.281c8.408-4.872,14.82-12.555,23.559-16.931
c25.605-7.944,38.867,4.305,53.847-16.257c19.089-26.933,29.276-20.168,53.605-21.256c38.819,1.522,63.061-8.345,81.948-9.935
c11.484-4.495,77.877-20.69,87.061-24.742c45.297-14.857,67.746-37.884,97.505-48.848c42.187-19.404,67.008-14.225,88.74-53.694
C2506.582-10.604,2589.134,52.018,2562.057,112.664z"/>
</svg>
<div id="help">
<div></div><div id="helpText">Feed me numbers!</div>
</div>
</div>
</header>
<aside title="Try using the keyboard to control the calculator.">
<h4>Keyboard Shortcuts</h4>
<table>
<tr>
<td>clear/reset:</td><td>Esc</td>
</tr>
<tr>
<td>digits:</td><td>0-9</td>
</tr>
<tr>
<td>decimal point:</td><td>.</td>
</tr>
<tr>
<td>add:</td><td>+</td>
</tr>
<tr>
<td>subtract:</td><td>-</td>
</tr>
<tr>
<td>multiply:</td><td>*</td>
</tr>
<tr>
<td>divide:</td><td>/</td>
</tr>
<tr>
<td>square:</td><td>^</td>
</tr>
<tr>
<td>change sign:</td><td>~</td>
</tr>
<tr>
<td>equals:</td><td>=</td>
</tr>
</table>
</aside>
<main>
<section id="calculator">
<div class="container">
<div id="display">
<div id="history">
</div>
<div id="result">
0
</div>
</div>
<div id="buttons">
<div class="row">
<button id="clear">
AC / Reset
</button>
<button id="squared">
x&sup2;
</button>
<button id="divide" class="operator" value="divide">
&divide;
</button>
</div>
<div class="row">
<button id="seven" class="digit" value="7">
7
</button>
<button id="eight" class="digit" value="8">
8
</button>
<button id="nine" class="digit" value="9">
9
</button>
<button id="multiply" class="operator" value="multiply">
&times;
</button>
</div>
<div class="row">
<button id="four" class="digit" value="4">
4
</button>
<button id="five" class="digit" value="5">
5
</button>
<button id="six" class="digit" value="6">
6
</button>
<button id="subtract" class="operator" value="subtract">
&minus;
</button>
</div>
<div class="row">
<button id="one" class="digit" value="1">
1
</button>
<button id="two" class="digit" value="2">
2
</button>
<button id="three" class="digit" value="3">
3
</button>
<button id="add" class="operator" value="add">
+
</button>
</div>
<div class="row">
<button id="zero" class="digit" value="0">
0
</button>
<button id="decimal">
.
</button>
<button id="sign">
&plusmn;
</button>
<button id="equals">
=
</button>
</div>
</div>
</div>
</section>
<section id="visualization">
<div id="visHistory">
<div class="collection">
</div>
</div>
<div id="visResult">
<div class="collection">
</div>
</div>
</section>
</main>
<footer>
<div>
Powered by <a href="http://www.pioslabs.com" title="Visit the website of the Pios Labs studio.">Pios Labs</a>
</div>
<div>
Copyright 2017 <a href="http://www.piuswong.com" title="Browse some of Pius's projects.">Pius Wong</a>
</div>
</footer>
<!-- jQuery & WS for UX/graphics -->
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<!-- JS -->
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>