Vue.js Simple Arithmetic Calculator in Browser Using HTML5 CSS3 and Javascript Full Project For Beginners

Vue.js Simple Arithmetic Calculator in Browser Using HTML5 CSS3 and Javascript Full Project For Beginners
  • Post author:
  • Post category:Vue
  • Post comments:0 Comments

 

Welcome folks today in this blog post we will be building a simple arithmetic calculator in vue.js using html5 css3 and javascript. All the full source code of the application is shown below.

 

 

Get Started

 

 

In order to get started you need to make an index.html file and copy paste the following code

 

index.html

 

<link rel="stylesheet" href="style.css"/>
<div class="header">
    <div class="container">
      <h1 class="cover-heading">Calculator</h1>
      <div class="appBox" id="calApp">
  <!--       <p>{{ display }}:{{ prevOps }}:{{ decimalAdded }}:{{ total }}</br>CurrentNum=> {{ currentNum }}</p> -->
        <div class="containerBox">
          <div class="row">
            <div class="col-xs-8 cTop">{{ display }}</div>
          </div>
          <div class="row">
            <div class="col-xs-2 cBox" @click="clear">C</div>
            <div class="col-xs-2 cBox" @click="enterOps(4)">÷</div>
            <div class="col-xs-2 cBox" @click="enterOps(3)">X</div>
            <div class="col-xs-2 cBox" @click="del">DEL</div>
          </div>
          <div class="row">
            <div class="col-xs-2 cBox" @click="enterNum(7)">7</div>
            <div class="col-xs-2 cBox" @click="enterNum(8)">8</div>
            <div class="col-xs-2 cBox" @click="enterNum(9)">9</div>
            <div class="col-xs-2 cBox" @click="enterOps(2)">-</div>
          </div>
          <div class="row">
            <div class="col-xs-2 cBox" @click="enterNum(4)">4</div>
            <div class="col-xs-2 cBox" @click="enterNum(5)">5</div>
            <div class="col-xs-2 cBox" @click="enterNum(6)">6</div>
            <div class="col-xs-2 cBox" @click="enterOps(1)">+</div>
          </div>
          <div class="row">
            <div class="col-xs-2 cBox" @click="enterNum(1)">1</div>
            <div class="col-xs-2 cBox" @click="enterNum(2)">2</div>
            <div class="col-xs-2 cBox" @click="enterNum(3)">3</div>
            <div class="col-xs-2 cBox cBox-na"> </div>
          </div>
          <div class="row">
            <div class="col-xs-2 cBox" @click="enterNum(0)">0</div>
            <div class="col-xs-2 cBox" @click="addDecimal">.</div>
            <div class="col-xs-2 cBox cBox-na"> </div>
            <div class="col-xs-2 cBox" @click="sum">=</div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.13/vue.js"></script>
  <script src="script.js"></script>

 

 

Now make a style.css file and copy paste the following code

 

style.css

 

body,
html {
  width: 100%;
  height: 100%;
  font-family: 'Source Sans Pro', sans-serif;
}

.cBox {
  border: 1px solid rgba(95, 95, 95, 0.2);
  cursor: pointer;
  display: inline-block;
  float: none;  
  font-size: 20px;
  margin-right: -4px;
  max-width: 8rem;
  min-width: 6rem;
  min-height: 5rem;
  overflow: hidden;
  position: relative;
  padding: 2.5rem;
  text-align: center;
  transition: all 0.4s ease;
}

.cBox:hover {
  background: #75B1A9;  
}

.cBox-na:hover {
  background: #ACD0C0 !important;
}

.cTop {
  display: inline-block;
  float: none;
  text-align: right;
  margin-right:-4px;
  max-width: 32rem;
  min-width: 24rem;
  height: 80px;
  font-size: 20px;
  border: 1px solid rgba(95, 95, 95, 0.2);
  padding: 2.5rem;
}

.containerBox {
  width: 400px;
    height: auto;
  
  margin: 1px auto;
  padding: 0;
  
  /* prevent selection of text inside keys */
  -webkit-user-select: none; 
  -moz-user-select: none; 
  -ms-user-select: none; 
  user-select: none;
}

.row-centered {
  text-align:center;
}
.row {
  height: 80px;
  margin-bottom: -1px;
}

h1,
h2 {
  font-family: Bitter, sans-serif;
}

.header {
  background: #ACD0C0;
  color: #4F6457;
  height: 100%;
  text-align: center;
  padding-top: 10vh;
}

.header h1 {
  font-size: 46px;
  color: #4F6457;
  margin-bottom: 2.6rem;
  text-shadow: 1px 1px 5px rgba(125, 125, 125, 0.1),
               2px 2px 5px rgba(125, 125, 125, 0.1),
               3px 3px 5px rgba(125, 125, 125, 0.1),
               4px 4px 5px rgba(125, 125, 125, 0.1),
               5px 5px 5px rgba(125, 125, 125, 0.1);
}

.header p {
  color: #662E1C;
  font-size: 26px;
  margin: 2.6rem 0;
}

