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
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.