Be insensitive, and keep a lifelong growth mindset.

0%

Put It All Together: The Budget App Project: Part III

1. Project Planning and Architecture: Step 3

1.1. What We Just Completed

What We Just Completed

1.2. Panning: Step 3

Panning: Step 3

2. Updating the Percentages: Controller

  • What you will learn in this section:
    • Reinforcing the concepts and techniques we have learned so far.

Add updatePercentage Method in app controller.

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
// GLOBAL APP CONTROLLER
var controller = (function(budgetCtrl, UICtrl) {
var setupEventListners = function() {
var DOM = UICtrl.getDOMstrings();
document.querySelector(DOM.inputBtn).addEventListener('click', ctrlAddItem);

document.addEventListener('keypress', function(event) {
console.log(event);
if (event.keyCode === 13 || event.which === 13) {
console.log('ENTER was pressed.');
ctrlAddItem();
}
});

document.querySelector(DOM.container).addEventListener('click', ctrlDeleteItem);

};

var updateBudget = function() {
// 1. Calculate the budget
budgetCtrl.calculateBudget();
// 2. Return the budget
var budget = bubdgetctrl.getBudget();
// 3. Display the budget on the UI
console.log(budget);
};

var updatePercentages = function() {

// 1. Calculate percentages
// 2. Read percentages from the budget controller

// 3. Update the UI with the new percentages


};


var ctrlAddItem = function() {
var input, newItem;

// 1. Get the field input data
input = UICtrl.getInput();
console.log(input);

if (input.description !== "" && !isNaN(input.value) && input.value > 0) {
// 2. Add the item to the budget controller
newItem = budgetCtrl.addItem(input.type, input.description, input.value);

// 3. Add the item to the UI
UICtrl.addListItem(newItem, input.type);

// 4. Clear the fields
UICtrl.clearFields();

// 5. Calculate and update budget
updateBudget();

// 6. Calculate and update percentage
updatePercentages();
}
};

var ctrlDeleteItem = function(event) {
console.log(event.target);
var itemID, splitID;
itemID = event.target.parentNode.parentNode.parentNode.parentNode.id;
if (itemID) {
//inc-1
splitID = itemID.split("-");
type = splitID[0];
ID = splitID[1];

// 1. delete the item from the data structure
budgetCtrl.deleteItem(type, ID);

// 2. Delete the item from the UI
UICtrl.deleteListItem(itemID);

// 3. Update and show the new budget
updateBudget();

// 4. Calculate and update percentage
updatePercentages();
}


};

return {
init: function() { //Our public init method
console.log('Application has started.');
UICtrl.displayBudget({
budget: 0,
totalInc: 0,
totalExp: 0,
percentage: -1
});
setupEventListeners();
}
}

})(budgetController, UIController);

3. Updating the Percentages: Budget Controller

  • What you will learn in this lecture
    • How to make our budget controller interact with the Expense prototype.
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

