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.

Read Also:  vue-scrollto smooth scroll vuejs example

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

Read Also:  Bootstrap Toggle Inside JQuery DataTable

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.


Related FAQ

Here are some more FAQ related to this Article:

  1. Read Also:  How to check whether an array is empty using VueJS?
  2. Read Also:  Vuejs Double Click to inline editing vue Grid Component
  3. Read Also:  Sort associative array by specific key in PHP
  4. Read Also:  Simple Vue.js 2 CRUD application
  5. Read Also:  Palindrome Number Program in JavaScript
  6. Read Also:  wordpress Get All Parent Categories from Child Categories
  7. Read Also:  Connect Multiple Databases in CodeIgniter
  8. Read Also:  check dropdown contains in jquery
  9. Read Also:  fixed button on side of website bootstrap
  10. Read Also:  Vue JS Radio Buttons - Use Onlick or Onchange Event?
CLOSEX