app.js

// Budget CONTROLLER
var budgetController = (function() {

    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(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
            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 type inc or exp
            if(type === 'exp') {
                newItem = new Expense(ID, des, val);
            } else if(type === 'inc') {
                newItem = new Income(ID, des, val);
            }

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

            // And return it
            return newItem;
        },

        testing : function() {
            console.log(data);
        },
        deleteItem : function(type, id) {

            var ids, index;
            //id = 3
            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-expense
            data.budget = data.totals.inc - data.totals.exp;

            //calculate the % of income we spent
            if(data.totals.inc > 0) {
                data.percentage = Math.round((data.totals.exp / data.totals.inc) * 100);
            } else {
                data.percentage = -1;
            }           
                  
            return data.totals.type; 
        },
        calculatePercentages : function() {
            data.allItems.exp.forEach(function(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
        }
    }
    }

})();

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

// UI CONTROLLER
var UIController = (function() {

    var DOMStrings =  {

        inputType : '.add__type',
        inputDescription : '.add__description',
        inputValue : '.add__value',
        inputBTN : '.add__btn',
        incomeContainer : '.income__list',
        expenseContainer : '.expenses__list',
        budgetLabel : '.budget__value',
        incomeLabel : '.budget__income--value',
        expenseLabel : '.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 two decimal places
        comma separating thousands
        */
       var int, numSplit, decimal, sign;
       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, int.length);
       }
       decimal = numSplit[1];        
       return (type === 'exp' ?  sign = '-' : sign = '+') + ' ' + int +'.'+ decimal;
    }


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

   return  {
       getInput : function() {
           return {
             type : document.querySelector(DOMStrings.inputType).value, // will be either inc or exp
             description : document.querySelector(DOMStrings.inputDescription).value,
             value : parseFloat(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.expenseContainer;
            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 actual data
           newHtml = html.replace('%id%',obj.id);
           newHtml = newHtml.replace('%description%',obj.description);
           newHtml = newHtml.replace('%value%',formatNumber(obj.value,type));
           
           //Insert the HMTL into the DOM
           document.querySelector(element).insertAdjacentHTML('beforeend', newHtml);


       },

       getDOMStrings : function() {
           return DOMStrings;
       },

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

       clearFields : function() {
           var fields, fieldsArr;
           
           fields = document.querySelectorAll(DOMStrings.inputDescription + ', '+ DOMStrings.inputValue);
    
           fieldsArr = Array.prototype.slice.call(fields);

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

           fieldsArr[0].focus();
       },

       displayBudget : function(budget) {
       
        document.querySelector(DOMStrings.incomeLabel).textContent = formatNumber(budget.totalInc,'inc');
        document.querySelector(DOMStrings.expenseLabel).textContent = formatNumber(budget.totalExp, 'exp');
        document.querySelector(DOMStrings.budgetLabel).textContent = formatNumber(budget.budget, (budget.budget > 0 ? type = 'inc' : type = 'exp'));
        if(budget.percentage === -1) {
            document.querySelector(DOMStrings.percentageLabel).textContent = '---';
        } else {
            document.querySelector(DOMStrings.percentageLabel).textContent = budget.percentage + '%';
        }
       
       },

       displayMonth : function() {
           
            var now, year, month, months;
            
            now = new Date();
            year = now.getFullYear();
            month = now.getMonth();
            months = [
                'January',
                'February',
                'March',
                'April',
                'May',
                'June',
                'July',
                'August',
                'September',
                'October',
                'November',
                'December'
            ];
            document.querySelector(DOMStrings.dateLabel).textContent = months[month] + ' ' + year;  
       },
       changedType : function() {

            var fields = document.querySelectorAll(
                DOMStrings.inputType + ',' +
                DOMStrings.inputDescription + ',' +
                DOMStrings.inputValue);

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

                document.querySelector(DOMStrings.inputBTN).classList.toggle('red');
       },
       displayPercentages : function(percentages) {
           
            var fields = document.querySelectorAll(DOMStrings.expensesPercLabel);    
            //IMP :: use callbacks         
            
            nodeListForEach(fields, function(current, index){
                if(percentages[index] > 0) {
                    current.textContent = percentages[index] + '%';
                } else {
                    current.textContent = '---';
                }               
            });       
       }       
    }
})();

//GLOBAL APP CONTROLLER
var controller = (function(budgetCtrl, UICtrl){

    var setupEventListeners = function() {
        //var DOM  = UICtrl.getDOMStrings();

        document.querySelector(DOM.inputBTN).addEventListener("click", ctrlAddItem);

        document.addEventListener('keypress', function(event){
    
            if(event.keyCode === 13 || event.which === 13) {
                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 = budgetCtrl.getBudget();

          //console.log(budget);
          // 3. Display the budget on user interface
          UICtrl.displayBudget(budget);

  
    }
   
    var updatePercentages = function() {

        // 1. Calculate percentages
        budgetCtrl.calculatePercentages();

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

        // 3. update ui with new percentages
        UICtrl.displayPercentages(percentages);


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

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

        if(input.description !== '' && !isNaN(input.value) && input.value > 0) {

            // 2. Add item in 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 percentages
            updatePercentages();

        }   

        console.log("It works!!");
    }

    var ctrlDeleteItem = function(event) {
        var itemID, splitID, type, ID;
        
        itemID = event.target.parentNode.parentNode.parentNode.parentNode.id;

        if(itemID) {

            //inc-1
            splitID = itemID.split('-');
            type = splitID[0];
            ID = parseInt(splitID[1]);

            //1. Delete dataitem from datastructure
            budgetCtrl.deleteItem(type, ID);
            //2. Delete the item from UI
            UIController.deleteListItem(type + '-' + ID);

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

            //4. calculate and update percentages
            updatePercentages();
        }

    }
    return {
        init : function() {
            console.log("Application has started...");
            UICtrl.displayMonth();
            UICtrl.displayBudget({
                budget : 0,
                totalInc : 0,
                totalExp : 0,
                percentage : 0
            });

            setupEventListeners();
        }
    };
   
})(budgetController, UIController);

controller.init();