자바스크립트 계산기 잠시중단...
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
