까막눈코딩

1. 완성 만들다 보니 꽤 많이 뜯어고치게 되었다. 마지막에 키 입력을 인식하도록 하는데, 이벤트 리스너만 추가하면 될 줄 알았더니 생각보다 문제가 많이 발생했다. 2. Refactoring const inputs = document.querySelectorAll('.keyButtons'); let numStorage = []; let givenKeys = []; let result = 0; let index = 0; inputs.forEach(input => input.addEventListener('click', getValue)); inputs.forEach(input => input.addEventListener('click', displayProcess)); window.addEventListe..

Experience/[Javascript] Calculator 2021. 4. 30. 16:53

조금씩 계산기다운 기능을 추가하는 중이다. 1. Cancelation if (calculator == "C") { numStorage = []; givenKeys = [0]; } 우선 취소 기능을 추가했다. 위 조건문을 saveOrCalc에 입력하여 C 버튼을 누르면 숫자를 저장한 배열과 숫자를 수집하는 배열을 모두 비웠다. const inputs = document.querySelectorAll('.keyButtons'); let givenKeys = []; function getValue () { if (isNaN(this.value)) { saveOrCalc(this.value); } else { givenKeys.push(this.value); givenKeys.splice(-8, givenKey..

Experience/[Javascript] Calculator 2021. 4. 28. 16:59

계산 기능을 만들면서 Display Process도 약간 수정했다. 1. Calculate const inputs = document.querySelectorAll('.keyButtons'); let givenKeys = []; function getValue () { if (isNaN(this.value)) { saveOrCalc(this.value); } else { givenKeys.push(this.value); givenKeys.splice(-8, givenKeys.length - 7); } } let numStorage = []; function saveOrCalc(calculator) { numStorage.push( { value: parseFloat(givenKeys.join('')), ..

Experience/[Javascript] Calculator 2021. 4. 27. 23:21

본격적으로 계산기의 기능들을 만들어 보려고 한다. 계산기의 가장 기본적인 기능 두 가지는, 숫자를 화면에 표시하는 기능과 계산을 수행하는 기능이다. 먼저 숫자를 process 화면에 숫자를 표시하는 기능을 만들었다. 1. HTML process result preview input 버튼에 기능별로 클래스를 추가해야 될지도 모르겠다. 2. CSS :root{ --background-color: #576574; --background-width-size: 320px; --background-height-size: 120px; --key-color: #1dd1a1; --contents-width-size: 50px; --contents-height-size: 50px; --margin-padding-size:..

Experience/[Javascript] Calculator 2021. 4. 25. 18:03

1. 배경 간단한 계산기 앱을 만들어 보고자 한다. 2. 기능 - 화면에 연산 과정을 표시하고, 결과 미리보기를 표시한다. - 각 버튼을 누르거나 키보드를 누르면 이에 맞게 화면에 표시되고 동시에 연산을 수행한다. - 화면의 크기에 따라 반응형으로 제작한다.

Experience/[Javascript] Calculator 2021. 4. 20. 20:33