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