Hackathon/Expense_webpage.html at Main · P-Verma101/Hackathon · 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
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Budget Tracker</title>
    <link rel="stylesheet" href="Budget_webpage.css">
</head>

<body>
<div class="Header">
    <h1>Expenses</h1>
</div>
<header>
    <nav>
        <ul>
            <li><a href="budget_tracker_main.html">Home</a></li>
            <li><a href="Budget_webpage.html">Budgets</a></li>
            <li><a href="Expense_webpage.html">Expenses</a></li>
        </ul>
    </nav>
</header>
<div class="Header">

<p> This page will compile a list of all you expenses you have for any type of purchase. The example below shows what the list will look like.</p>

<ul>
    <li>Walmart - $45.60</li>
    <li>Subway - $21.20</li>
    <li>Sephora - $34.90</li>
</ul>
<p>Try compiling your own below!</p>

<ul id="Expense-List">
    <li>Expense Name - Expense Amount</li>
</ul>

<p id="output">Input Here:</p>

<input type="text" id="Expense-Input" placeholder="Expense-Name">
<input type="number" id="Expense-Amount" placeholder="Expense-Amount">
<button id="myButton" onclick="addButtonData()">Add Input</button>

<script>
    function addButtonData() {
        var name = document.getElementById("Expense-Input").value;
        var amount = document.getElementById("Expense-Amount").value;
        if (name && amount) {
            var li = document.createElement("li");
	if (amount.indexOf('.') == -1){
            li.appendChild(document.createTextNode(name + " - $" + amount + ".00"));
}
	else{
	li.appendChild(document.createTextNode(name + " - $" + amount));
}
            document.getElementById("Expense-List").appendChild(li);
            document.getElementById("Expense-Input").value = "";
            document.getElementById("Expense-Amount").value = "";
            document.getElementById("output").innerHTML = "Added Expense";
        } else {
            document.getElementById("output").innerHTML = "womp womp!!";
        }
    }
</script>
</div>

</body>
</html>