Skip to content

Commit 55ee491

Browse files
MastermunteMastermunte
committed
transactions
1 parent 7e025aa commit 55ee491

File tree

3 files changed

+225
-0
lines changed

3 files changed

+225
-0
lines changed

‎css/demo-transactions.css

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
body {
2+
margin-top: 20px;
3+
}
4+
5+
h1 {
6+
font-size: 18px;
7+
font-weight: bolder;
8+
margin-bottom: 30px;
9+
border: 1px solid gold;
10+
border-radius: 4px;
11+
text-align: center;
12+
padding: 5px;
13+
background-color: teal;
14+
color: gold;
15+
}
16+
17+
.undisplayed {
18+
display: none;
19+
}
20+
21+
.txt-left {
22+
text-align: left;
23+
}
24+
25+
.edit {
26+
margin-left: 120px;
27+
}
28+
29+
.transition {
30+
transition: 0.4s;
31+
}
32+
33+
.inline-block {
34+
display: inline-block;
35+
}

‎demo-transactions.html

+50
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=no">
5+
<meta charset="UTF-8">
6+
<title>GoDev Sprint 4 Budgeting App</title>
7+
<link href="css/bootstrap.css" rel="stylesheet">
8+
<link href="css/demo-transactions.css" rel="stylesheet">
9+
</head>
10+
<body>
11+
<div class="col-md-4">
12+
<div class="col-md-5">
13+
<h1>Transactions</h1>
14+
</div>
15+
<div class="col-md-5 bordered">
16+
<form class="form-horizontal" id="transactions-form">
17+
<div class="form-group">
18+
<div class="col-sm-14">
19+
<input type="number" class="form-control" placeholder="Amount" id="transactions-amount-input">
20+
</div>
21+
</div>
22+
<div class="form-group">
23+
<div class="col-sm-14">
24+
<input type="text" class="form-control" placeholder="Tag" id="transactions-tag-input">
25+
</div>
26+
</div>
27+
<div class="form-group">
28+
<div class="col-sm-14">
29+
<input type="date" class="form-control" placeholder="Date" id="transactions-date-input">
30+
</div>
31+
</div>
32+
<div class="form-group">
33+
<div class="col-sm-14">
34+
<button type="submit" class="btn btn-default transition">Add</button>
35+
</div>
36+
</div>
37+
</form>
38+
</div>
39+
</div>
40+
<div class="col-md-12">
41+
<div class="col-md-12">
42+
<h1 class="inline-block">Current Transactions</h1>
43+
</div>
44+
<div id="displays">
45+
</div>
46+
</div>
47+
<script src="js/jquery-2.1.4.min.js"></script>
48+
<script src="js/transactionsRepository.js"></script>
49+
</body>
50+
</html>

‎js/transactionsRepository.js

+140
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,140 @@
1+
var repositoryTransactions = (function () {
2+
3+
var id = 5;
4+
var data = [
5+
{
6+
id: 1,
7+
category: 'Transport',
8+
amount: -15,
9+
tag: 'RATB tickets',
10+
date: '2016-01-19'
11+
},
12+
{
13+
id: 2,
14+
category: 'Food',
15+
amount: -25,
16+
tag: 'Pizza Lunch',
17+
date: '2016-01-15'
18+
},
19+
{
20+
id: 3,
21+
category: 'Clothing',
22+
amount: -50,
23+
tag: 'T-shirt',
24+
date: '2016-01-13'
25+
},
26+
{
27+
id: 4,
28+
category: 'Tips',
29+
amount: +90,
30+
tag: 'Customer Tip',
31+
date: '2016-01-12'
32+
},
33+
{
34+
id: 5,
35+
category: 'Godev Site Update',
36+
amount: +200,
37+
tag: 'Web Dev Gig',
38+
date: '2016-01-21'
39+
}
40+
];
41+
42+
var total = function() {
43+
var sum = 0;
44+
data.forEach(function (el) {
45+
sum = sum + el.amount;
46+
})
47+
48+
return sum;
49+
};
50+
51+
return {
52+
getTotal: function () {
53+
return new Promise(function (resolve, reject) {
54+
resolve(total());
55+
});
56+
},
57+
getAll: function () {
58+
return new Promise(function (resolve, reject) {
59+
resolve(data);
60+
});
61+
},
62+
get: function (id) {
63+
return new Promise(function (resolve, reject) {
64+
$.each(data, function() {
65+
if (this.id == id) {
66+
resolve(this);
67+
}
68+
});
69+
});
70+
},
71+
add: function (item) {
72+
return new Promise(function (resolve, reject) {
73+
data.push(item);
74+
item.id = ++id;
75+
resolve(data);
76+
});
77+
},
78+
update: function (id, updateData) {
79+
return new Promise(function (resolve, reject) {
80+
$.each(data, function (index) {
81+
if (this.id == id) {
82+
updateData.id = id;
83+
data[index] = updateData;
84+
resolve(data);
85+
}
86+
});
87+
});
88+
},
89+
delete: function (id) {
90+
return new Promise(function (resolve, reject) {
91+
$.each(data, function (index) {
92+
if (this.id == id) {
93+
data.splice(index, 1);
94+
resolve();
95+
}
96+
});
97+
});
98+
}
99+
};
100+
})();
101+
102+
103+
104+
var consoleTransactions = function() {
105+
repositoryTransactions.getAll().then(function(data) {
106+
console.log(data);
107+
})
108+
}
109+
110+
var consoleTotal = function() {
111+
repositoryTransactions.getTotal().then(function(total) {
112+
console.log(total)
113+
})
114+
}
115+
116+
117+
118+
var getFormInfo = function() {
119+
return {
120+
amount: parseFloat($('#transactions-amount-input').val()),
121+
tag: $('#transactions-tag-input').val(),
122+
date: $('#transactions-date-input').val()
123+
};
124+
}
125+
126+
$(document).ready(function() {
127+
128+
$('#transactions-form').on('submit', function() {
129+
repositoryTransactions.add(getFormInfo()).then(function() {
130+
$('#transactions-form').find('input').not('[type="submit"]').val('');
131+
})
132+
repositoryTransactions.getAll().then(function(data) {
133+
var $displays = $('#displays').empty();
134+
$.each(data, function() {
135+
$displays.append('<p><span>ID: ' + this.id + '</span><span>/// Amount: ' + this.amount + '</span><span>/// Tag: ' + this.tag + '</span><span>/// Date: ' + this.date + '</span></p>')
136+
})
137+
})
138+
return false;
139+
})
140+
});

0 commit comments

Comments
 (0)