Hooked up roman computed property to stubbed function
This commit is contained in:
parent
e31b1ba904
commit
d1bc9711dd
3 changed files with 24 additions and 2 deletions
|
@ -1,6 +1,8 @@
|
||||||
# roman-numeral-calculator
|
# Roman Numeral Calculator
|
||||||
Whole number calculator that also displays the results in Roman Numerals.
|
Whole number calculator that also displays the results in Roman Numerals.
|
||||||
|
|
||||||
|
Utilizes Vue and Bootstrap Material Design.
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Getting Started
|
## Getting Started
|
||||||
|
|
20
app.js
20
app.js
|
@ -1,4 +1,7 @@
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Vue Application Code
|
||||||
|
*/
|
||||||
var App = new Vue({
|
var App = new Vue({
|
||||||
el: '#calculator', // Context for 'data' usage
|
el: '#calculator', // Context for 'data' usage
|
||||||
data: {
|
data: {
|
||||||
|
@ -6,6 +9,11 @@ var App = new Vue({
|
||||||
previousResult: NaN,
|
previousResult: NaN,
|
||||||
calculation: '' // String that'll hold our calculation, such as '6+4/2*2'
|
calculation: '' // String that'll hold our calculation, such as '6+4/2*2'
|
||||||
},
|
},
|
||||||
|
computed: {
|
||||||
|
resultRoman: function() {
|
||||||
|
return this.previousResult ? intToRoman(this.previousResult) : '';
|
||||||
|
}
|
||||||
|
},
|
||||||
methods: {
|
methods: {
|
||||||
// Resets all of our values
|
// Resets all of our values
|
||||||
clear: function() {
|
clear: function() {
|
||||||
|
@ -43,6 +51,18 @@ var App = new Vue({
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Converts Integer to Roman Numerals
|
||||||
|
* @param {[number]} n [whole number to be converted]
|
||||||
|
* @return {[string]} [roman numeral conversion of provided whole number]
|
||||||
|
*/
|
||||||
|
function intToRoman(n) {
|
||||||
|
return n + 'TODO';
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Page Load Initializers and Bindings
|
||||||
|
*/
|
||||||
$(document).ready(function() {
|
$(document).ready(function() {
|
||||||
// This command is used to initialize some elements and make them work properly
|
// This command is used to initialize some elements and make them work properly
|
||||||
$.material.init();
|
$.material.init();
|
||||||
|
|
|
@ -34,7 +34,7 @@
|
||||||
<small class="pull-left text-muted">Roman Numerals</small>
|
<small class="pull-left text-muted">Roman Numerals</small>
|
||||||
<br />
|
<br />
|
||||||
<h1 class="pull-right">{{ result }}</h1>
|
<h1 class="pull-right">{{ result }}</h1>
|
||||||
<h1 class="pull-left text-muted">IV</h1>
|
<h1 class="pull-left text-muted">{{ resultRoman }}</h1>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Table -->
|
<!-- Table -->
|
||||||
|
|
Loading…
Add table
Reference in a new issue