-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
108 lines (103 loc) · 4.51 KB
/
index.html
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
<!DOCTYPE html>
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<link rel="stylesheet" href="main.css?version=81">
</head>
<body>
<header id="header">
<h1>Budgeting App</h1>
</header>
<div id="headerbkgd"></div>
<div id="color1"></div>
<div id="content">
<div>
<input type="text" id="budgetin" name="b" placeholder="Enter Monthly Salary">
<button id="budget" class="btn btn-primary" v-on:click="setSalary()">submit</button>
</div>
<p>Budget: ${{salary}}</p>
<div v-for="(item, index) in purchases" :key="index">
<div class="item">${{item}}<button class="inner" v-on:click="removePurchase(index)">remove</button></div>
</div>
<div id="purchase">
<p>Total Purchases: ${{total}}</p>
<input type="text" id="purchasein" name="p">
<button id="addpurchase" class="btn btn-primary" v-on:click="addPurchase()">add purchase</button>
<button class="btn btn-primary" v-on:click="clearPurchases()">clear purchases</button>
</div>
</div>
<footer></footer>
<script>
var vm=new Vue({
el: '#content',
data: {
salary: 0,
purchases:[]
},
methods: {
setSalary: function(){
var sal=document.getElementsByName("b")[0].value;
if(!this.isNumber(sal)){
alert("please enter valid numbers only");
}else{
this.salary=sal;
this.setBalance();
}
},
addPurchase: function(){
var pur=document.getElementsByName("p")[0].value;
if(!this.isNumber(pur)){
alert("please enter valid numbers only");
}else{
//alert(pur);
this.purchases.push(pur);
this.setBalance();
}
document.getElementsByName("p")[0].value="";
},
isNumber: function(input){
var regex=/^(?:[0-9]+\.?[0-9]?[0-9]?)$/;
return input!=null && input!="" && input.match(regex);
},
setBalance: function(){
var totpur=this.total;
var budget=this.salary;
var percent=0;
if(totpur==0){
percent=0;
}else if(totpur>budget){
percent=100;
}else{
percent=(totpur/budget)*100;
}
percent+="%";
document.getElementById("color1").style.height=percent;
},
clearPurchases: function(){
var len=this.purchases.length;
for(var i=0;i<len;i++){
this.purchases.pop();
}
this.setBalance();
},
removePurchase: function(index){
this.purchases.splice(index,1);
this.setBalance();
}
},
computed:{
total: function(){
var tot=0;
var len=this.purchases.length;
for(var i=0;i<len;i++){
tot += Number(this.purchases[i]);
}
return Math.round((tot+0.00001)*100)/100;
}
}
});
</script>
</body>
</html>