// BUDGET CONTROLLER
var budgetController = (function() {
// Some code
var Expense = function(id, description, value) {
this.id = id;
this.description = description;
this.value = value;
this.percentage = -1;
};

Expense.prototype.calcPercentage = function(totalIncome) {
if (totalIncome > 0) {
this.percentage = Math.round((this.value / totalIncome) * 100);
} else {
this.percentage = -1;
}
};

Expense.prototype.getPercentage = function() {
return this.percentage;
};

var Income = function(id, description, value) {
this.id = id;
this.description = description;
this.value = value;
};

var calculateTotal = function(type) {
var sum = 0;
data.allItems[type].forEach(function(cur) {
sum = sum + cur.value;
});
data.totals[type] = sum;
};

var data = {
allItems: {
exp: [],
inc: []
},
totals: {
exp: 0,
inc: 0
},
budget: 0,
percentage: -1
};

return {
addItem: function(type, des, val) {
var newItem, ID;
//Create new ID
ID = 0;
if (data.allItems[type].length > 0) {
ID = data.allItems[type][data.allItems[type].length - 1].id + 1;
} else {
ID = 0;
}

// Create new item based on 'inc' or 'exp' type
if (type === 'exp') {
newItem = new Expense(ID, des, val);
} else if (type === 'inc') {
newItem = new Income(ID, des, val);
}

//Push it into our data structure
data.allItems[type].push(newItem);

//Return the new element
return newItem;
},

deleteItem: function(type, id) {
var ids, index;
// id = 3
var ids = data.allItems[type].map(function(current) {
return current.id;
});

index = ids.indexOf(id);
if (index !=== -1) {
data.allItems[type].splice(index, 1);
}

},

calculateBudget: function() {
// calculate total income and expenses
calculateTotal('exp');
calculateTotal('inc');
// Calculate the budget: income - expenses
data.budget = data.totals.inc - data.totals.exp;

// Calculate the percentage of income that we spent
if (data.totals.inc > 0) {
data.percentage = Math.round((data.totals.exp / data.totals.inc) * 100);
} else {
data.percentage = -1;
}
},

calculatePercentages: function() {
data.allItems.exp.forEach(fuction(cur) {
cur.calcPercentage(data.totals.inc);
});
},

getPercentages: function() {
var allPerc = data.allItems.exp.map(function(cur) {
return cur.getPercentage();
});
return allPerc;
},

getBudget: function() {
return {
budget: data.budget,
totalInc: data.totals.inc,
totalExp: data.totals.exp,
percentage: data.percentage
};
},

testing: function() {
console.log(data);
}
};

})();

Now we can update our app controller:

1
2
3
4
5
6
7
8
9
10
11
12

var updatePercentages = function() {
// 1. Calculate percentages
budgetCtrl.calculatePercentages();

// 2. Read percentages from the budget controller
var percentages = budgetCtrl.getPercentages();

// 3. Update the UI with the new percentages
console.log(percentages);

};

4. Updating the Percentages: UI Controller

  • What you will learn in this section:
    • How to create our own forEach function but for nodeLists instead of arrays.
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

// UI CONTROLLER
var UIController = (function() {
var DOMstrings = {
inputType: '.add__type',
inputDescription: '.add_description',
inputValue: '.add__value'
inputBtn: '.add_btn',
incomeContainer: '.income__list',
expensesContainer: '.expenses__list',
budgetLabel: '.budget__value',
incomeLabeL: '.budget__income--value',
expensesLabel: '.budget__expenses--value',
percentageLabel: '.budget__expenses--percentage',
container: '.container',
expensesPercLabel: '.item__percentage'
};

return {
getInput: function() {
return {
var type = document.querySelector(DOMstrings.inputType).value,
var description = document.querySelector(DOMstrings.inputDescription).value,
var value = document.querySelector(DOMstrings.inputValue).value
};
},

addListItem: function(obj, type) {
var html, newHtml, element;
// Create HTML string with placeholder text

if (type === 'inc') {
element = DOMstrings.incomeContainer;

html = '<div class="item clearfix" id="inc-%id%"> <div class="item__description">%description%</div><div class="right clearfix"><div class="item__value">%value%</div><div class="item__delete"><button class="item__delete--btn"><i class="ion-ios-close-outline"></i></button></div></div></div>';
} else if (type === 'exp') {
element = DOMstrings.expensesContainer;

html = '<div class="item clearfix" id="exp-%id%"><div class="item__description">%description%</div><div class="right clearfix"><div class="item__value">%value%</div><div class="item__percentage">21%</div><div class="item__delete"><button class="item__delete--btn"><i class="ion-ios-close-outline"></i></button></div></div></div>';
}

// Replace the placeholder text with some actual data
newHtml = html.replace('%id%', obj.id);
newHtml = newHtml.replace('%description%', obj.description);
newHtml = newHtml.replace('%value%', obj.value);

// Insert the HTML into the DOM
document.querySelector(element).insertAdjacentHTML('beforeend', newHtml);
},

deleteListItem: function(selectorID) {
var el = document.getElementById(selectorID);
el.parentNode.removeChild(el);
},

clearFields: function() {
var fields;

fields = document.querySelectorAll(DOMstrings.inputDescription + ', ' + DOMstrings.inputValue);

var fieldsArr = Array.prototype.slice.call(fields);

fieldsArr.forEach(function(current, index, array) {
current.value = "";
});

fieldsArr[0].focus();
},

displayBudget: function(obj) {
document.querySelector(DOMstrings.budgetLabel).textContent = obj.budget;
document.querySelector(DOMstrings.incomeLabel).textContent = totoalInc;
document.querySelector(DOMstrings.expensesLabel).textContent = totalExp;

if(obj.percentage > 0){
document.querySelector(DOMstrings.percentageLabel).textContent = percentage + '%';
} else {
document.querySelector(DOMstrings.percentageLabel).textContent = '---';
}
},

displayPercentages: function(percentages) {
var fields = document.querySelectorAll(DOMstrings.expensesPercLabel);
var nodeListForEach = function(list, callback) {
for (var i = 0; i < list.length; i++) {
callback(list[i], i);
}
};

nodeListForEach(fields, function(current, index) {
if (percentages[index] > 0) {
current.textContent = percentages[index] + "%";
} else {
current.textContent = '---';
}
});
},

getDOMstrings: function() {
return DOMstrings;
}
};
})();

