├── .gitignore
├── README.md
├── babel.config.js
├── img
    ├── calculator.png
    └── package.png
├── jsconfig.json
├── package.json
├── public
    ├── favicon.ico
    └── index.html
├── src
    ├── App.vue
    ├── assets
    │   └── logo.png
    ├── components
    │   ├── Calculator.vue
    │   ├── Footer.vue
    │   └── Navigation.vue
    ├── main.js
    └── plugins
    │   └── bootstrap-vue.js
├── vue.config.js
└── yarn.lock


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


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Calculator In Vue Js
 2 | 
 3 | Written in JavaScript through VueJs and styled with Bootstrap Vue.
 4 | 
 5 | <img src="img/calculator.png">
 6 | 
 7 | ## Installation.
 8 | 
 9 | First of all, clone the project.
10 | You should have Vuejs installed on your system to proceed. To install Vue, you need <a href="http://">Node Package Manager (NPM)</a> and <a href="http://nodejs.org">Node Js</a> as JavaScript runtime.
11 | 
12 | Note: I chose to use ``yarn`` as my package manager instead of npm.
13 | 
14 | To install Vue, go ahead and run:
15 |     
16 |     > yarn global add @vue/cli
17 | 
18 | You can install the packages I used through 
19 | 
20 |     > yarn add "the dependency"
21 | 
22 | Look into the ```package.json``` to see the used dependencies.
23 | 
24 | <img src="img/package.png">
25 | 
26 | Install bootstrap-vue. We could do this through vue itself.
27 | 
28 |     > vue add bootstrap-vue
29 | 
30 | ### That should be all folks. Now to run:
31 | 
32 |     > yarn serve
33 | 
34 | #### Thank You
35 | 
36 | Feel free to reach out to me!
37 | geraldabuchi@twitter


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


--------------------------------------------------------------------------------
/img/calculator.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/grayoj/calculator-vuejs-app/7318158712e3b4046a1b957b798060fa5b23660e/img/calculator.png


--------------------------------------------------------------------------------
/img/package.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/grayoj/calculator-vuejs-app/7318158712e3b4046a1b957b798060fa5b23660e/img/package.png


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


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "calculator-vuejs-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 |     "@babel/polyfill": "^7.11.5",
12 |     "bootstrap": "^5.1.3",
13 |     "bootstrap-vue": "^2.21.2",
14 |     "core-js": "^3.8.3",
15 |     "mutationobserver-shim": "^0.3.7",
16 |     "popper.js": "^1.16.1",
17 |     "portal-vue": "^2.1.7",
18 |     "vue": "^2.6.14"
19 |   },
20 |   "devDependencies": {
21 |     "@babel/core": "^7.12.16",
22 |     "@babel/eslint-parser": "^7.12.16",
23 |     "@vue/cli-plugin-babel": "~5.0.0",
24 |     "@vue/cli-plugin-eslint": "~5.0.0",
25 |     "@vue/cli-service": "~5.0.0",
26 |     "eslint": "^7.32.0",
27 |     "eslint-plugin-vue": "^8.0.3",
28 |     "sass": "^1.26.11",
29 |     "sass-loader": "^10.0.2",
30 |     "vue-cli-plugin-bootstrap-vue": "~0.8.2",
31 |     "vue-template-compiler": "^2.6.14"
32 |   },
33 |   "eslintConfig": {
34 |     "root": true,
35 |     "env": {
36 |       "node": true
37 |     },
38 |     "extends": [
39 |       "plugin:vue/essential",
40 |       "eslint:recommended"
41 |     ],
42 |     "parserOptions": {
43 |       "parser": "@babel/eslint-parser"
44 |     },
45 |     "rules": {}
46 |   },
47 |   "browserslist": [
48 |     "> 1%",
49 |     "last 2 versions",
50 |     "not dead"
51 |   ]
52 | }
53 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/grayoj/calculator-vuejs-app/7318158712e3b4046a1b957b798060fa5b23660e/public/favicon.ico


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


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


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/grayoj/calculator-vuejs-app/7318158712e3b4046a1b957b798060fa5b23660e/src/assets/logo.png


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


--------------------------------------------------------------------------------
/src/components/Footer.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <mdb-footer color="blue" class="font-small pt-4 mt-4">
 3 |     <mdb-container class="text-left">
 4 |       <mdb-row>
 5 |         <mdb-col sm="6">
 6 |           <h5 class="title">Footer Content</h5>
 7 |           <p>Here you can use rows and columns here to organize your footer content.</p>
 8 |         </mdb-col>
 9 |         <mdb-col sm="6">
10 |           <h5 class="title">Links</h5>
11 |           <ul>
12 |             <li class="list-unstyled"><a href="#!">Link 1</a></li>
13 |             <li class="list-unstyled"><a href="#!">Link 2</a></li>
14 |             <li class="list-unstyled"><a href="#!">Link 3</a></li>
15 |             <li class="list-unstyled"><a href="#!">Link 4</a></li>
16 |           </ul>
17 |         </mdb-col>
18 |       </mdb-row>
19 |     </mdb-container>
20 |     <div class="footer-copyright text-center py-3">
21 |       <mdb-container fluid>
22 |         &copy; 2020 Copyright: <a href="https://www.MDBootstrap.com"> MDBootstrap.com </a>
23 |       </mdb-container>
24 |     </div>
25 |   </mdb-footer>
26 | </template>
27 | 
28 | <script>
29 | export default {
30 |     name: 'MyFooter',
31 |     props: {
32 |     msg: String
33 |   },
34 | }
35 | </script>
36 | 
37 | <style scoped>
38 | 
39 | </style>


--------------------------------------------------------------------------------
/src/components/Navigation.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <b-navbar toggleable="sm" type="light" variant="light">
 4 |     <b-navbar-toggle target="nav-text-collapse"></b-navbar-toggle>
 5 | 
 6 |     <b-navbar-brand>Simple Calculator in VueJS</b-navbar-brand>
 7 | 
 8 |     <b-collapse id="nav-text-collapse" is-nav>
 9 |       <b-navbar-nav>
10 |         <b-nav-text>Enjoy</b-nav-text>
11 |       </b-navbar-nav>
12 |     </b-collapse>
13 |   </b-navbar>
14 |   </div>
15 | </template>
16 | 
17 | <script>
18 | export default {
19 |     name: 'MyNavigation',
20 |     props: {
21 |     msg: String
22 |   },
23 | }
24 | </script>
25 | 
26 | <style scoped>
27 | 
28 | </style>


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


--------------------------------------------------------------------------------
/src/plugins/bootstrap-vue.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | 
3 | import BootstrapVue from 'bootstrap-vue'
4 | import 'bootstrap/dist/css/bootstrap.min.css'
5 | import 'bootstrap-vue/dist/bootstrap-vue.css'
6 | 
7 | Vue.use(BootstrapVue)
8 | 


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


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