Toy Project - 계산기

아이폰 기본 계산기처럼 만들어 보았다. 

솔직히 과제 3주차까지는 CSS 뭐야... 자바스크립트를 더 잘해봐야지 싶었는데,

다른 사람들이 과제를 한 것을 보니, 자극 받더라.

스각코 사람들과 카드맞추기 게임만들고, 3일만에 후다닥 만들어보았다.

기본 사칙연산되는데... 예외처리가 완벽하지 않아서 사칙연산이 연속적으로 입력될경우 에러난다 ^ㅠ^

 

•  깨달은 점 & 나아진 점
  • 좀 더 가독성이 좋은 코드를 쓰는 것을 고려하기 시작했다. (띄어쓰기나 인덴팅을 더 고려했다.)
  • ev 요소를 함수의 인자로 넣어서 주르륵 돌릴 수 있다. 
• 개선할 점
  • 셀렉터를 남용하는건 아닐까? 
    • forEach와 querySelector를 활용해보자.
  • 왜 여전히 코드가 복잡해보이는지 모르겠다. 아마 적절한 메소드를 내가 못사용하는 곳이 분명이 있을거다.
  • string 을 숫자로 변환할 때, 1을 곱해서 만들지 말고 type을 선언해주자.

 

 

const $outcome = document.querySelector(".outcome");
const $reset = document.getElementById("reset");
const $sign = document.getElementById("sign");
const $percent = document.getElementById("percent");
const $division = document.getElementById("division");
const $multiplication = document.getElementById("multiplication");
const $subtraction = document.getElementById("subtraction");
const $addition = document.getElementById("addition");
const $equal = document.getElementById("equal");
const $numbers = document.querySelector(".numbers");
 
let saveNumber = {
  first: "",
  second: "",
  temporary: "",
  result: "",
};
 
let operator = "";
let dotDetector = false;
 
function showNumber (ev){
  let $number = ev.target.dataset.number;
    if (saveNumber.first === "") {
        if ($number === "dot"){
            $outcome.textContent = "";
        } else {
            $outcome.textContent = "";
            saveNumber.first = $number;
        }
    } else {
        if ($number === "dot") {
            if(!dotDetector){
                saveNumber.first += ".";
                dotDetector = true;
            }
        } else {
            saveNumber.second = $number;
            saveNumber.first += saveNumber.second;
            console.log(saveNumber);
        }
    }
    if(saveNumber.first === "00"){
      saveNumber.first = "";
      $outcome.textContent = "0";
    } else {
      $outcome.textContent = saveNumber.first;
    }
};
 
function reset () {
  pettyReset();
  saveNumber.temporary = "";
  saveNumber.result = "";
  operator = "";
  $outcome.textContent = "";
}
 
function pettyReset () {
  saveNumber.first = "";
  saveNumber.second = "";
}
function changeSign () {
  if (saveNumber.result === ""){
    saveNumber.result = saveNumber.first;
    saveNumber.result *= -1;
    $outcome.textContent = saveNumber.result;
  } else {
    saveNumber.first *= -1;
    $outcome.textContent = saveNumber.first;
  }
}
 
function percentage () {
  if (saveNumber.result === ""){
    saveNumber.result = saveNumber.first;
  }
  saveNumber.result= Number(saveNumber.result) / 100;
  $outcome.textContent = `${saveNumber.result}`;
  pettyReset();
}
 
function calculation () {
  saveNumber.temporary = saveNumber.first;
  if(saveNumber.result ===""){
    saveNumber.result = saveNumber.temporary;
    } else {
      switch(operator) {
        case "multiplication" :
            saveNumber.result = Number(saveNumber.temporary) * Number(saveNumber.result);
        break;
 
        case "division" :
          saveNumber.result = Number(saveNumber.result) / Number(saveNumber.temporary);
        break;
 
        case "subtraction" :
          saveNumber.result = Number(saveNumber.result) - Number(saveNumber.temporary);
        break;
 
        case "addition" :
          saveNumber.result = Number(saveNumber.temporary) + Number(saveNumber.result);
        break;
      }
    }
    $outcome.textContent = `${saveNumber.result}`;
    pettyReset();
    console.log(saveNumber);
}
 
$numbers.addEventListener("click", showNumber);
$reset.addEventListener("click", reset);
$sign.addEventListener("click", changeSign);
$percent.addEventListener("click", percentage);
$equal.addEventListener("click", calculation);
$multiplication.addEventListener("click", () => {
  operator = "multiplication";
  calculation();
});
$division.addEventListener("click", () => {
  operator = "division";
  calculation();
});
$subtraction.addEventListener("click", () => {
  operator = "subtraction";
  calculation();
});
$addition.addEventListener("click", () => {
  operator = "addition";
  calculation();
});
 
$outcome.addEventListener("click", () => {
  saveNumber.first = saveNumber.first.substr(0,saveNumber.first.length-1);
  saveNumber.second = saveNumber.first.slice(saveNumber.first.length-1, saveNumber.first.length);
  $outcome.textContent = `${saveNumber.first}`;
});