5. Formatting Our Budget Numbers: String Manipulation

  • What you will learn in this lecture
    • How to use different String methods to manipulate strings.
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

// UI CONTROLLER
var UIController = (function() {
var DOMstrings = {
inputType: '.add__type',
inputDescription: '.add_description',
inputValue: '.add__value'
inputBtn: '.add_btn',
incomeContainer: '.income__list',
expensesContainer: '.expenses__list',
budgetLabel: '.budget__value',
incomeLabeL: '.budget__income--value',
expensesLabel: '.budget__expenses--value',
percentageLabel: '.budget__expenses--percentage',
container: '.container',
expensesPercLabel: '.item__percentage'
};

var formatNumber = function(num, type) {
/*
+ or - before number exactly 2 decimal points
comma separating the thousands

2310.4567 => + 2,310.46
2000 -> + 2,000.00
*/

num = Math.abs(num);
num = num.toFixed(2);
numSplit = num.split('.');
int = numSplit[0];
if (int.length > 3) {
int = int.substr(0, int.length - 3) + ',' + int.substr(int.length - 3, 3);
}
dec = numSplit[1];
type === 'exp' ? sign = '-' : sign = '+';
return type + ' ' + int + '.' + dec;
};

return {
getInput: function() {
return {
var type = document.querySelector(DOMstrings.inputType).value,
var description = document.querySelector(DOMstrings.inputDescription).value,
var value = document.querySelector(DOMstrings.inputValue).value
};
},

addListItem: function(obj, type) {
var html, newHtml, element;
// Create HTML string with placeholder text

if (type === 'inc') {
element = DOMstrings.incomeContainer;

html = '<div class="item clearfix" id="inc-%id%"> <div class="item__description">%description%</div><div class="right clearfix"><div class="item__value">%value%</div><div class="item__delete"><button class="item__delete--btn"><i class="ion-ios-close-outline"></i></button></div></div></div>';
} else if (type === 'exp') {
element = DOMstrings.expensesContainer;

html = '<div class="item clearfix" id="exp-%id%"><div class="item__description">%description%</div><div class="right clearfix"><div class="item__value">%value%</div><div class="item__percentage">21%</div><div class="item__delete"><button class="item__delete--btn"><i class="ion-ios-close-outline"></i></button></div></div></div>';
}

// Replace the placeholder text with some actual data
newHtml = html.replace('%id%', obj.id);
newHtml = newHtml.replace('%description%', obj.description);
newHtml = newHtml.replace('%value%', formatNumber(obj.value, type));

// Insert the HTML into the DOM
document.querySelector(element).insertAdjacentHTML('beforeend', newHtml);
},

deleteListItem: function(selectorID) {
var el = document.getElementById(selectorID);
el.parentNode.removeChild(el);
},

clearFields: function() {
var fields;

fields = document.querySelectorAll(DOMstrings.inputDescription + ', ' + DOMstrings.inputValue);

var fieldsArr = Array.prototype.slice.call(fields);

fieldsArr.forEach(function(current, index, array) {
current.value = "";
});

fieldsArr[0].focus();
},

displayBudget: function(obj) {
var type;
obj.budget > 0 ? type = 'inc' : type = 'exp';
document.querySelector(DOMstrings.budgetLabel).textContent = formatNumber(obj.budget, type);
document.querySelector(DOMstrings.incomeLabel).textContent = formatNumber(totoalInc, 'inc');
document.querySelector(DOMstrings.expensesLabel).textContent = formatNumber(totalExp, 'exp');

if(obj.percentage > 0){
document.querySelector(DOMstrings.percentageLabel).textContent = percentage + '%';
} else {
document.querySelector(DOMstrings.percentageLabel).textContent = '---';
}
},

displayPercentages: function(percentages) {
var fields = document.querySelectorAll(DOMstrings.expensesPercLabel);
var nodeListForEach = function(list, callback) {
for (var i = 0; i < list.length; i++) {
callback(list[i], i);
}
};

nodeListForEach(fields, function(current, index) {
if (percentages[index] > 0) {
current.textContent = percentages[index] + "%";
} else {
current.textContent = '---';
}
});
},

getDOMstrings: function() {
return DOMstrings;
}
};
})();

