-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
266 lines (219 loc) · 8.17 KB
/
script.js
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
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
window.addEventListener('load', init);
// Inputs
let depensesInputs = [];
let recettesInputs = [];
let epargneInputs = [];
// Buttons
let refreshButton;
let resetButton;
let addOtherDepenseBtn;
let addOtherRecetteBtn;
// Budget results
let depensesResult = 0;
let recettesResult = 0;
let epargneResult = 0;
let resultatBudget = 0;
// Total result display elements
let depensesResultTotalSpan;
let recettesResultTotalSpan;
let epargneResultTotalSpan;
let resultResultTotalSpan;
// Message element
let messageEl;
// Others field counts
let othersCounts = {
'depense': 0,
'recette': 0
};
// Others field wrapper
let depensesOtherWrapper;
let recettesOtherWrapper;
/**
* Init
*/
function init() {
// Get inputs and convert returned NodeList to Array
// to be able to push later
depensesInputs = Array.from(document.querySelectorAll('#depenses input'));
recettesInputs = Array.from(document.querySelectorAll('#recettes input'));
epargneInputs = Array.from(document.querySelectorAll('#epargne input'));
// Get message element
messageEl = document.getElementById('message');
// Get refresh button and add listener
refreshButton = document.getElementById('refresh');
refreshButton.addEventListener('click', function () {
computeResult();
refreshResult();
});
// Get reset button and add listener
resetButton = document.getElementById('reset');
resetButton.addEventListener('click', function () {
reset();
refreshResult(true);
});
// Get "autres" buttons and add listeners
addOtherDepenseBtn = document.getElementById('add-depense-button');
addOtherRecetteBtn = document.getElementById('add-recette-button');
addOtherDepenseBtn.addEventListener('click', function () { onAddOtherBtnClick('depense'); });
addOtherRecetteBtn.addEventListener('click', function () { onAddOtherBtnClick('recette'); });
// Get "autres" wrappers
depensesOtherWrapper = document.getElementById('other-depenses-wrapper');
recettesOtherWrapper = document.getElementById('other-recettes-wrapper');
// Get result total spans
depensesResultTotalSpan = document.querySelector('#depenses h2 span.total');
recettesResultTotalSpan = document.querySelector('#recettes h2 span.total');
epargneResultTotalSpan = document.querySelector('#epargne h2 span.total');
resultResultTotalSpan = document.querySelector('#result h2 span.total');
// Initial compute & refresh in case of
// default input values set in the HTML
computeResult();
refreshResult(true);
}
/**
* Compute result
*/
function computeResult() {
// Reset to 0
depensesResult = 0;
recettesResult = 0;
epargneResult = 0;
// Compute depenses
for (let i = 0; i < depensesInputs.length; i++) {
const element = depensesInputs[i];
// Get the value and unforce number type
let val = +element.value;
// Check if there is a multiply attribute to multiply the value by
const multiply = element.getAttribute('multiply');
if (multiply) {
val *= multiply;
}
depensesResult += val;
}
// Compute recettes
for (let i = 0; i < recettesInputs.length; i++) {
const element = recettesInputs[i];
let val = +element.value;
recettesResult += val;
}
// Compute epargne
for (let i = 0; i < epargneInputs.length; i++) {
const element = epargneInputs[i];
let val = +element.value;
epargneResult += val;
}
// Compute budget result and round it to 2 decimals
resultatBudget = Math.round((recettesResult - depensesResult - epargneResult) * 100) / 100;
}
/**
* Refresh results on page
*
* doNotUpdateMessage (boolean):
* If true, the budget result message
* won't be displayed.
*/
function refreshResult(doNotUpdateMessage) {
depensesResultTotalSpan.innerHTML = depensesResult + '€';
recettesResultTotalSpan.innerHTML = recettesResult + '€';
epargneResultTotalSpan.innerHTML = epargneResult + '€';
resultResultTotalSpan.innerHTML = resultatBudget + '€';
// Update budget message
if (!doNotUpdateMessage) {
if (resultatBudget < 0) {
// If budget negative
messageEl.innerHTML = 'Budget negatif !..';
messageEl.setAttribute('class', 'negative');
resultResultTotalSpan.setAttribute('class', 'negative');
} else if (resultatBudget == 0) {
// If budget null
messageEl.innerHTML = 'Budget tout juste, prudence !';
messageEl.setAttribute('class', 'neutral');
resultResultTotalSpan.setAttribute('class', 'neutral');
} else {
// If budget positive
messageEl.innerHTML = 'Budget positif !';
messageEl.setAttribute('class', 'positive');
resultResultTotalSpan.setAttribute('class', 'positive');
// Propose based on result
messageEl.innerHTML += '<br>';
if (resultatBudget < 25) {
messageEl.innerHTML += 'Vous pouvez vous faire plaisir à la boulangerie !';
} else if (resultatBudget >= 25 && resultatBudget < 150) {
messageEl.innerHTML += 'Est-ce qu\'on s\'achèterait pas un petit jeux-video ?';
} else if (resultatBudget >= 150 && resultatBudget < 250) {
messageEl.innerHTML += 'C\'est le moment de s\'offrir un vélo tout neuf !';
} else if (resultatBudget >= 250 && resultatBudget < 500) {
messageEl.innerHTML += 'Mon smartphone commence à se faire vieux !';
} else if (resultatBudget >= 500 && resultatBudget < 1000) {
messageEl.innerHTML += 'Une petite semaine à Disney ne ferait pas d\'mal.';
} else if (resultatBudget >= 1000 && resultatBudget < 2000) {
messageEl.innerHTML += 'Un ordinateur flambant neuf, ça doit se trouver dans ce budget.';
} else if (resultatBudget >= 2000) {
messageEl.innerHTML += 'Je peux m\'acheter une voiture tous les mois, elle est pas belle la vie ?!';
}
}
}
}
/**
* Iterate throw each inputs arrays and clear the value
*/
function reset() {
depensesResult = 0;
recettesResult = 0;
epargneResult = 0;
resultatBudget = 0;
for (let i = 0; i < depensesInputs.length; i++) {
depensesInputs[i].value = null;
}
for (let i = 0; i < recettesInputs.length; i++) {
recettesInputs[i].value = null;
}
for (let i = 0; i < epargneInputs.length; i++) {
epargneInputs[i].value = null;
}
// Clear message
messageEl.innerHTML = '';
// Remove others fields
depensesOtherWrapper.innerHTML = '';
recettesOtherWrapper.innerHTML = '';
}
/**
* Function called when we click on "autre" add button
*
* type (string):
* Either 'depense' or 'recette', defines where
* the new field will be inserted.
*/
function onAddOtherBtnClick(type) {
// Increment others fields count
othersCounts[type]++;
const inputId = 'input-autre-' + type + '-' + othersCounts[type];
// Prompt for field name
const name = window.prompt('Nom ?')
// Create field
const newField = document.createElement('div');
newField.setAttribute('class', 'field');
// Append label if name provided
if (name && name.length > 0) {
const label = document.createElement('label');
label.setAttribute('for', inputId);
label.appendChild(document.createTextNode(name));
newField.appendChild(label);
}
// Create input element and set attributes
const input = document.createElement('input');
input.setAttribute('type', 'number');
input.setAttribute('id', inputId);
input.setAttribute('placeholder', '0,00');
newField.appendChild(input);
// Append euro symbol
newField.appendChild(document.createTextNode(' €'));
// Push the newly created field in the appropriate
// array and append to wrapper
if (type == 'depense') {
depensesInputs.push(input);
depensesOtherWrapper.appendChild(newField);
} else if (type == 'recette') {
recettesInputs.push(input);
recettesOtherWrapper.appendChild(newField);
}
}