-
Notifications
You must be signed in to change notification settings - Fork 2
/
app.js
93 lines (70 loc) · 2.96 KB
/
app.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
/********************************************************************************************
* What we'll learn
* ----------------
* How to read data from different HTML input types with Separation of Concerns.
*/
/**
* We write methods for calculating the budget in the budgetController, and in the
* controller function, we use the function i.e., we call the functions from the
* budgetController (using budgetCtrl in controller) and then use them accordingly.
*/
// Budget Controller
var budgetController = (function() { // Code related to handling the budget (data) logic
})();
// UI Controller
var UIController = (function(){ // Code to manipulate the UI
/**
* Each and every HTML DOM Element is added in this DOMStrings Object. This object
* is used in document.querySelector(DOMString.<property>) throughout our code.
*/
var DOMStrings = {
inputType: '.add__type',
inputDescription: '.add__description',
inputValue: '.add__value',
inputBtn: '.add__btn'
};
return {
/**
* getInput(): returns the values present currently in the classes of the inputs
* which are .add__type, .add_description & .add__value, referred to as
* inputType, inputDescription & inputValue using the DOMStrings object
* which is defined above.
*/
getInput: function() {
return {
type: document.querySelector(DOMStrings.inputType).value,
description: document.querySelector(DOMStrings.inputDescription).value,
value: document.querySelector(DOMStrings.inputValue).value
};
},
/**
* getDOMStrings(): simply returns the above defined DOMSTrings object to the
* public scope, i.e., wherever UIController.getDOMStrings() is
* called.
*/
getDOMStrings: function() {
return DOMStrings;
}
};
})();
// Global App Controller
var controller = (function(budgetCtrl, UICtrl){ // Code related to handling events
var DOM = UICtrl.getDOMStrings();
var ctrlAddItem = function() {
// 1. Get the field input data
var input = UICtrl.getInput();
console.log(input);
// 2. Add the item to the budget controller
// 3. Add the item to UI
// 4. Calculate the budget
// 5. Display the budget at the UI
// console.log("Its okay!"); // testing
};
// when we press the .add__btn, we should add the expense/income
document.querySelector(DOM.inputBtn).addEventListener("click", ctrlAddItem);
// when we press the Enter/Return Key, we should add the expense/income
document.addEventListener("keypress", function(event) {
if (event.keyCode === 13 || event.which === 13) // If we press the Enter/Return Key
ctrlAddItem();
});
})(budgetController, UIController);