6. Displaying the Current Month and Year

  • What you will learn in this lecture:
    • How to get the current date by using the Date object constructor.

Step1: add displayMonth function in UI controller

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

// UI CONTROLLER
var UIController = (function() {
var DOMstrings = {
inputType: '.add__type',
inputDescription: '.add_description',
inputValue: '.add__value'
inputBtn: '.add_btn',
incomeContainer: '.income__list',
expensesContainer: '.expenses__list',
budgetLabel: '.budget__value',
incomeLabeL: '.budget__income--value',
expensesLabel: '.budget__expenses--value',
percentageLabel: '.budget__expenses--percentage',
container: '.container',
expensesPercLabel: '.item__percentage',
dateLabel: '.budget__title--month'
};

var formatNumber = function(num, type) {
/*
+ or - before number exactly 2 decimal points
comma separating the thousands

2310.4567 => + 2,310.46
2000 -> + 2,000.00
*/

num = Math.abs(num);
num = num.toFixed(2);
numSplit = num.split('.');
int = numSplit[0];
if (int.length > 3) {
int = int.substr(0, int.length - 3) + ',' + int.substr(int.length - 3, 3);
}
dec = numSplit[1];
type === 'exp' ? sign = '-' : sign = '+';
return type + ' ' + int + '.' + dec;
};

return {
getInput: function() {
return {
var type = document.querySelector(DOMstrings.inputType).value,
var description = document.querySelector(DOMstrings.inputDescription).value,
var value = document.querySelector(DOMstrings.inputValue).value
};
},

addListItem: function(obj, type) {
var html, newHtml, element;
// Create HTML string with placeholder text

if (type === 'inc') {
element = DOMstrings.incomeContainer;

html = '<div class="item clearfix" id="inc-%id%"> <div class="item__description">%description%</div><div class="right clearfix"><div class="item__value">%value%</div><div class="item__delete"><button class="item__delete--btn"><i class="ion-ios-close-outline"></i></button></div></div></div>';
} else if (type === 'exp') {
element = DOMstrings.expensesContainer;

html = '<div class="item clearfix" id="exp-%id%"><div class="item__description">%description%</div><div class="right clearfix"><div class="item__value">%value%</div><div class="item__percentage">21%</div><div class="item__delete"><button class="item__delete--btn"><i class="ion-ios-close-outline"></i></button></div></div></div>';
}

// Replace the placeholder text with some actual data
newHtml = html.replace('%id%', obj.id);
newHtml = newHtml.replace('%description%', obj.description);
newHtml = newHtml.replace('%value%', formatNumber(obj.value, type));

// Insert the HTML into the DOM
document.querySelector(element).insertAdjacentHTML('beforeend', newHtml);
},

deleteListItem: function(selectorID) {
var el = document.getElementById(selectorID);
el.parentNode.removeChild(el);
},

clearFields: function() {
var fields;

fields = document.querySelectorAll(DOMstrings.inputDescription + ', ' + DOMstrings.inputValue);

var fieldsArr = Array.prototype.slice.call(fields);

fieldsArr.forEach(function(current, index, array) {
current.value = "";
});

fieldsArr[0].focus();
},

displayBudget: function(obj) {
var type;
obj.budget > 0 ? type = 'inc' : type = 'exp';
document.querySelector(DOMstrings.budgetLabel).textContent = formatNumber(obj.budget, type);
document.querySelector(DOMstrings.incomeLabel).textContent = formatNumber(totoalInc, 'inc');
document.querySelector(DOMstrings.expensesLabel).textContent = formatNumber(totalExp, 'exp');

if(obj.percentage > 0){
document.querySelector(DOMstrings.percentageLabel).textContent = percentage + '%';
} else {
document.querySelector(DOMstrings.percentageLabel).textContent = '---';
}
},

displayPercentages: function(percentages) {
var fields = document.querySelectorAll(DOMstrings.expensesPercLabel);
var nodeListForEach = function(list, callback) {
for (var i = 0; i < list.length; i++) {
callback(list[i], i);
}
};

nodeListForEach(fields, function(current, index) {
if (percentages[index] > 0) {
current.textContent = percentages[index] + "%";
} else {
current.textContent = '---';
}
});
},

displayMonth: function() {
var now, months, month, year;
now = new Date();
// var christmas = new Date(2016, 11);

months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'Auguest', 'September', 'October', 'November', 'December'];
month = new.getMonth();

year = now.getFullYear();
document.querySelector(DOMstrings.dateLabel).textContent = months[month - 1] + ' ' + year;
},



getDOMstrings: function() {
return DOMstrings;
}
};
})();

