app.js

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

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

    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(current){
        sum = sum + current.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 // IDEA:
        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
        if (type === 'exp'){
          newItem = new Expense (ID, des, val);
        } else if (type === 'inc') {
          newItem = new Income(ID, des, val);
        };

        //push it into data structure
        data.allItems[type].push(newItem);
        //return new element
        return newItem;
      },

      calculateBudget: function(){

        // calc total income and expenses
        calculateTotal('exp');
        calculateTotal('inc');
        //calc budget: income - expenses
        data.budget = data.totals.inc - data.totals.exp;

        //calc perct of income that is spent
        if (data.totals.inc > 0){
           data.percentage = Math.round((data.totals.exp / data.totals.inc) * 100);
         } else {
            data.percentage = -1;
         }

      },

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

    };

}());



//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',
      expensesLabel: '.budget__expenses--value',
      percentageLabel: '.budget__expenses--percentage',
      itemPercent: '.item__percentage'
  }

  return {
    getInput: function(){
        return {
          type: document.querySelector(DOMstrings.inputType).value, //Will be inc or exp
          description: document.querySelector(DOMstrings.inputDescription).value, //Description of input
          value: parseFloat(document.querySelector(DOMstrings.inputValue).value), //Gets input 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="income-%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 {
        element = DOMstrings.expenseContainer;

        html = '<div class="item clearfix" id="expense-%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 placeholder text with data
        newHtml = html.replace('%id%', obj.id);
        newHtml = newHtml.replace('%description%', obj.description);
        newHtml = newHtml.replace('%value%', obj.value);
        //insert html into DOM
        document.querySelector(element).insertAdjacentHTML('beforeend', newHtml);
      },

      clearFields: function(){
        var fields, fieldsArray;

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

        fieldsArray = Array.prototype.slice.call(fields);

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

        fieldsArray[0].focus();
      },

      displayBudget: function(obj){

        document.querySelector(DOMstrings.budgetLabel).textContent = obj.budget;
        document.querySelector(DOMstrings.incomeLabel).textContent = obj.totalInc;
        document.querySelector(DOMstrings.expensesLabel).textContent = obj.totalExp;

        if (obj.percentage > 0){
          document.querySelector(DOMstrings.percentageLabel).textContent = obj.percentage;
          // document.querySelector(DOMstrings.itemPercent).textContent = obj.percentage;
        } else {
          document.querySelector(DOMstrings.percentageLabel).textContent = "--";
        }
      },

      getDOMstrings: function (){
        return DOMstrings;
      }

    };

}());






//Global app controller
var controller = (function(budgetCtrl, uiCtrl) {

    var setupEventListeners = function (){
      var DOM = UIController.getDOMstrings();

      document.querySelector(DOM.inputBtn).addEventListener('click', ctrlAddItem);

      document.addEventListener('keypress', function(event){
        if (event.keyCode === 13 || event.which === 13){
          ctrlAddItem();
        }
    });
  };
  var updateBudget = function(){
    //calculate budget
    budgetCtrl.calculateBudget();
    //return budget
    var budget = budgetCtrl.getBudget();

    //display budget on ui
    uiCtrl.displayBudget(budget);
  };

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

    //get input data
    input = uiCtrl.getInput();

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

      //add new item to ui
      uiCtrl.addListItem(newItem, input.type);

      //clear fields
      uiCtrl.clearFields();

      //calc and update budget
      updateBudget();
    }

  };


  return {
    init: function(){
      console.log('app started');
      setupEventListeners();
    }
  };

})(budgetController,UIController);

controller.init();