### Using Controllers
* Use `Controllers`, which are function declarations that contain public and private methods
* For example:
```javascript
var budgetController = function() {
// declare private functions here
var functionOne = function() {
}
// declare other variables and data structures
// in order to return public functions, you must return them in an object!
// CLOSURES!
return {
pubFunctionOne: function() {
},
pubFunctionTwo: function() {
}
}
}
```
---
### HTML DOM Element Creation
* You can create DOM elements in a string
* For content that needs interpolation or a real value, insert a placeholder: `%example%`
* To insert a value into this location: `htmlString.replace("%example%", actualValue)`
* Then re-insert this newly editted string to the DOM element!
---
### JS DOM Element Querying
* Save all queried strings into an object (in case the element needs to be re-queried)
* `var DOMElements = { btn: ".btn"}`
### Javascript Budget App Analysis
* Budget app consists of 3 controllers (Data, UI, and Global)
* Each controller is a function that returns methods (public methods)
---
### BudgetController
* contains 2 object constructors for creating expense and income objects
* contains an object that keeps record of all expenses and incomes
* returns public methods whose purpose is **solely** budget related (getBudget,
calcBudget)
---
### UIController
* contains object that keeps track of all DOM strings used in the UI
* returns public functions that are **solely** related to how the UI displays information
(displayBudget, clearFields, addListItem)
---
### Global Controller
* **Most important** is a function whose parameters are the controllers mentioned above!
* contains **private** functions that interact with the passed in controllers
* setting up event handlers
* returns an `init()` function that is used to call functions it has defined!