Step2: call UICtrl.displayMonth() in init() method.

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
// GLOBAL APP CONTROLLER
var controller = (function(budgetCtrl, UICtrl) {
var setupEventListners = function() {
var DOM = UICtrl.getDOMstrings();
document.querySelector(DOM.inputBtn).addEventListener('click', ctrlAddItem);

document.addEventListener('keypress', function(event) {
console.log(event);
if (event.keyCode === 13 || event.which === 13) {
console.log('ENTER was pressed.');
ctrlAddItem();
}
});

document.querySelector(DOM.container).addEventListener('click', ctrlDeleteItem);

};

var updateBudget = function() {
// 1. Calculate the budget
budgetCtrl.calculateBudget();
// 2. Return the budget
var budget = bubdgetctrl.getBudget();
// 3. Display the budget on the UI
console.log(budget);
};

var updatePercentages = function() {

// 1. Calculate percentages
// 2. Read percentages from the budget controller

// 3. Update the UI with the new percentages


};


var ctrlAddItem = function() {
var input, newItem;

// 1. Get the field input data
input = UICtrl.getInput();
console.log(input);

if (input.description !== "" && !isNaN(input.value) && input.value > 0) {
// 2. Add the item to the budget controller
newItem = budgetCtrl.addItem(input.type, input.description, input.value);

// 3. Add the item to the UI
UICtrl.addListItem(newItem, input.type);

// 4. Clear the fields
UICtrl.clearFields();

// 5. Calculate and update budget
updateBudget();

// 6. Calculate and update percentage
updatePercentages();
}
};

var ctrlDeleteItem = function(event) {
console.log(event.target);
var itemID, splitID;
itemID = event.target.parentNode.parentNode.parentNode.parentNode.id;
if (itemID) {
//inc-1
splitID = itemID.split("-");
type = splitID[0];
ID = splitID[1];

// 1. delete the item from the data structure
budgetCtrl.deleteItem(type, ID);

// 2. Delete the item from the UI
UICtrl.deleteListItem(itemID);

// 3. Update and show the new budget
updateBudget();

// 4. Calculate and update percentage
updatePercentages();
}


};

return {
init: function() { //Our public init method
console.log('Application has started.');
UICtrl.displayMonth();
UICtrl.displayBudget({
budget: 0,
totalInc: 0,
totalExp: 0,
percentage: -1
});
setupEventListeners();
}
}

})(budgetController, UIController);

