├── assets
    ├── main.js
    └── style.css
└── index.html


/assets/main.js:
--------------------------------------------------------------------------------
 1 | Vue.createApp({
 2 |   data () {
 3 |     return {
 4 |       del: localStorage.delActive ? localStorage.delActive : false,
 5 |       label: '',
 6 |       item: '',
 7 |       items: []
 8 |     }
 9 |   },
10 |   watch: {
11 |     del (value) {
12 |       localStorage.delActive = value
13 |     }
14 |   },
15 |   computed: {
16 |     sum () {
17 |       return this.items.length > 0
18 |         ? this.items.reduce((o, n) => (o = o + n))
19 |         : 0
20 |     }
21 |   },
22 |   mounted () {
23 |     this.focus();
24 |     document.getElementById("loader").style.display="none";
25 |   },
26 |   methods: {
27 |     addItem () {
28 |       this.item = eval(this.item.replace(/[^-()\d/*+.]/g, '')) //parse the math expression, but sanitize it
29 |       if (!isNaN(this.item) && this.item!=0) {
30 |         this.items.unshift(this.item * 1) //or push - whatever works for you
31 |       }
32 |       this.item = ''
33 |     },
34 |     removeItem (n) {
35 |       this.items.splice(n, 1)
36 |     },
37 |     undoAddition () {
38 |       if (this.del) {
39 |         this.item == '' ? this.items.shift() : false
40 |         this.focus()
41 |       }
42 |     },
43 |     focus () {
44 |       this.item = ''
45 |       this.$refs.n.focus()
46 |     }
47 |   }
48 | }).mount('#app')
49 | 


--------------------------------------------------------------------------------
/assets/style.css:
--------------------------------------------------------------------------------
  1 | body {
  2 |   display: grid;
  3 |   justify-content: center;
  4 |   margin-top: 40px;
  5 |   font-family: "Noto Sans", sans-serif;
  6 | }
  7 | 
  8 | section.content {
  9 |   /* padding: 20px; */
 10 |   max-width: 800px;
 11 |   width: 100%;
 12 |   background-color: #ffffff;
 13 | }
 14 | 
 15 | .section.content h1 {
 16 |   margin: 0px;
 17 |   padding: 0px;
 18 |   margin-bottom: 15px;
 19 | }
 20 | 
 21 | .form {
 22 |   background-color: #eee;
 23 |   padding: 20px 30px 30px 20px;
 24 | }
 25 | 
 26 | .form input[type="text"] {
 27 |   height: 35px;
 28 |   width: 97%;
 29 |   margin-top: 10px;
 30 |   margin-bottom: 10px;
 31 |   font-size: 24px;
 32 |   padding: 5px 10px;
 33 | }
 34 | 
 35 | .form label {
 36 |   font-size: 20px;
 37 |   display: block;
 38 | }
 39 | 
 40 | .form span {
 41 |   font-size: 15px;
 42 |   margin-left: 3px;
 43 | }
 44 | 
 45 | ul.items {
 46 |   list-style-type: none;
 47 |   padding: 20px 0px;
 48 |   margin: 0px;
 49 | }
 50 | 
 51 | ul.items li {
 52 |   padding: 15px 20px;
 53 |   background-color: #eee;
 54 |   margin-bottom: 1px;
 55 |   font-size: 22px;
 56 |   display: grid;
 57 |   grid-template-columns: 1fr 1fr;
 58 | }
 59 | 
 60 | ul.items li.seperator {
 61 |   height: 1px;
 62 |   background-color: #ccc;
 63 |   padding: 0px;
 64 |   margin: 10px 0px;
 65 | }
 66 | 
 67 | ul.items li.total {
 68 |   text-align: right;
 69 | }
 70 | 
 71 | .right {
 72 |   text-align: right;
 73 | }
 74 | 
 75 | .right button {
 76 |   height: 35px;
 77 |   width: 100px;
 78 |   margin: 0px;
 79 |   padding: 0px;
 80 |   background-color: rgb(243, 27, 27);
 81 |   color: #fff;
 82 |   border: 1px solid #eee;
 83 |   border-radius: 5px;
 84 | }
 85 | 
 86 | .right button:hover {
 87 |   background-color: rgb(206, 12, 12);
 88 |   cursor: pointer;
 89 | }
 90 | 
 91 | .right {
 92 |   display: grid;
 93 |   align-content: center;
 94 |   justify-content: right;
 95 | }
 96 | 
 97 | .left {
 98 |   text-align: left;
 99 | }
100 | 
101 | .info {
102 |   margin-top: 10px;
103 |   background-color: #f0f0f0;
104 |   padding: 10px 20px;
105 | }
106 | 
107 | .info p {
108 |   font-size: 13px;
109 |   line-height: 2.1em;
110 |   color: #222;
111 | }
112 | 
113 | /**
114 |  * KEYS.css
115 |  *
116 |  * A simple stylesheet for rendering beautiful keyboard-style elements.
117 |  *
118 |  * Author:  Michael Hüneburg
119 |  * Website: http://michaelhue.com/keyscss
120 |  * License: MIT License (see LICENSE.txt)
121 |  */
122 | 
123 | /* Base style, essential for every key. */
124 | kbd,
125 | .key {
126 |   display: inline;
127 |   display: inline-block;
128 |   min-width: 1em;
129 |   padding: 0.2em 0.3em;
130 |   font: normal 0.85em/1 "Lucida Grande", Lucida, Arial, sans-serif;
131 |   text-align: center;
132 |   text-decoration: none;
133 |   -moz-border-radius: 0.3em;
134 |   -webkit-border-radius: 0.3em;
135 |   border-radius: 0.3em;
136 |   border: none;
137 |   cursor: default;
138 |   -moz-user-select: none;
139 |   -webkit-user-select: none;
140 |   user-select: none;
141 | }
142 | 
143 | kbd[title],
144 | .key[title] {
145 |   cursor: help;
146 | }
147 | 
148 | /* Dark style for display on light background. This is the default style. */
149 | kbd,
150 | kbd.dark,
151 | .dark-keys kbd,
152 | .key,
153 | .key.dark,
154 | .dark-keys .key {
155 |   background: rgb(80, 80, 80);
156 |   background: -moz-linear-gradient(top, rgb(60, 60, 60), rgb(80, 80, 80));
157 |   background: -webkit-gradient(
158 |     linear,
159 |     left top,
160 |     left bottom,
161 |     from(rgb(60, 60, 60)),
162 |     to(rgb(80, 80, 80))
163 |   );
164 |   color: rgb(250, 250, 250);
165 |   text-shadow: -1px -1px 0 rgb(70, 70, 70);
166 |   -moz-box-shadow: inset 0 0 1px rgb(150, 150, 150),
167 |     inset 0 -0.05em 0.4em rgb(80, 80, 80), 0 0.1em 0 rgb(30, 30, 30),
168 |     0 0.1em 0.1em rgba(0, 0, 0, 0.3);
169 |   -webkit-box-shadow: inset 0 0 1px rgb(150, 150, 150),
170 |     inset 0 -0.05em 0.4em rgb(80, 80, 80), 0 0.1em 0 rgb(30, 30, 30),
171 |     0 0.1em 0.1em rgba(0, 0, 0, 0.3);
172 |   box-shadow: inset 0 0 1px rgb(150, 150, 150),
173 |     inset 0 -0.05em 0.4em rgb(80, 80, 80), 0 0.1em 0 rgb(30, 30, 30),
174 |     0 0.1em 0.1em rgba(0, 0, 0, 0.3);
175 | }
176 | 
177 | /* Light style for display on dark background. */
178 | kbd.light,
179 | .light-keys kbd,
180 | .key.light,
181 | .light-keys .key {
182 |   background: rgb(250, 250, 250);
183 |   background: -moz-linear-gradient(top, rgb(210, 210, 210), rgb(255, 255, 255));
184 |   background: -webkit-gradient(
185 |     linear,
186 |     left top,
187 |     left bottom,
188 |     from(rgb(210, 210, 210)),
189 |     to(rgb(255, 255, 255))
190 |   );
191 |   color: rgb(50, 50, 50);
192 |   text-shadow: 0 0 2px rgb(255, 255, 255);
193 |   -moz-box-shadow: inset 0 0 1px rgb(255, 255, 255),
194 |     inset 0 0 0.4em rgb(200, 200, 200), 0 0.1em 0 rgb(130, 130, 130),
195 |     0 0.11em 0 rgba(0, 0, 0, 0.4), 0 0.1em 0.11em rgba(0, 0, 0, 0.9);
196 |   -webkit-box-shadow: inset 0 0 1px rgb(255, 255, 255),
197 |     inset 0 0 0.4em rgb(200, 200, 200), 0 0.1em 0 rgb(130, 130, 130),
198 |     0 0.11em 0 rgba(0, 0, 0, 0.4), 0 0.1em 0.11em rgba(0, 0, 0, 0.9);
199 |   box-shadow: inset 0 0 1px rgb(255, 255, 255),
200 |     inset 0 0 0.4em rgb(200, 200, 200), 0 0.1em 0 rgb(130, 130, 130),
201 |     0 0.11em 0 rgba(0, 0, 0, 0.4), 0 0.1em 0.11em rgba(0, 0, 0, 0.9);
202 | }
203 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <title>Sum It</title>
 7 |     <link rel="stylesheet" href="assets/style.css?v3" />
 8 |     <link
 9 |       href="//fonts.googleapis.com/css2?family=Noto+Sans&display=swap"
10 |       rel="stylesheet"
11 |     />
12 |     <style>
13 |         .loader{
14 |             position: absolute;
15 |             top:0px;
16 |             left:0px;
17 |             width:100vw;
18 |             height: 100vh;
19 |             z-index: 1000;
20 |             display: grid;
21 |             justify-items: center;
22 |             align-content: center;
23 |             background-color: #fff;
24 |         }
25 |     </style>
26 |   </head>
27 | 
28 |   <body>
29 |     <section id="loader" class='loader' >loading . . . </section>
30 |     <section class="content">
31 |       <div id="app">
32 |         <div class="form">
33 |           <label v-show="sum">Total = {{sum}}</label>
34 |           <input
35 |             type="text"
36 |             v-model="item"
37 |             v-on:keyup.enter="addItem"
38 |             v-on:keydown.delete="undoAddition"
39 |             ref="n"
40 |           /><br />
41 |           <input type="checkbox" v-model="del" />
42 |           <span>Activate Backspace/Delete Key to Undo additions</span>
43 |         </div>
44 |         <div>
45 |           <ul class="items">
46 |             <li v-for="(item,index) in items">
47 |               <div class="left">{{item}}</div>
48 |               <div class="right">
49 |                 <button @click="removeItem(index)">Delete</button>
50 |               </div>
51 |             </li>
52 |             <!-- <li class="seperator"></li> -->
53 |             <li class="total" v-show="sum">
54 |               <div class="left">Total</div>
55 |               <div class="right">{{sum}}</div>
56 |             </li>
57 |           </ul>
58 |         </div>
59 |         <div class="info">
60 |           <p>
61 |             * Type a number and hit <kbd>Enter</kbd> to add it<br />
62 |             * Type a math expression like 16 * 4 or 56 / 7 and hit
63 |             <kbd>Enter</kbd> to add the result<br />
64 |             * Hit <kbd>Delete</kbd> / <kbd>Backspace</kbd> key to undo the
65 |             addition<br />
66 |             * Click on <kbd class="light">Delete</kbd> button to remove any
67 |             specific item<br />
68 |             * Check source code and send issues/sugegstions -
69 |             <a href="https://github.com/hasinhayder/vue-calc" target="_blank">Sum It</a><br />
70 |           </p>
71 |         </div>
72 |       </div>
73 |     </section>
74 |     <script src="//unpkg.com/vue@next"></script>
75 |     <script src="assets/main.js?v4"></script>
76 |   </body>
77 | </html>
78 | 


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