A Simple And Basic Calculator App For Vue.js 3 | vue-calc

vue-calc is a small calculator app for Vue 3 that displays the sum of the numbers you’ve typed into an input field.

simple calculator using javascript, create a simple calculator using javascript, javascript calculator github

A simple Piano Keyboard Like Calculator App in jQuery | Pianolator

How to make use of it:

Install & Download

<section id="loader" class='loader' >loading . . . </section>
Vue.createApp({
  data () {
    return {
      del: localStorage.delActive ? localStorage.delActive : false,
      label: '',
      item: '',
      items: []
    }
  },
  watch: {
    del (value) {
      localStorage.delActive = value
    }
  },
  computed: {
    sum () {
      return this.items.length > 0
        ? this.items.reduce((o, n) => (o = o + n))
        : 0
    }
  },
  mounted () {
    this.focus();
    document.getElementById("loader").style.display="none";
  },
  methods: {
    addItem () {
      this.item = eval(this.item.replace(/[^-()\d/*+.]/g, '')) //parse the math expression, but sanitize it
      if (!isNaN(this.item) && this.item!=0) {
        this.items.unshift(this.item * 1) //or push - whatever works for you
      }
      this.item = ''
    },
    removeItem (n) {
      this.items.splice(n, 1)
    },
    undoAddition () {
      if (this.del) {
        this.item == '' ? this.items.shift() : false
        this.focus()
      }
    },
    focus () {
      this.item = ''
      this.$refs.n.focus()
    }
  }
}).mount('#app')

Basic Calculator App, vue-calc Plugin/Github


See Demo And Download

Official Website(hasinhayder): Click Here

This superior jQuery/javascript plugin is developed by hasinhayder. For extra Advanced usage, please go to the official website.

Related Posts

HStack-and-VStack-in-CSS

CSS Layout Components Horizontal/Vertical Stack | HStack and VStack

HStack and VStack in CSS – CSS layout components that (basically) stack anything horizontally and vertically. A pure CSS library that makes it easy to stack elements…

Floating-Whatsapp-Chat-Button

How to Add Floating Whatsapp Chat Button In HTML | venom-button

Venom Button is a very simple plugin for the jQuery floating WhatsApp button. Adds a floating button to your site that calls WhatsApp Click to Chat API. It will automatically start the WhatsApp…

Data-Table-Generator-Tabulator

Interactive Data Table Generator with JS/jQuery and JSON | Tabulator

Tabulator allows you to create interactive tables in seconds from any HTML Table, JavaScript array, AJAX data source, or JSON format data. Just include the library in your…

alert-confirm-prompt-attention-js

Simple Alert, Confirm, Prompt Popup Using Vanilla JavaScript Library | attention.js

JavaScript provides various built-in functionality to display popup messages for different purposes. Attention JS is a vanillaJS plugin used to create a custom alert, confirm, or Prompt…

Bootstrap-4-Sidebar-Menu-Responsive-Template

Bootstrap 4 Sidebar Menu Responsive Template | MDB

Bootstrap Side Navbar – Responsive sidebar template based on the Bootstrap 4 framework. An easy-to-use, totally responsive, Google Material Design impressed aspect navigation for modern web app…

Bootstrap-4-Toast-Notification-Plugin

Lightweight Bootstrap 4 Toast Notification Plugin | BS4 Advanced Toast

A lightweight Bootstrap 4 Toast Notification plugin integrated with JS/jQuery. bs4-toast.js is a JavaScript library that enhances the native Bootstrap toast component with icons, buttons, callbacks, and…

Leave a Reply

Your email address will not be published. Required fields are marked *