7. Finishing Touches: Improving the UX

  • What you will learn in this lecture
    • How and when to use ‘change’ events.

Add ‘change’ event listener in setupEventListeners function in global app controller

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
// GLOBAL APP CONTROLLER
var controller = (function(budgetCtrl, UICtrl) {
var setupEventListners = function() {
var DOM = UICtrl.getDOMstrings();
document.querySelector(DOM.inputBtn).addEventListener('click', ctrlAddItem);

document.addEventListener('keypress', function(event) {
console.log(event);
if (event.keyCode === 13 || event.which === 13) {
console.log('ENTER was pressed.');
ctrlAddItem();
}
});

document.querySelector(DOM.container).addEventListener('click', ctrlDeleteItem);
document.querySelector(DOM.inputType).addEventListener('change', UICtrl.changedType);
};

var updateBudget = function() {
// 1. Calculate the budget
budgetCtrl.calculateBudget();
// 2. Return the budget
var budget = bubdgetctrl.getBudget();
// 3. Display the budget on the UI
console.log(budget);
};

var updatePercentages = function() {

// 1. Calculate percentages
// 2. Read percentages from the budget controller

// 3. Update the UI with the new percentages


};


var ctrlAddItem = function() {
var input, newItem;

// 1. Get the field input data
input = UICtrl.getInput();
console.log(input);

if (input.description !== "" && !isNaN(input.value) && input.value > 0) {
// 2. Add the item to the budget controller
newItem = budgetCtrl.addItem(input.type, input.description, input.value);

// 3. Add the item to the UI
UICtrl.addListItem(newItem, input.type);

// 4. Clear the fields
UICtrl.clearFields();

// 5. Calculate and update budget
updateBudget();

// 6. Calculate and update percentage
updatePercentages();
}
};

var ctrlDeleteItem = function(event) {
console.log(event.target);
var itemID, splitID;
itemID = event.target.parentNode.parentNode.parentNode.parentNode.id;
if (itemID) {
//inc-1
splitID = itemID.split("-");
type = splitID[0];
ID = splitID[1];

// 1. delete the item from the data structure
budgetCtrl.deleteItem(type, ID);

// 2. Delete the item from the UI
UICtrl.deleteListItem(itemID);

// 3. Update and show the new budget
updateBudget();

// 4. Calculate and update percentage
updatePercentages();
}


};

return {
init: function() { //Our public init method
console.log('Application has started.');
UICtrl.displayMonth();
UICtrl.displayBudget({
budget: 0,
totalInc: 0,
totalExp: 0,
percentage: -1
});
setupEventListeners();
}
}

})(budgetController, UIController);
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

