iOS Calculator with VueJS

In this example below you will see how to do a iOS Calculator with VueJS with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by beginnr, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright beginnr ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>iOS Calculator with VueJS</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div id="app">
    <section class="output">
        <h1><pre>{{current}}</pre></h1>
        <h2><pre>{{total}}<span v-if="selected"> {{selected}}</span></pre></h2>     
    </section>
    <section class="modifiers">
        <button v-on:click="current = 0, total = 0, selected = null">AC</button>
        <button v-on:click="current = -current">+/-</button>
        <button v-on:click="current = Number(current) * 0.01">%</button>
    </section>
    <section class="operators">
        <button v-for="operator in operators" v-on:click="calculate(operator)">{{operator}}</button>
        <button v-on:click="calculate()">=</button>        
    </section>
    <section class="digits">
        <button 
            v-for="digit in [...Array(10).keys()]" 
            v-on:click="current === 0 ? current = String(digit) : current += digit">
            {{digit}}
        </button>
        <button v-on:click="current.toString().indexOf('.') == -1 ? current += '.' : null">.</button>
    </section>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/beginnr/ios-calculator-with-vuejs-RMmzdq */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
}

button {
  margin: 0;
  padding: .75rem .25rem;
  border: none;
}

#app {
  display: grid;
  grid-template-areas: "output output output output" "modifiers modifiers modifiers operators" "digits digits digits operators";
  grid-template-columns: repeat(4, 25%);
}

section.output {
  background-color: #666;
  color: #fff;
  padding: 0 1rem;
  grid-area: output;
  display: flex;
  align-items: baseline;
}
section.output > * {
  margin: 0;
}
section.output h1 {
  font-size: 3rem;
  line-height: 0;
  margin-left: auto;
  order: 1;
}
section.modifiers {
  grid-area: modifiers;
  display: flex;
}
section.modifiers button {
  background-color: #ddd;
  font-size: 1.4rem;
  flex: 0 0 33.3%;
}
section.digits {
  grid-area: digits;
  display: flex;
  flex-wrap: wrap-reverse;
}
section.digits button {
  background-color: #efefef;
  font-size: 1.4rem;
  flex: 0 0 33.3%;
}
section.digits button:first-child {
  flex-basis: 66.6%;
  order: -2;
}
section.digits button:last-child {
  order: -1;
}
section.operators {
  grid-area: operators;
  display: flex;
  flex-direction: column;
}
section.operators button {
  background-color: orange;
  font-size: 1.4rem;
  color: #fff;
}


/*Downloaded from https://www.codeseek.co/beginnr/ios-calculator-with-vuejs-RMmzdq */
let vm = new Vue({
  el: '#app',
  data: {
    current: 0,
    total: 0,
    operators: ['+', '-', '*', '/'],
    selected: null,
  },
  computed: {
    answer: function() {
      return eval(this.total + this.selected + Number(this.current));
    }
  },
  methods: {
    updateTotal: function() {
      this.total = this.answer;
    },
    calculate: function(symbol = null) {
      this.updateTotal();
      this.selected = symbol;
      this.current = 0;
    }
  }
})

Comments