Calculator(잠시중단)

자바스크립트 계산기 잠시중단...

2022.07.19

---

결과부터 말하자면 아무리해도 못했어..
원래 보던 사이트에서 해놓은 JS보고 전혀 이해를 못하겠어서 다시 갈아엎어서 다른데서 찾은거 한줄씩보고 따라쳤는데도 이해 못한게 수두룩하고
결정적으로 계산을 못해 내 계산기는...
아니 보고 따라하는 주제에 변수이름이랑 HTML 명칭은 또 내가 하고싶은대로 했더니 다 따라해도 안되지 바보야...그치만 마지막남은 자존심이였다고...암튼 그래서 계산이 안되는 계산기가 나와버렸다
(그래도 처음 시작할때 버튼 누른게 대체 화면에 어떻게 나오게하는건가로 머리터졌는데 이건 알았어...ㅎ)

일단은 일주일이나 여기에 매달렸기 때문에 지금 상태로 더 매달리면 시간 낭비같아
잠깐 중단하고 이거 보면서 이해못한 부분들 강의를 보고와야겠어
내가 진짜 꼭 계산되게 만든다...

이거 하나 못해서 지금 자존감 다 깍이고 코딩이고 뭐고 때려쳐야되나 고민하게 하는게 짜증나

---

첫번째 시도!

• 일단 html이랑 css부터 문제가 많았음
  계산화면창 띄우는거부터가 진짜...
  div로 하고 input으로 하고...뭐로 해도 맞았겠지만 내가 계속 바꿔대가지고...

• =을 어떻게 지 혼자 길게 있게 하는거지...
  -> 이건 grid로 하면 다 해결되는 문제였다...진짜 오래걸린데다가 못할줄알았는데 겁나 쉬웠어...

• 인풋창에 글자나오게 해야되고...
  일단 숫자를 누르면 나오게 해야되고 머리터진다...
  이걸 인풋창에 어떻게 뜨게해... 지금 계산시키는게 문제가 아니여... 와 input을 애초에 readonly로 넣어줬으면 됐어...(이걸로 해결이 될지는 모르겠지만..) 처음에 div로 아예 만들어줬는데...
  -> 이 난리를 쳤다고...

두번째 시도!

• input으로 하면 안될것같아

• 애들 전체를 또 div로 꼭 해줘야할듯

• div마다 다 class를 지정해줘야되나...

• data-key. data-type이 중요한가봐... 아이고 두야... id를 설정안하고 저걸 설정해서 해야 더 잘되는건가... 왜 뭐는 data-key로 설정해주고 뭐는 class로 다르게 하고...뭘까
  -> dataset 공부해야돼!!

• 이벤트위임이라니 머리터진다

• 그래도 css에 webkit 등등 쓰는 이유는 알았어...

let $calculator= document.querySelector('.calculator');
let $result= document.querySelector('.result');
let $keys= document.querySelector('.calculator__keys');

$keys.addEventListener('click', e => {
    if(!e.target.closest('button')) {
        return;
    }  
    let key= e.target; // key = $keys.addEventListener 
    let keyvalue= key.textContent;
    let resultvalue= $result.textContent;
    let {type}= key.dataset;
    let {previousKeyType}= $calculator.dataset;

    if(type === 'reset') {
        $result.textContent= '0';
    }
    // if (type === 'clear') {
    //     display.textContent = (display.textContent).slice(0,-1);
    // }  뭔지 모르겠음

    if(type === 'number') {
        if(
            resultvalue === '0' ||
            previousKeyType === 'sign'
            ) {
                $result.textContent= keyvalue;
            } else {
                $result.textContent= resultvalue + keyvalue;
            }
    }

    if(type === 'sign') {
        let signkeys= $keys.querySelectorAll('[data-type= "sign"]')
        signkeys.forEach(element => {
            element.dataset.state= ''
        })
        key.dataset.state= 'selected';
        $calculator.dataset.firstnumber= resultvalue;
        $calculator.dataset.sign= key.dataset.key;
    }
    if(type === 'decimal') {
        if(resultvalue.indexOf('.') === -1 ) {
            $result.textContent= resultvalue + keyvalue;
        } else {return;}
    }

    if (type === 'equal') {
        const firstNumber = $calculator.dataset.firstNumber;
        const sign = $calculator.dataset.sign;
        const secondNumber = resultvalue;
        const input = calculate(firstNumber, sign, secondNumber);
        $result.textContent = parseFloat(input.toFixed(7));
    }

    $calculator.dataset.previousKeyType = type;
});

function calculate (firstNumber, sign, secondNumber) {
    firstNumber = parseFloat(firstNumber);
    secondNumber = parseFloat(secondNumber);

    if (sign === 'plus') return firstNumber + secondNumber;
    if (sign === 'minus') return firstNumber - secondNumber;
    if (sign === 'mul') return firstNumber * secondNumber;
    if (sign === 'divide') return firstNumber / secondNumber;
}

---

지금 생각으로는 저 calculate랑 if~equal에 무슨 문제가 있는것같아...
것도 그럴게 저 부분은 진짜 아예 이해를 못하겠어...
아니 selected랑 firstNumber는 뭔데 대체...어디에서 선언한적도 없는데 왜 그냥 변수처럼 쓰고있는거냐고...

메모

이벤트위임(event.target)
parseFloat
dataset
grid