// UI CONTROLLER
var UIController = (function() {
var DOMstrings = {
inputType: '.add__type',
inputDescription: '.add_description',
inputValue: '.add__value'
inputBtn: '.add_btn',
incomeContainer: '.income__list',
expensesContainer: '.expenses__list',
budgetLabel: '.budget__value',
incomeLabeL: '.budget__income--value',
expensesLabel: '.budget__expenses--value',
percentageLabel: '.budget__expenses--percentage',
container: '.container',
expensesPercLabel: '.item__percentage',
dateLabel: '.budget__title--month'
};

var formatNumber = function(num, type) {
/*
+ or - before number exactly 2 decimal points
comma separating the thousands

2310.4567 => + 2,310.46
2000 -> + 2,000.00
*/

num = Math.abs(num);
num = num.toFixed(2);
numSplit = num.split('.');
int = numSplit[0];
if (int.length > 3) {
int = int.substr(0, int.length - 3) + ',' + int.substr(int.length - 3, 3);
}
dec = numSplit[1];
type === 'exp' ? sign = '-' : sign = '+';
return type + ' ' + int + '.' + dec;
};

var nodeListForEach = function(list, callback) {
for (var i = 0; i < list.length; i++) {
callback(list[i], i);
}
};

return {
getInput: function() {
return {
var type = document.querySelector(DOMstrings.inputType).value,
var description = document.querySelector(DOMstrings.inputDescription).value,
var value = document.querySelector(DOMstrings.inputValue).value
};
},

addListItem: function(obj, type) {
var html, newHtml, element;
// Create HTML string with placeholder text

if (type === 'inc') {
element = DOMstrings.incomeContainer;

html = '<div class="item clearfix" id="inc-%id%"> <div class="item__description">%description%</div><div class="right clearfix"><div class="item__value">%value%</div><div class="item__delete"><button class="item__delete--btn"><i class="ion-ios-close-outline"></i></button></div></div></div>';
} else if (type === 'exp') {
element = DOMstrings.expensesContainer;

html = '<div class="item clearfix" id="exp-%id%"><div class="item__description">%description%</div><div class="right clearfix"><div class="item__value">%value%</div><div class="item__percentage">21%</div><div class="item__delete"><button class="item__delete--btn"><i class="ion-ios-close-outline"></i></button></div></div></div>';
}

// Replace the placeholder text with some actual data
newHtml = html.replace('%id%', obj.id);
newHtml = newHtml.replace('%description%', obj.description);
newHtml = newHtml.replace('%value%', formatNumber(obj.value, type));

// Insert the HTML into the DOM
document.querySelector(element).insertAdjacentHTML('beforeend', newHtml);
},

deleteListItem: function(selectorID) {
var el = document.getElementById(selectorID);
el.parentNode.removeChild(el);
},

clearFields: function() {
var fields;

fields = document.querySelectorAll(DOMstrings.inputDescription + ', ' + DOMstrings.inputValue);

var fieldsArr = Array.prototype.slice.call(fields);

fieldsArr.forEach(function(current, index, array) {
current.value = "";
});

fieldsArr[0].focus();
},

displayBudget: function(obj) {
var type;
obj.budget > 0 ? type = 'inc' : type = 'exp';
document.querySelector(DOMstrings.budgetLabel).textContent = formatNumber(obj.budget, type);
document.querySelector(DOMstrings.incomeLabel).textContent = formatNumber(totoalInc, 'inc');
document.querySelector(DOMstrings.expensesLabel).textContent = formatNumber(totalExp, 'exp');

if(obj.percentage > 0){
document.querySelector(DOMstrings.percentageLabel).textContent = percentage + '%';
} else {
document.querySelector(DOMstrings.percentageLabel).textContent = '---';
}
},

displayPercentages: function(percentages) {
var fields = document.querySelectorAll(DOMstrings.expensesPercLabel);
nodeListForEach(fields, function(current, index) {
if (percentages[index] > 0) {
current.textContent = percentages[index] + "%";
} else {
current.textContent = '---';
}
});
},

displayMonth: function() {
var now, months, month, year;
now = new Date();
// var christmas = new Date(2016, 11);

months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'Auguest', 'September', 'October', 'November', 'December'];
month = new.getMonth();

year = now.getFullYear();
document.querySelector(DOMstrings.dateLabel).textContent = months[month - 1] + ' ' + year;
},

changedType: function() {
var fields = document.querySelctorAll(
DOMstrings.inputType + ',' +
DOMstrings.inputDescription + ',' +
DOMstrings.inputValue);

nodeListForEach(fields, function(cur)) {
cur.classList.toggle('red-focus');
}),
document.querySelector(DOMstrings.inputBtn).classList.toggle('red');
},

getDOMstrings: function() {
return DOMstrings;
}
};
})();

8. Our Final Architecture

Our Final Architecture