Closure UI (덧셈 Closure 활용)

초기 화면이다. 숫자를 입력하고 Start 버튼을 누르면...

---

위와 같은 화면이 나온다. 여기서 Add를 누르면 두 값이 더해지며 숫자들이 출력된다.

 

---

Go back을 누르면 초기 화면으로 되돌아간다.

---

(Go back을 누른 화면)

 

---

풀기 전 생각)

 

1) 초기 값을 입력하고 Start를 누를 때,

덧셈에 필요한 함수가 클로저로 초기값을 저장할 수 있어야 한다.

따라서, 함수는 함수를 리턴하는 형태를 가지게 설계해야 한다.

 

2) 모든 버튼들은 계속 사용할 수 있어야 한다. innerHTML을 사용함에도 불구하고 재사용이 가능하도록 설계한다.

 

 

나의 답안)

<div class="container">
</div>
<h1 class="display"></h1>
<script>
    const container = document.querySelector('.container')
    const display = document.querySelector('.display')
    const solution = (firstInput) => {
        return (secondInput) => {
            return firstInput + secondInput
        }
    }
    const startApp = () => {
        display.innerText = ""
        container.innerHTML = `
        <input class="firstInput" type="number">
        <button class="start">Start</button>
        `
        const startButton = document.querySelector('.start')
        const firstinput = document.querySelector('.firstInput')

        startButton.onclick = () => {
            const firstValue = +firstinput.value
            const add = solution(firstValue)            
            container.innerHTML = `
            <input class="secondInput" type="number">
            <button class="add">Add</button>
            <button class="goback">Go back</button>
            `
            display.innerText = `${firstValue} +`


            const addButton = document.querySelector('.add')
            addButton.onclick = () => {
                const secondInput = document.querySelector('.secondInput')
                const secondValue = +secondInput.value
                const value = add(secondValue)
                secondInput.value = null
                display.innerText = `${firstValue} + ${secondValue} = ${value}`
            }
            
            const gobackButton = document.querySelector('.goback')
            gobackButton.onclick = startApp
        }
    }
    startApp()
</script>

 

• 이번에는 정답과 비슷했다.

 

• querySelector를 설정할 때, 그것을 사용하는 element끼리 붙어있도록 설계하여
• 코드의 간결성을 보장할 수 있을듯 하다.