vuejs Simple calculator web Application

vuejs Simple calculator web Application

In this Post We Will Explain About is vuejs Simple calculator web Applicationvuejs Simple calculator web Application With Example and Demo.Welcome on Pakainfo.com – Examples, The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to Vuejs calculator web application example Example

In this post we will show you Best way to implement Simple calculator implemented with Vuejs, hear for How to create a simple calculator using Vuejs with Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.

A simple calculator in Vuejs

In this Example,First of all Add or Include External Libs Like as a(j Query, css etc..), and then create a simple index.php or index.html page.After that crate a simple java script file like as a index.js or main.js, It is also add your web-application First Header Part to some priority set.After that Include your relevant CSS Class.

Include External Libs

https://unpkg.com/vue

index.html

  <header>
    <h1>Create calculator with VueJs</h1>
  </header>

  <section id='liveApp' class="Live-Calc-container">
    <div class='live-preview-calc'>
      <p v-if='preview'>{{ preview }}</p>
      <p v-else>0</p>
    </div>
    <div class='calculator-keyboard'>
      <div class='calculator-numbers'>
        <button class="lbtan live-lbtanno current" @click='CalcUpdate' value=7>7</button>
        <button class="lbtan live-lbtanno current" @click='CalcUpdate' value=8>8</button>
        <button class="lbtan live-lbtanno current" @click='CalcUpdate' value=9>9</button>
        <button class="lbtan live-lbtanno current" @click='CalcUpdate' value=4>4</button>
        <button class="lbtan live-lbtanno current" @click='CalcUpdate' value=5>5</button>
        <button class="lbtan live-lbtanno current" @click='CalcUpdate' value=6>6</button>
        <button class="lbtan live-lbtanno current" @click='CalcUpdate' value=1>1</button>
        <button class="lbtan live-lbtanno current" @click='CalcUpdate' value=2>2</button>
        <button class="lbtan live-lbtanno current" @click='CalcUpdate' value=3>3</button>
        <button class="lbtan live-lbtanno current" @click='calcOpt' value=0>0</button>
        <button class="lbtan live-lbtanno current" @click='CalcUpdate' value='.'>.</button>
        <button class="lbtan live-lbtanno current" @click='compute'>=</button>
      </div>
      <div class='calculator-calcOpts'>
        <button class="lbtan clear current" @click='ac'>AC</button>
        <button class="lbtan clear current" @click='ce'>CE</button>
        <button class="lbtan current" @click='calcOpt' value='/'>/</button>
        <button class="lbtan current" @click='calcOpt' value='*'>X</button>
        <button class="lbtan current" @click='calcOpt' value='-'>-</button>
        <button class="lbtan current" @click='calcOpt' value='+'>+</button>
      </div>
    </div>

  </section>
  <footer>
    <a href="https://www.Pakainfo.com" target="_blank">Pakainfo.com.</a>
  </footer>

index.js

  new Vue({
    el: '#liveApp',
    data() {
      return {
        preview: '',
        computed: false,
        digitLimitReached: false
      };
    },
    methods: {
      CalcUpdate: function(e) {
        return this.preview.length > 16
          ? (this.preview = 'Ops! Digit Limit Met!')
          : (this.preview += e.target.value);
      },
      calcOpt: function(e) {
        this.preview = this.preview + e.target.value;
      },
      resetAll: function() {
        this.preview = '';
        this.computed = false;
      },
      ac: function() {
        this.resetAll();
      },
      ce: function() {
        return this.computed
          ? this.resetAll()
          : (this.preview = this.preview
              .split(/\D/)
              .filter(el => el !== this.preview.split(/\D/).slice(-1)[0])[0]);
      },
      compute: function() {
        this.computed = true;
        this.preview = Math.round(eval(this.preview) * 100) / 100;
      }
    }
  });

style.css

@import url('https://fonts.googleapis.com/css?family=Raleway');

body {
  font-family: 'Raleway', serif;
  background: orange;
  color: #3d3d3d;
}

.Live-Calc-container {
  width: 99%;
  margin: 0 auto;
  background: gray;
  overflow: auto;
  border-radius: 10px;
  box-shadow: 1px 1px 1px 5px #3c3939;
}

@media screen and (min-width: 800px) {
.Live-Calc-container {
    width: 20%;
  }
}

.lbtan {
  font-family: 'Raleway', serif;
  font-size: 40px;
  border: none;
  outline: none;
  background: #333;
  color: #fff;
  width: 60px;
  height: 50px;
  margin: 5px;
  border-radius: 5px;
  padding: 0;
  border-bottom: 3px solid white;
  box-shadow: 2px 3px 7px #3d3d3d;
}

h1 {
  font-size: 30px;
  text-align: center;
}
.current:current {
  position: relative;
  top: 3px;
}

.live-lbtanno {
  width: 70px;
  height: 60px;
}

.clear {
  background: red;
}

.live-preview-calc {
  text-align: center;
  width: 90%;
  background: #333;
  color: #fff;
  font-size: 40px;
  margin: 15px auto 10px auto;
  padding: 1px;
  border-radius: 8px;
  box-shadow: 2px 3px 7px #3d3d3d;
}

.calculator-keyboard {
  align-items: center;
  margin-bottom: 15px;
  flex-direction: row;
  justify-content: space-around;
}

.calculator-numbers {
  width: 280px;
}

.calculator-calcOpts {
  width: 80px;
}

a {
  text-decoration: none;
  color: #3d3d3d;
}

footer {
  text-align: center;
  margin-top: 15px;
}

A simple calculator made with VueJs

You are Most welcome in my youtube Channel Please subscribe my channel. and give me FeedBack.
More Details……
Angularjs Example

Example

I hope you have Got What is A simple calculator made by vuejs And how it works.I would Like to have FeedBack From My Blog(Pakainfo.com) readers.Your Valuable FeedBack,Any Question,or any Comments about This Article(Pakainfo.com) Are Most Always Welcome.