budgety app 2편

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 data = {
    allItems: {
      exp: [],
      inc: []
    },
    totals: {
      exp: 0,
      inc: 0
    }
  }

  return {
    addItem: function(type, des, val) {
      var newItem

      if(data.allItems[type].length > 0) {
        ID = data.allItems[type][data.allItems[type].length -1].id + 1
      } else {
        ID = 0;
      }

      if(type === "exp") {
        newItem = new Expense(ID, des, val)
      } else if (type === "inc") {
        newItem = new Income(ID, des, val)
      }

      data.allItems[type].push(newItem)

      return newItem
    },

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

var UIController = (function () {
  var DOMstrings = {
    inputType: ".add__type",
    inputDescription: ".add__description",
    inputValue: ".add__value",
    inputBtn: ".add__btn",
  };
  return {
    getInput: function () {
      return {
        type: document.querySelector(DOMstrings.inputType).value,
        description: document.querySelector(DOMstrings.inputDescription).value,
        value: document.querySelector(DOMstrings.inputValue).value,
      };
    },
    
    addListItem: function (obj, type) {
      var html, newHtml, element;

      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>';
      }

      newHtml = html.replace("%id%", obj.id);
      newHtml = newHtml.replace("%description%", obj.description);
      newHtml = newHtml.replace("%value%", obj.value);

      document.querySelector(element).insertAdjacentHTML("beforeend", newHtml);

    },

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

var controller = (function (budgetCtrl, UICtrl) {
  var setupEventListeners = function() {

    var DOM = UICtrl.getDOMstrings()

    document.querySelector(DOM.inputBtn).addEventListener("click", ctrlAddItem)

    document.addEventListener("keypress", function() {
        if(event.keyCode === 13 || event.which === 12) {
            ctrlAddItem()
        }
    })
}

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

    input = UICtrl.getInput();

    newItem = budgetCtrl.addItem(input.type, input.description, input.value)
    
    UICtrl.addListItem(newItem, input.type)
}

return {
    init: function() {
        console.log("Application has started")
        setupEventListeners();
    }
}
})(budgetController, UIController);

controller.init()

budgetController 구성

 

1.Expenses, Income에 대한 생성자 생성

 

2.data 변수에 Expenses와 Income 인스턴스를 담을

 

allItems, totals 생성

 

3. addItem 메써드로  인스턴스를 생성하여 data에 저장

 

List에 item보여주기

 

1.type이 inc이면, income-# 에 관한 HTML을, exp면 expenses-#에 관한 HTML을 수정한다.

 

2.inserAdjacentHTML을 통하여 해당 element에 변경된 HTML을 적용한다.

 

*insertAdjacentHTML이란?

 

insertAdjacentHTML() 메서드는 HTML or XML 같은 특정 텍스트를 파싱하고,

 

특정 위치에 DOM tree 안에 원하는 node들을 추가 한다.

 

  이미 사용중인 element 는 다시 파싱하지 않는다.

 

그러므로 element 안에 존재하는 element를 건드리지 않는다. (innerHtml은 과 좀 다름).

 

innerHtml보다 작업이 덜 드므로 빠르다.

 

developer.mozilla.org/ko/docs/Web/API/Element/insertAdjacentHTML

Element.insertAdjacentHTML()