From 3e92ebed41a0708d63f2ace25f7f9e26b6330acf Mon Sep 17 00:00:00 2001
From: Hashemi Rafsan <rafsanhashemi@gmail.com>
Date: Fri, 18 Sep 2020 11:34:52 +0600
Subject: [PATCH] preview the histories for each action

---
 assets/main.js   | 8 ++++++--
 assets/style.css | 7 +++++++
 index.html       | 5 +++--
 3 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/assets/main.js b/assets/main.js
index 6cc7662..2d63bd8 100644
--- a/assets/main.js
+++ b/assets/main.js
@@ -4,7 +4,8 @@ Vue.createApp({
       del: localStorage.delActive ? localStorage.delActive : false,
       label: '',
       item: '',
-      items: []
+      items: [],
+      histories: []
     }
   },
   watch: {
@@ -24,14 +25,17 @@ Vue.createApp({
   },
   methods: {
     addItem () {
-      this.item = eval(this.item.replace(/[^-()\d/*+.]/g, '')) //parse the math expression, but sanitize it
+      let item = this.item.replace(/[^-()\d/*+.]/g, '') //parse the math expression, but sanitize it
+      this.item = eval(item)
       if (this.item > 0) {
         this.items.unshift(this.item * 1) //or push - whatever works for you
+        this.histories.unshift(item)
       }
       this.updateTotal()
     },
     removeItem (n) {
       this.items.splice(n, 1)
+      this.histories.splice(n, 1)
       this.updateTotal()
     },
     undoAddition () {
diff --git a/assets/style.css b/assets/style.css
index cf12838..415c881 100644
--- a/assets/style.css
+++ b/assets/style.css
@@ -53,9 +53,16 @@ ul.items li {
   margin-bottom: 1px;
   font-size: 22px;
   display: grid;
+}
+
+.grid-col-2 {
   grid-template-columns: 1fr 1fr;
 }
 
+.grid-col-3 {
+  grid-template-columns: 1fr 1fr 1fr;
+}
+
 ul.items li.seperator {
   height: 1px;
   background-color: #ccc;
diff --git a/index.html b/index.html
index 1816be3..4887dc2 100644
--- a/index.html
+++ b/index.html
@@ -27,14 +27,15 @@
         </div>
         <div>
           <ul class="items">
-            <li v-for="(item,index) in items">
+            <li v-for="(item,index) in items" class="grid-col-3">
               <div class="left">{{item}}</div>
+              <div>{{ histories[index] }}</div>
               <div class="right">
                 <button @click="removeItem(index)">Delete</button>
               </div>
             </li>
             <!-- <li class="seperator"></li> -->
-            <li class="total" v-show="sum">
+            <li class="total grid-col-2" v-show="sum">
               <div class="left">Total</div>
               <div class="right">{{sum}}</div>
             </li>