자바스크립트로 간단한 계산기 만들기

자바스크립트를 이용한 간단한 계산기 만들기

최근 웹 개발에 관심이 높아짐에 따라 자바스크립트를 활용해 여러 기능을 구현해보는 것이 유용합니다. 오늘은 자바스크립트를 이용해서 간단한 계산기를 만들어보는 방법을 알아보겠습니다. 계산기는 기본적인 사칙연산을 수행할 수 있는 기능을 제공하며, 사용자가 쉽게 조작할 수 있도록 만들어질 것입니다.

자바스크립트 계산기의 기본 구조

계산기를 만들기 위해서 먼저 HTML과 CSS로 기본적인 구조를 설정한 후, 자바스크립트를 통해 기능을 추가해야 합니다. HTML에서는 화면에 보여질 요소를 정의하고, CSS를 통해 이들을 스타일링하며, 최종적으로 자바스크립트로 동작을 제어합니다.

HTML 코드 작성하기

계산기의 기본 구조는 아래와 같은 HTML 코드로 생성할 수 있습니다.

<div class="calculator-container">
  <div class="display">0</div>
  <div class="buttons">
    <div class="number" data-value="1">1</div>
    <div class="number" data-value="2">2</div>
    <div class="number" data-value="3">3</div>
    <div class="operator" data-value="+">+</div>
    <div class="number" data-value="4">4</div>
    <div class="number" data-value="5">5</div>
    <div class="number" data-value="6">6</div>
    <div class="operator" data-value="-">-</div>
    <div class="number" data-value="7">7</div>
    <div class="number" data-value="8">8</div>
    <div class="number" data-value="9">9</div>
    <div class="operator" data-value="*">*</div>
    <div class="number" data-value="0">0</div>
    <div class="reset">AC</div>
    <div class="equals">=</div>
    <div class="operator" data-value="/">/</div>
  </div>
</div>

위 코드에서는 계산기의 전체적인 레이아웃과 버튼 구성 요소를 정의하였습니다. 각 버튼은 숫자와 운영자에 해당하는 값을 포함하고, 화면에 표시될 수 있도록 CSS와 함께 커스터마이즈됩니다.

CSS 스타일링

계산기의 외관을 보다 아름답게 만들기 위해 CSS를 사용하여 스타일링을 추가할 수 있습니다. 아래는 간단한 CSS 스타일 예시입니다:

.calculator-container {
  padding: 20px;
  border-radius: 10px;
  background-color: #f0f0f0;
  width: 300px;
  margin: auto;
}
.buttons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.number, .operator, .reset, .equals {
  background-color: #e0e0e0;
  border: 2px solid #ccc;
  border-radius: 5px;
  padding: 20px;
  text-align: center;
  cursor: pointer;
}

위의 CSS 코드는 버튼의 배경색과 테두리 스타일을 정의하고 있습니다. 이러한 스타일은 계산기의 사용자 경험을 향상시키는데 기여하게 됩니다.

자바스크립트로 기능 추가하기

마지막으로, 자바스크립트를 통해 사용자 입력을 처리하고 기본 사칙연산을 수행하는 기능을 구현할 차례입니다. 아래 예시는 간단한 계산기 함수입니다:

const calculator = function(command, a, b) {
  let result = 0;
  if (command === 'add') {
    result = a + b;
  } else if (command === 'subtract') {
    result = a - b;
  } else if (command === 'multiply') {
    result = a * b;
  } else if (command === 'divide') {
    result = a / b;
  } else {
    console.log("알 수 없는 명령입니다.");
  }
  console.log(result);
};
calculator('add', 10, 5); // 15
calculator('subtract', 10, 5); // 5
calculator('multiply', 10, 5); // 50
calculator('divide', 10, 5); // 2

위 코드의 calculator 함수는 명령어와 두 개의 숫자를 받아 해당 연산을 수행하고 그 결과를 로그로 출력합니다. 사용자의 입력에 따라 적절한 연산이 이루어지며, 이는 기본적인 계산기의 핵심 기능입니다.

사용자 인터페이스와 상호작용

사용자가 버튼을 클릭할 때 발생하는 이벤트를 처리하기 위해 자바스크립트의 이벤트 리스너를 활용할 수 있습니다. 예를 들어, 각 버튼에 클릭 이벤트를 등록하여 입력값을 받아올 수 있습니다.

const buttons = document.querySelectorAll('.buttons div');
buttons.forEach(button => {
  button.addEventListener('click', () => {
    // 클릭한 버튼의 값을 가져오고 계산 수행
    const value = button.dataset.value;
    // 여기에 계산 로직 추가
  });
});

이렇게 설정하면 사용자가 버튼을 클릭할 때마다 해당 버튼에 맞는 값을 받아서 계산을 수행하게 됩니다. 이를 통해 사용자와의 상호작용을 극대화할 수 있습니다.

마무리

이번 포스팅에서는 자바스크립트를 이용한 간단한 계산기를 만드는 과정에 대해 알아보았습니다. 기본적인 HTML, CSS, 자바스크립트를 조합하여 실제 사용할 수 있는 계산기를 구현하는 방법을 살펴보았습니다. 이와 같은 간단한 프로젝트는 자바스크립트의 기초를 다지는 데 큰 도움이 되며, 앞으로 더 복잡한 기능도 추가해보면서 실력을 발전시킬 수 있습니다.

계산기 제작을 통해 자바스크립트의 다양한 기능을 배우고 익히셨다면, 이제는 더 많은 응용 프로그램에 도전해보시는 것도 좋겠습니다. 다양한 프로젝트를 통해 여러분만의 웹 개발 역량을 한층 더 강화해보세요.

자주 찾는 질문 Q&A