✅ TIL

어제 코드스테이츠 계산기에서 다뤘던 user flow를 내 커비 계산기에도 탑재할 것이다.

먼저 action을 number나 operator로 받아주기 위해, class 이름 통일이 필요했다.
현재 내 커비 계산기 파일은 각각 class 이름을 가지고 있기 때문이다.

숫자들은 class = number, 연산자는 operator, C는 clear 등 이름에 맞는 클래스로 코드를 리팩토링했다.

그리고 코드스테이츠 JS 파일을 가져와, 조금 수정해주었다.

const calculator = document.querySelector(".calculator");
const buttons = calculator.querySelector("main");

const operator = document.querySelector(".calculator__operator");
const calculatedResult = document.querySelector(".calculator__result");

function calculate(n1, operator, n2) {
  let result = 0;

  if (operator === "+") {
    result = n1 + n2;
  } else if (operator === "-") {
    result = n1 - n2;
  } else if (operator === "*") {
    result = n1 * n2;
  } else if (operator === "/") {
    result = n1 / n2;
  } else if (operator === "%") {
    result = n1 % n2;
  }

  return String(result);
}

const display = document.querySelector(".calculator_display");
let firstNum, operatorForAdvanced, previousKey, previousNum;

buttons.addEventListener("click", function (event) {
  const target = event.target;
  const action = target.classList[0];
  const buttonContent = target.textContent;

  if (action === "number") {
    if (display.textContent === "0" || previousKey === "operator") {
      display.textContent = buttonContent;
    } else {
      display.textContent += buttonContent;
    }
    previousKey = "number";
  }

  if (action === "operator") {
    firstNum = display.textContent;
    operatorForAdvanced = buttonContent;
    previousKey = "operator";
    if (operatorForAdvanced === buttonContent || display.textContent === "0") {
      display.textContent = buttonContent;
    }
  }

  if (action === "convert") {
    display.textContent = -display.textContent;
  }

  if (action === "decimal") {
  }

  if (action === "clear") {
    display.textContent = "0";
    displayNumber = null;
    firstNum = null;
    previousKey = null;
  }

  if (action === "calculate") {
    let n1 = Number(firstNum);
    let n2 = Number(display.textContent);
    display.textContent = calculate(n1, operatorForAdvanced, n2);
  }
});

살짝 다른 점이 있다면,
+/- 버튼이 있는데 음수와 양수로 변환해주는 기능이므로, 클래스 이름을 convert라고 지었다.

그리고 버튼 관련해서 css 기능을 추가시켜주었다.

* {
  margin: 0;
  padding: 0;
  border: 0px;
  box-sizing: border-box;
  font-family: monospace, cursive;
  color: black;
}

img {
  height: 95vh;
  width: 50%;
  position: absolute;
}

body {
  display: flex;
  justify-content: center; 
  align-items: center; 
  height: 100vh; 
  background: url("./img/kirby.gif") no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.calculator_display {
  justify-content: center;
  text-align: end;
  color: white;
  font-size: 5rem;
  display: flex;
  flex-direction: column;
  flex: 25 0 0;
  margin-right: 2vw;
  margin-top: -2vh;
  margin-bottom: 3vh;
}

main {
  display: flex;
  flex-direction: column;
  justify-content: space-between; 
  align-items: center;
  flex: 75 0 0;
  margin-top: -1vh;
}

.numberline5,
.numberline4,
.numberline3,
.numberline2,
.numberline1 {
  display: flex;
  margin-top: -1vw; 
}

.calculator {
  width: 30vw;
  height: 80vh;
  position: absolute;
  display: flex;
  flex-direction: column;
}

.number,
.operator,
.clear,
.calculate,
.decimal,
.convert,
.double {
  background-color: rgba(250, 217, 222, 0.8);
  width: 7vw;
  height: 5vh;
  font-size: 1.5rem;
  border-radius: 3vw;
  font-weight: bold;
  cursor: pointer;
  margin: 2%;
  border: solid 1px;
  box-shadow: 0.5vh 0.5vh 0.5vh rgb(233, 83, 83);
  transition-duration: 0.2s;
}

button:hover {
  background-color: rgba(249, 201, 208, 0.5);
}

button:active {
  margin-left: 1vw;
  margin-top: 1vh;
  box-shadow: none;
}

.clear,
.convert,
.operator:nth-of-type(3) {
  color: red;
}

.double {
  width: 14.2vw;
}

@media screen and (max-width: 575px) {
  img {
    height: 50vh;
    width: 70%;
    position: absolute;
  }
  .calculator {
    width: 30vw;
    height: 45vh;
    position: absolute;
    display: flex;
    flex-direction: column;
  }
  .calculator_display {
    margin-right: 0vw;
    font-size: 2.5rem;
    text-align: center;
    margin-top: -20vh;
    margin-bottom: 20vh;
  }
  .number,
  .operator,
  .clear,
  .calculate,
  .decimal,
  .convert {
    width: 12vw;
    height: 4vh;
  }
  .double {
    width: 24vw;
  }
}

버튼에 마우스를 올려놨을 때, hover 기능과
버튼을 눌렀을 때, action 기능을 넣어 입체감을 주었다.

매번 무언가 컨텐츠가 생기고 많다는 것은 늘 즐거운 일이다 😚💕