Working calculator with basic functions
This commit is contained in:
Joe L. Wroten
commit
2f38fdb634
6 changed files with 255 additions and 0 deletions
87
.gitignore
vendored
Normal file
87
.gitignore
vendored
Normal file
|
|
@ -0,0 +1,87 @@
|
||||||
|
# Created by https://www.gitignore.io/api/windows,osx,node,bower
|
||||||
|
|
||||||
|
### Windows ###
|
||||||
|
# Windows image file caches
|
||||||
|
Thumbs.db
|
||||||
|
ehthumbs.db
|
||||||
|
|
||||||
|
# Folder config file
|
||||||
|
Desktop.ini
|
||||||
|
|
||||||
|
# Recycle Bin used on file shares
|
||||||
|
$RECYCLE.BIN/
|
||||||
|
|
||||||
|
# Windows Installer files
|
||||||
|
*.cab
|
||||||
|
*.msi
|
||||||
|
*.msm
|
||||||
|
*.msp
|
||||||
|
|
||||||
|
# Windows shortcuts
|
||||||
|
*.lnk
|
||||||
|
|
||||||
|
|
||||||
|
### OSX ###
|
||||||
|
.DS_Store
|
||||||
|
.AppleDouble
|
||||||
|
.LSOverride
|
||||||
|
|
||||||
|
# Icon must end with two \r
|
||||||
|
Icon
|
||||||
|
|
||||||
|
|
||||||
|
# Thumbnails
|
||||||
|
._*
|
||||||
|
|
||||||
|
# Files that might appear in the root of a volume
|
||||||
|
.DocumentRevisions-V100
|
||||||
|
.fseventsd
|
||||||
|
.Spotlight-V100
|
||||||
|
.TemporaryItems
|
||||||
|
.Trashes
|
||||||
|
.VolumeIcon.icns
|
||||||
|
|
||||||
|
# Directories potentially created on remote AFP share
|
||||||
|
.AppleDB
|
||||||
|
.AppleDesktop
|
||||||
|
Network Trash Folder
|
||||||
|
Temporary Items
|
||||||
|
.apdisk
|
||||||
|
|
||||||
|
|
||||||
|
### Node ###
|
||||||
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
|
||||||
|
# Runtime data
|
||||||
|
pids
|
||||||
|
*.pid
|
||||||
|
*.seed
|
||||||
|
|
||||||
|
# Directory for instrumented libs generated by jscoverage/JSCover
|
||||||
|
lib-cov
|
||||||
|
|
||||||
|
# Coverage directory used by tools like istanbul
|
||||||
|
coverage
|
||||||
|
|
||||||
|
# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
|
||||||
|
.grunt
|
||||||
|
|
||||||
|
# node-waf configuration
|
||||||
|
.lock-wscript
|
||||||
|
|
||||||
|
# Compiled binary addons (http://nodejs.org/api/addons.html)
|
||||||
|
build/Release
|
||||||
|
|
||||||
|
# Dependency directory
|
||||||
|
# https://docs.npmjs.com/misc/faq#should-i-check-my-node-modules-folder-into-git
|
||||||
|
node_modules
|
||||||
|
|
||||||
|
|
||||||
|
### Bower ###
|
||||||
|
bower_components
|
||||||
|
.bower-cache
|
||||||
|
.bower-registry
|
||||||
|
.bower-tmp
|
||||||
12
app.css
Normal file
12
app.css
Normal file
|
|
@ -0,0 +1,12 @@
|
||||||
|
|
||||||
|
.btn-raised { line-height: 100%; }
|
||||||
|
|
||||||
|
#calculator .btn-raised { margin-right: -5rem; }
|
||||||
|
|
||||||
|
#calculator .btn-warning { margin-top: 4rem; }
|
||||||
|
|
||||||
|
#calculator .btn-danger { margin-top: -1rem; }
|
||||||
|
|
||||||
|
#calculator table button {
|
||||||
|
font-size: 1.5em;
|
||||||
|
}
|
||||||
42
app.js
Normal file
42
app.js
Normal file
|
|
@ -0,0 +1,42 @@
|
||||||
|
$(document).ready(function() {
|
||||||
|
// This command is used to initialize some elements and make them work properly
|
||||||
|
$.material.init();
|
||||||
|
});
|
||||||
|
|
||||||
|
new Vue({
|
||||||
|
el: '#calculator',
|
||||||
|
data: {
|
||||||
|
result: 0,
|
||||||
|
previousResult: NaN,
|
||||||
|
calculation: ''
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
clear: function() {
|
||||||
|
this.result = 0;
|
||||||
|
this.previousResult = NaN;
|
||||||
|
this.calculation = '';
|
||||||
|
},
|
||||||
|
calcAdd: function(thing) {
|
||||||
|
this.calculation += thing;
|
||||||
|
this.result = this.calculation;
|
||||||
|
},
|
||||||
|
calcRemove: function() {
|
||||||
|
if (typeof this.calculation === 'string' && this.calculation.length) {
|
||||||
|
this.calculation = this.calculation.slice(0, -1);
|
||||||
|
this.result = this.calculation;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
equals: function() {
|
||||||
|
// Strip out any non-numeric character or simple math expressions
|
||||||
|
var calcSafe = this.calculation.replace(/[^0-9\+\-\*\/]/g, '');
|
||||||
|
if (isNaN(calcSafe.charAt(0))) calcSafe = this.previousResult + calcSafe;
|
||||||
|
try {
|
||||||
|
this.result = Math.round(eval(calcSafe)); // Eval is safe here because of the above regex
|
||||||
|
this.previousResult = this.result;
|
||||||
|
this.calculation = '';
|
||||||
|
} catch (e) {
|
||||||
|
console.warn('Invalid Calculation');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
24
bower.json
Normal file
24
bower.json
Normal file
|
|
@ -0,0 +1,24 @@
|
||||||
|
{
|
||||||
|
"name": "roman-numeral-calculator",
|
||||||
|
"description": "Sample Project for Q2E Interview",
|
||||||
|
"main": "index.html",
|
||||||
|
"authors": [
|
||||||
|
"Joe L. Wroten"
|
||||||
|
],
|
||||||
|
"license": "ISC",
|
||||||
|
"moduleType": [],
|
||||||
|
"homepage": "",
|
||||||
|
"private": true,
|
||||||
|
"ignore": [
|
||||||
|
"**/.*",
|
||||||
|
"node_modules",
|
||||||
|
"bower_components",
|
||||||
|
"test",
|
||||||
|
"tests"
|
||||||
|
],
|
||||||
|
"dependencies": {
|
||||||
|
"vue": "~1.0.4",
|
||||||
|
"bootstrap": "~3.3.5",
|
||||||
|
"bootstrap-material-design": "~0.3.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
79
index.html
Normal file
79
index.html
Normal file
|
|
@ -0,0 +1,79 @@
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||||
|
<!-- Include roboto.css to use the Roboto web font, material.css to include the theme and ripples.css to style the ripple effect -->
|
||||||
|
<link href="bower_components/bootstrap-material-design/dist/css/roboto.min.css" rel="stylesheet">
|
||||||
|
<link href="bower_components/bootstrap-material-design/dist/css/material.min.css" rel="stylesheet">
|
||||||
|
<link href="bower_components/bootstrap-material-design/dist/css/ripples.min.css" rel="stylesheet">
|
||||||
|
<link href="app.css" rel="stylesheet">
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body class="container">
|
||||||
|
<div class="row">
|
||||||
|
<header class="page-header col-md-12">
|
||||||
|
<h1>Example page header
|
||||||
|
<small>Subtext for header</small>
|
||||||
|
</h1>
|
||||||
|
<h6 class="text-muted">Stuff</h6>
|
||||||
|
</header>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div id="calculator" class="panel panel-default col-md-4 col-md-offset-4">
|
||||||
|
<!-- Default panel contents -->
|
||||||
|
<!--<div class="panel-heading">Panel heading</div>-->
|
||||||
|
<div class="panel-body">
|
||||||
|
<button v-on:click="clear()" class="btn btn-fab btn-fab-mini btn-raised btn-sm btn-danger pull-right">
|
||||||
|
C
|
||||||
|
<div class="ripple-wrapper"></div>
|
||||||
|
</button>
|
||||||
|
<button v-on:click="calcRemove()" class="btn btn-fab btn-fab-mini btn-raised btn-sm btn-warning pull-right">
|
||||||
|
⇐
|
||||||
|
<div class="ripple-wrapper"></div>
|
||||||
|
</button>
|
||||||
|
<small class="pull-right text-muted">Whole Numbers</small>
|
||||||
|
<small class="pull-left text-muted">Roman Numerals</small>
|
||||||
|
<br />
|
||||||
|
<h1 class="pull-right">{{ result }}</h1>
|
||||||
|
<h1 class="pull-left text-muted">IV</h1>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Table -->
|
||||||
|
<table class="table">
|
||||||
|
<tr>
|
||||||
|
<td><button class="btn btn-default btn-block" v-on:click="calcAdd(7)">7</button>
|
||||||
|
<td><button class="btn btn-default btn-block" v-on:click="calcAdd(8)">8</button>
|
||||||
|
<td><button class="btn btn-default btn-block" v-on:click="calcAdd(9)">9</button>
|
||||||
|
<td><button class="btn btn-info btn-block" v-on:click="calcAdd('/')">÷</button>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><button class="btn btn-default btn-block" v-on:click="calcAdd(4)">4</button>
|
||||||
|
<td><button class="btn btn-default btn-block" v-on:click="calcAdd(5)">5</button>
|
||||||
|
<td><button class="btn btn-default btn-block" v-on:click="calcAdd(6)">6</button>
|
||||||
|
<td><button class="btn btn-info btn-block" v-on:click="calcAdd('*')">×</button>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><button class="btn btn-default btn-block" v-on:click="calcAdd(1)">1</button>
|
||||||
|
<td><button class="btn btn-default btn-block" v-on:click="calcAdd(2)">2</button>
|
||||||
|
<td><button class="btn btn-default btn-block" v-on:click="calcAdd(3)">3</button>
|
||||||
|
<td><button class="btn btn-info btn-block" v-on:click="calcAdd('-')">-</button>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<td><button class="btn btn-default btn-block" v-on:click="calcAdd(0)">0</button>
|
||||||
|
<td><button class="btn btn-primary btn-block" v-on:click="equals()">=</button>
|
||||||
|
<td><button class="btn btn-info btn-block" v-on:click="calcAdd('+')">+</button>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="bower_components/vue/dist/vue.min.js"></script>
|
||||||
|
<script src="bower_components/jquery/dist/jquery.min.js"></script>
|
||||||
|
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
|
||||||
|
|
||||||
|
<script src="bower_components/bootstrap-material-design/dist/js/ripples.min.js"></script>
|
||||||
|
<script src="bower_components/bootstrap-material-design/dist/js/material.min.js"></script>
|
||||||
|
<script src="app.js"></script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
11
package.json
Normal file
11
package.json
Normal file
|
|
@ -0,0 +1,11 @@
|
||||||
|
{
|
||||||
|
"name": "roman-numeral-calculator",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"description": "Sample Project for Q2E Interview",
|
||||||
|
"main": "index.html",
|
||||||
|
"scripts": {
|
||||||
|
"test": "echo \"Error: no test specified\" && exit 1"
|
||||||
|
},
|
||||||
|
"author": "Joe L. Wroten",
|
||||||
|
"license": "ISC"
|
||||||
|
}
|
||||||
Loading…
Add table
Reference in a new issue