79 lines
4.1 KiB
HTML
79 lines
4.1 KiB
HTML
<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>
|