├── public
    ├── favicon.ico
    └── index.html
├── src
    ├── assets
    │   └── logo.png
    ├── main.js
    ├── App.vue
    └── components
    │   └── Calculator.vue
├── babel.config.js
├── vue.config.js
├── .gitignore
├── jsconfig.json
├── README.md
└── package.json


/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/neto112/Calculator-app/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/neto112/Calculator-app/HEAD/src/assets/logo.png


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/cli-plugin-babel/preset'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
1 | const { defineConfig } = require('@vue/cli-service')
2 | module.exports = defineConfig({
3 |   transpileDependencies: true
4 | })
5 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import App from './App.vue'
 3 | import 'bootstrap/dist/css/bootstrap.min.css'
 4 | 
 5 | Vue.config.productionTip = false
 6 | 
 7 | new Vue({
 8 |   render: h => h(App),
 9 | }).$mount('#app')
10 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <Calculator />
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | import Calculator from './components/Calculator.vue'
 9 | 
10 | export default {
11 |   name: 'App',
12 |   components: {
13 |     Calculator
14 |   }
15 | }
16 | </script>
17 | 
18 | <style >
19 | 
20 | </style>
21 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | 
 6 | # local env files
 7 | .env.local
 8 | .env.*.local
 9 | 
10 | # Log files
11 | npm-debug.log*
12 | yarn-debug.log*
13 | yarn-error.log*
14 | pnpm-debug.log*
15 | 
16 | # Editor directories and files
17 | .idea
18 | .vscode
19 | *.suo
20 | *.ntvs*
21 | *.njsproj
22 | *.sln
23 | *.sw?
24 | 


--------------------------------------------------------------------------------
/jsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es5",
 4 |     "module": "esnext",
 5 |     "baseUrl": "./",
 6 |     "moduleResolution": "node",
 7 |     "paths": {
 8 |       "@/*": [
 9 |         "src/*"
10 |       ]
11 |     },
12 |     "lib": [
13 |       "esnext",
14 |       "dom",
15 |       "dom.iterable",
16 |       "scripthost"
17 |     ]
18 |   }
19 | }
20 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # vue-calculator-app
 2 | 
 3 | ## Project setup
 4 | ```
 5 | npm install
 6 | ```
 7 | 
 8 | ### Compiles and hot-reloads for development
 9 | ```
10 | npm run serve
11 | ```
12 | 
13 | ### Compiles and minifies for production
14 | ```
15 | npm run build
16 | ```
17 | 
18 | ### Lints and fixes files
19 | ```
20 | npm run lint
21 | ```
22 | 
23 | ### Customize configuration
24 | See [Configuration Reference](https://cli.vuejs.org/config/).
25 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title><%= htmlWebpackPlugin.options.title %></title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-calculator-app",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint"
 9 |   },
10 |   "dependencies": {
11 |     "bootstrap": "^5.2.2",
12 |     "core-js": "^3.8.3",
13 |     "vue": "^2.6.14"
14 |   },
15 |   "devDependencies": {
16 |     "@babel/core": "^7.12.16",
17 |     "@babel/eslint-parser": "^7.12.16",
18 |     "@vue/cli-plugin-babel": "~5.0.0",
19 |     "@vue/cli-plugin-eslint": "~5.0.0",
20 |     "@vue/cli-service": "~5.0.0",
21 |     "eslint": "^7.32.0",
22 |     "eslint-plugin-vue": "^8.0.3",
23 |     "vue-template-compiler": "^2.6.14"
24 |   },
25 |   "eslintConfig": {
26 |     "root": true,
27 |     "env": {
28 |       "node": true
29 |     },
30 |     "extends": [
31 |       "plugin:vue/essential",
32 |       "eslint:recommended"
33 |     ],
34 |     "parserOptions": {
35 |       "parser": "@babel/eslint-parser"
36 |     },
37 |     "rules": {}
38 |   },
39 |   "browserslist": [
40 |     "> 1%",
41 |     "last 2 versions",
42 |     "not dead"
43 |   ]
44 | }
45 | 


--------------------------------------------------------------------------------
/src/components/Calculator.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="p-3" style="max-width: 400px; margin: 50px auto; background: #234">
 3 |     <div class="w-full rounded m-1 p-3 text-right lead font-weight-bold text-white bg-vue-dark">
 4 |       {{ calculatorValue || 0 }}
 5 |     </div>
 6 |     <div class="row no-gutters">
 7 |       <div class="col-3" v-for="n in calculatorElements" :key="n">
 8 |         <div class="lead text-white text-center m-1 py-3 bg-vue-dark rounded hover-class"
 9 |           :class="{'bg-vue-green': ['C','*','/','-','+','%','='].includes(n)}"
10 |           @click="action(n)"
11 |         >
12 |           {{n}}
13 |         </div>
14 |       </div>
15 |     </div>
16 |   </div>
17 | </template>
18 | 
19 | <script>
20 | export default {
21 |   name: 'HelloWorld',
22 |   props: {
23 |     msg: String
24 |   },
25 |   data() {
26 |     return {
27 |       calculatorValue: '',
28 |       calculatorElements: ['C', '*', '/', '-', 7, 8, 9, '+', 4, 5, 6, '%', 1, 2, 3, '=' ,0, '.'],
29 |       operator: null,
30 |       previousCalculatorValue: '',
31 |     }
32 |   },
33 |   methods: {
34 |     action(n) {
35 |       if(!isNaN(n) || n === '.') {
36 |         this.calculatorValue += n + '';
37 |       }
38 |       if(n === 'C') {
39 |         this.calculatorValue = ""
40 |       }
41 |       if(n === '%') {
42 |         this.calculatorValue = this.calculatorValue / 100 + ''
43 |       }
44 |       if(['/', '*', '-', '+'].includes(n)) {
45 |         this.operator = n;
46 |         this.previousCalculatorValue = this.calculatorValue;
47 |         this.calculatorValue = '';
48 |       }
49 |       if(n === '='){
50 |         this.calculatorValue = eval(
51 |           this.previousCalculatorValue + this.operator + this.calculatorValue
52 |         );
53 |         this.previousCalculatorValue = '';
54 |         this.operator = null;
55 |       }
56 |     }
57 |   }
58 | }
59 | </script>
60 | 
61 | <style scoped>
62 |   .bg-vue-dark {
63 |     background: #31475e;
64 |   }
65 |   .hover-class:hover {
66 |     cursor: pointer;
67 |     background: #3D5875;
68 |   }
69 |   .bg-vue-green {
70 |     background: #3fb984;
71 |   }
72 | </style>
73 | 


--------------------------------------------------------------------------------