반응형

🚀 바닐라 JS 계산기

바닐라 자바스크립트로 간단한 계산기를 만들어 보았다. 은근히 신경써주어야 할 부분들이 많았다.. 코드가 너무 지저분 해...... 리팩토링이 필요해 !

🍙 CSS & HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
  </head>
  <body>
    <div class="container">
        <div class="result"><input type="text" class="show" value="0"/></div>
        <button class="cancle" data-Type="ac">C</button>
        <button class="number">7</button>
        <button class="number">8</button>
        <button class="number">9</button>
        <button class="operation" data-Type="operator">+</button>
        <button class="number">4</button>
        <button class="number">5</button>
        <button class="number">6</button>
        <button class="operation" data-Type="operator">-</button>
        <button class="number">1</button>
        <button class="number">2</button>
        <button class="number">3</dbuttoniv>
        <button class="operation" data-Type="operator">*</button>
        <button class="zero number">0</button>
        <button class="operation" data-Type="equals">=</button>
        <button class="operation" data-Type="operator">/</button>
    </button>
    <script src="src/index.js"></script>
  </body>
</html>

 

 

body {
  font-family: sans-serif;
  background-color: black;
}

button {
  color: white;
  font-size: 20px;
}

input {
  background-color: black;
  color: white;
  width: 95%;
  height: 60px;
  text-align: right;
  font-size: 40px;
  border: none;
}

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background-color: black;
  color: white;
  padding: 10px;
}

.result {
  grid-column: 1/4;
}

.zero {
  grid-column: 1/3;
}

.number {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(48, 47, 47, 0.925);
  margin: 3px;
  height: 60px;
  border-radius: 10px;
}

.operation {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: orange;
  margin: 3px;
  height: 60px;
  border-radius: 10px;
}

.cancle {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: gray;
  margin: 3px;
  height: 60px;
  border-radius: 10px;
}

 

🍙 결과 화면

 

🍙 Javascript

// <⚠️ DONT DELETE THIS ⚠️>
import "./styles.css";
// <⚠️ /DONT DELETE THIS ⚠️>

const buttons = document.querySelectorAll("button");
const input = document.querySelector(".show");

let result = "";
let operCheck = false;
let numberCheck = true;
let equlasCheck = true;

function init() {
  buttons.forEach((button) => {
    button.addEventListener("click", () => {
      switch (button.dataset.type) {
        case "operator":
          const oper = button.innerText;
          operator(oper);
          break;
        case "ac":
          clear();
          break;
        case "equals":
          calc();
          break;
        default:
          const number = button.innerText;
          displayNumber(number);
          break;
      }
    });
  });
}

function displayNumber(number) {
  operCheck = true;
  const current = input.value;

  //계산 끝난 후 초기화
  if (equlasCheck) {
    //연산자 눌렸을 시 계산기 값만 초기화
    if (numberCheck) {
      input.value = current === "0" ? number : input.value + number;
    } else {
      input.value = number;
      numberCheck = true;
    }
    result += number;
  } else {
    equlasCheck = true;
    input.value = number;
    result = number;
    console.log(result);
  }
}

function calc() {
  // 지속적으로 계산기 값 누르는 거 확인
  if (input.value === "0") {
    clear();
  } else {
    //마지막이 연산자로 끝나는 지 확인
    if (!operCheck) {
      alert("Calculation is unavailable because of operation.");
    } else {
      // 계속 눌렸을 때 변경
      if (equlasCheck) {
        const final = eval(result);
        input.value = `RESULT : ${final}`;
        result = "";
        equlasCheck = false;
        operCheck = false;
      } else {
        clear();
      }
    }
  }
}

function operator(oper) {
  if (!operCheck) {
    alert("Operation Error.");
  } else {
    operCheck = false;
    result += oper;
    numberCheck = false;
  }
}

function clear() {
  input.value = 0;
  result = "";
  operCheck = false;
  equlasCheck = true;
}

init();
반응형
저작자표시

'Frontend > Vanilla JS' 카테고리의 다른 글

호이스팅(Hoisting)이란 무엇일까?  (0) 2020.08.29
바닐라 자바스크립트 슬라이더 만들기(2)  (2) 2020.08.08
바닐라 자바스크립트 슬라이더 만들기(1)  (4) 2020.08.08

+ Recent posts

티스토리툴바