DSC-Pilot-Workshop/index.html at master · dscnustech/DSC-Pilot-Workshop · 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
138
139
<!DOCTYPE html>
<html>
<head>
    <title>Finance Calculator</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-light" style="background-color: #e3f2fd;">
        <a class="navbar-brand" href="#">Home</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="./index.html">Financial Calculator <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="./purchase.html">Hired purchase</a>
                </li>
            </ul>
        </div>
    </nav>

    <div id="divForm" class="card w-50">
        <div class="card-body">
            <h1 id="title" class="card-title">Finance Calculator</h1>
            <form id="form" onsubmit="return false;">
                <div class="form-group row">
                    <label class="col-sm-2 col-form-label">Amount</label>
                    <div class="col-sm-10">
                        <input id="txtAmt" type="number" value="0" class="form-control" required> <br>
                    </div>
                </div>

                <fieldset class="form-group">
                    <div class="row">
                      <legend class="col-form-label col-sm-2 pt-0">Type</legend>
                      <div class="col-sm-10">
                        <div class="form-check">
                            <input type="radio" name="incomeType" value="Income" checked="checked">
                            <label class="form-check-label" for="gridRadios1">
                                Income
                            </label>
                        </div>
                        <div class="form-check">
                            <input type="radio" name="incomeType" value="Expense">
                            <label class="form-check-label" for="gridRadios2">
                                Expense
                            </label>
                        </div>
                    </div>
                </fieldset>

                <div class="form-group row">
                    <label class="col-sm-2 col-form-label">Input Date</label>
                    <div class="col-sm-10">
                        <input id="txtDate" type="date" class="form-control">
                    </div>
                </div>
                <br/>
                <button id="btnSubmit" class="btn btn-success" type="submit" >Submit</button>
                <button id="btnReset" type="reset" class="btn btn-outline-secondary">Reset</button>
            </form>

            <div id="divBalance" class="card">
                <div class="card-header">
                  Account Summary
                </div>
                <div class="card-body" id="card_summary">
                    Remaining Balance: $<span id="txtVal">0</span>
                    <p>Last Updated On: <span id="txtUpdated"></span></p>
                </div>
            </div>
        </div>
    </div>
    <script>
        // Current balance = 0 and then set the val of the html to 0
        var current_balance = 0;

        // Add an Onclick event
        btnSubmit.addEventListener("click", calculate);
        btnReset.addEventListener("click", reset);

        // Change the date to current date
        document.getElementById("txtDate").setAttribute("value", get_date());

        // Function to caculate
        function calculate() {

            var income_type = document.querySelector('input[name=incomeType]:checked').value;
            var txtAmt = document.getElementById("txtAmt").value;
            if (parseInt(txtAmt) < 0){
                alert("Negative Value Error")
            }
            else if (income_type === "Income"){
                current_balance = current_balance + parseInt(txtAmt);
                update_date();
            }
            else{
                if (parseInt(txtAmt) <= current_balance){
                    current_balance = current_balance - parseInt(txtAmt);
                    update_date();
                }
                else{
                    alert("You are spending more than you are earning! Don't do that!")
                }

            }
            document.getElementById("txtVal").textContent = current_balance;
        }

        // Function to reset balance to 0
        function reset() {
            current_balance = 0;
            document.getElementById("txtVal").textContent = 0;
            update_date();
        }

        // Function for date
        function get_date(){
            var now = new Date();

            var day = ("0" + now.getDate()).slice(-2);
            var month = ("0" + (now.getMonth() + 1)).slice(-2);

            var today = now.getFullYear()+"-"+(month)+"-"+(day) ;
            return today
        }

        // Function to update the date on the last update on date:
        function update_date(){
            var input_date = document.getElementById("txtDate").value;
            document.getElementById("txtUpdated").textContent = input_date;
        }
    </script>
</body>
</html>