Calculator

Powered by JSFiddle and Vue.js

by Anov Siradj

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<div id='penghitung'>
  <input type=number v-model=angka1 required>
  <select v-model=tanda>
    <option>+</option>
    <option>-</option>
    <option value=*>&times;</option>
    <option>/</option>
  </select>
  <input type=number v-model=angka2 required>
  <b>=</b>
  <span v-text="hasil"></span>
<div id="bulat" v-bind:style="ukuran"></div>
</div>

CSS

/* revisions 11x */

#bulat {
  border-radius: 50%;
  background-color:#669900;
  /* margin: 0px auto; */
  margin-top:10px;
}

JavaScript

new Vue({
	el: '#penghitung',
  data: {
  	angka1: 60,
    angka2: 6,
    tanda: '/' // default
  },
  computed: {
  	hasil: function() {
    	return eval(this.angka1 + this.tanda + this.angka2);
    },
    ukuran: function() {
    	return {
      	width: this.hasil + 'px',
        height:this.hasil + 'px'
      }
    }
  }
});