budgety app 1편

var budgetController = (function() {

})()

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
            }
        },

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

var controller = (function(budgetCtrl, UICtrl) {

    var DOM = UICtrl.getDOMstrings()

    var ctrlAddItem = function() {
        var input = UICtrl.getInput();

        console.log(input)
    } 

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

    document.addEventListener("keypress", function(event) {
        if(event.key === 13) {
            ctrlAddItem()
        }
    })
})(budgetController, UIController) 

Module pattern 구현

 

var budgetController = (function() {})()

 

var UIController = (function() {})()

 

var  controller = (function() {})()

 

사용자가 입력하는 데이터 불러오기

 

1.DOMstrings에 html class 지정

 

2.UIController에서 getInput 메써드를 통해

 

type,description,value에 해당하는 값을 가져온다.

 

3.controller에서 UICotroller의 DOMstrings와 getInput을 가져온다.

 

4.ctrlAddItem 변수에 getInput으로 가져온 값을 console.log한다.

 

5.inputBtn을 누르거나, 엔터를 눌렀을 경우 ctrlAddItem이 작동할 수 있도록 한다.