/*.ink styles - the elements which will create the ripple effect. The size and position of these elements will be set by the JS code. Initially these elements will be scaled down to 0% and later animated to large fading circles on user click.*/
.ink {
    display: block; position: absolute;
    background: #D9B44A;
    border-radius: 100%;
    transform: scale(0);
}
/*animation effect*/
.ink.animate {animation: ripple 0.3s linear;}
@keyframes ripple {
    /*scale the element to 250% to safely cover the entire link and fade it out*/
    100% {opacity: 0; transform: scale(2.5);}
}

 

See also  Vue.js IFrame Embed Component For Youtube,Dailymotion,Vimeo Videos Using v-video-embed Library in Javascript Full Project For Beginners

 

Now make a script.js file and copy paste the following code

 

script.js

 

var vm = new Vue({
  el: '#calApp',
  data: {
    currentNum: 0,
    decimalAdded: false,
    total: 0,
    prevOps: 0,
    display: '',
  },
  ready: function() {
    var target, ink, d, x, y;
    $(".containerBox .row .cBox").click(function(e) {
      target = $(this);
      //create .ink element if it doesn't exist
      if (target.find(".ink").length == 0)
        target.prepend("<span class='ink'></span>");

      ink = target.find(".ink");
      //incase of quick double clicks stop the previous animation
      ink.removeClass("animate");

      //set size of .ink
      if (!ink.height() && !ink.width()) {
        //use parent's width or height whichever is larger for the diameter to make a circle which can cover the entire element.
        d = Math.max(target.outerWidth(), target.outerHeight());
        ink.css({
          height: d,
          width: d
        });
      }

      //get click coordinates
      //logic = click coordinates relative to page - parent's position relative to page - half of self height/width to make it controllable from the center;
      x = e.pageX - target.offset().left - ink.width() / 2;
      y = e.pageY - target.offset().top - ink.height() / 2;

      //set the position and add class .animate
      ink.css({
        top: y + 'px',
        left: x + 'px'
      }).addClass("animate");
    })
  },
  methods: {
    addDecimal: function() {
      if (this.decimalAdded == false) {
        if (this.prevOps != 0) {
          this.display = '0.';
        } else {
          this.display += '.';
        }
        this.decimalAdded = true;
      }
    },
    clear: function() {
      this.currentNum = 0;
      this.decimalAdded = false;
      this.total = 0;
      this.display = '';
      this.prevOps = 0;
    },
    del: function() {
      if (this.currentNum > 0) {
        if (this.decimalAdded == false) {
          this.currentNum = parseInt(this.currentNum.toString().slice(0, -1), 10);
        } else {
          this.currentNum = parseFloat(this.currentNum.toString().slice(0, -1));
        }

        if (isNaN(this.currentNum))
          this.currentNum = 0;
        this.display = this.currentNum;
      } else if (this.currentNum == 0) {
        this.display = '';
      }
    },
    enterNum: function(val) {
      if (this.currentNum == 0) {
        if (this.prevOps == 0)
          this.total = 0;

        if (this.decimalAdded == true) {
          this.currentNum = val / 10;
          this.display += val.toString();
        } else {
          this.currentNum = val;
          this.display = val.toString();
        }
      } else {
        if (this.decimalAdded == true) {
          if (this.currentNum.toString().indexOf('.') == -1) {
            this.currentNum = parseFloat(this.currentNum.toString() + '.' + val.toString());
          } else {
            this.currentNum += val.toString();
            this.currentNum = parseFloat(this.currentNum);
          }
        } else {
          this.currentNum *= 10;
          this.currentNum += val;
        }
        this.display += val.toString();
      }
    },
    enterOps: function(ops) {
      if (this.total == 0 && this.currentNum == 0) {
        return;
      }
      if (this.total == 0) {
        this.total += this.currentNum;
      }
      switch (this.prevOps) {
        case 1:
          this.total += this.currentNum;
          break;
        case 2:
          this.total -= this.currentNum;
          break;
        case 3:
          this.total *= this.currentNum;
          break;
        case 4:
          this.total /= this.currentNum;
          break;
        case 0:
          break;
      }

      if (this.decimalAdded == true) {
        this.decimalAdded = false;
      }
      this.currentNum = 0;
      this.prevOps = ops;
    },
    sum: function() {
      switch (this.prevOps) {
        case 1:
          this.total += this.currentNum;
          break;
        case 2:
          this.total -= this.currentNum;
          break;
        case 3:
          this.total *= this.currentNum;
          break;
        case 4:
          this.total /= this.currentNum;
          break;
        case 0:
          break;
      }
      this.display = this.total.toString();
      this.prevOps = 0;
      this.currentNum = 0;
    }
  }
})

 

See also  Vue.js Digital Clock With Current Time Using Moment.js and CSS Bulma Framework in Browser Using Javascript Full Project For Beginners

 

Now if you open the index.html file inside the browser you will see the below output as shown below

 

Leave a Reply