ExpenceApp/FILE.HTML at master · zackzack12/ExpenceApp · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Personal Expense</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous" />
    <script defer src="https://use.fontawesome.com/releases/v5.7.2/js/all.js" integrity="sha384-0pzryjIRos8mFBWMzSSZApWtPl/5++eIfzYmTgBBmXYdhvxPc+XcFEk+zJwDgWbP" crossorigin="anonymous"></script>
</head>

<body>
    <nav class="navbar navbar-dark bg-dark">
        <span class="navbar-brand mb-0 h1">Xpers</span>
        <span class="navbar-brand mb-0 h1" id="headingTotal"></span>
    </nav>
    <div class="container-fluid bg-light" style="min-height: 100vh">
        <div class="container">
            <div class="jumbotron mt-4">
                <div class="input-group mb-3">
                    <input type="text" class="form-control" id="inputAmount" placeholder="Amount spent" aria-label="Amount spent" aria-describedby="spent in rupee" />
                    <div class="input-group-append">
                        <span class="input-group-text" id="spent in rupee">₹</span>
                    </div>
                </div>
                <div class="input-group mb-3">
                    <div class="input-group-prepend">
                        <span class="input-group-text" id="spent at">@</span>
                    </div>
                    <input type="text" class="form-control" id="inputDesc" placeholder="spent On" aria-label="spent On" aria-describedby="spent at" />
                    <div class="input-group-append">
                        <button class="btn btn-outline-primary" type="button" id="btnAddExpense">Add</button>
                    </div>
                </div>
            </div>
            <div>
                <ul class="list-group" id="expenseTable"></ul>
            </div>
        </div>
    </div>

    <script>
        // get the heading element
        const headingEl = document.querySelector('#headingTotal');
        // get the reference to desc element
        const inputDescEl = document.querySelector('#inputDesc');
        // ref to input amount
        const inputElement = document.querySelector('#inputAmount');
        // get the ref to table
        const expenseTableEl = document.querySelector('#expenseTable');
        // init value of expense at 0
        let totalExpense = 0;
        // set the heading element to total Expense
        headingEl.textContent = totalExpense;
        // allExpenses at one place
        var allExpenses = [];
        // onButtonClick add inputAmount to totalExpense
        function addExpenseToTotal() {
            var expenseItem = {};
            // read value from inputAmount
            const textAmount = inputElement.value;
            // read the desc from inputDesc
            const textDesc = inputDescEl.value;
            // convert it to number
            const expense = parseInt(textAmount, 10);
            // put it in object
            expenseItem.desc = textDesc;
            expenseItem.amount = expense;
            expenseItem.moment = new Date();
            allExpenses.push(expenseItem);
            // add that value to totalExpense
            totalExpense = totalExpense + expense;
            inputElement.value = '';
            inputDescEl.value = '';
            // set the heading element to totalExpense
            const someText = `Total: ${totalExpense}`;
            headingEl.textContent = someText;
            renderList(allExpenses);
        }
        // getting the btn element
        const element = document.querySelector('#btnAddExpense');
        // Listening to click event
        element.addEventListener('click', addExpenseToTotal, false);
        // Controller Functions
        // Get Date String
        function getDateString(momento) {
            return momento.toLocaleDateString('en-US', {
                year: 'numeric',
                month: 'long',
                day: 'numeric',
            });
        }
        // Delete Items
        function deleteItem(dateValue) {
            const newArr = allExpenses.filter(expense => expense.moment.valueOf() !== dateValue);
            allExpenses = [...newArr];
            renderList(newArr);
        }
        // View Layer
        function renderList(arrOfList) {
            const allExpenseHTML = arrOfList.map(expense => createListItem(expense));
            const joinedAllExpenseHTML = allExpenseHTML.join('');
            expenseTableEl.innerHTML = joinedAllExpenseHTML;
        }

        function createListItem({
            desc,
            amount,
            moment
        }) {
            console.log(moment.valueOf())
            return `
                    <li class="list-group-item d-flex justify-content-between">
							<div class="d-flex flex-column">
								${desc}
								<small class="text-muted">${getDateString(moment)}</small>
							</div>
							<div>
								<span class="px-5">
									${amount}
								</span>
								<button
                                    type="button"
                                    class="btn btn-outline-danger btn-sm"
                                    onclick="deleteItem(${moment.valueOf()})"
                                    >
									<i class="fas fa-trash-alt"></i>
								</button>
							</div>
						</li>
                    `;
        }
    </script>
</body>

</html>