본문 바로가기
프론트엔드/자바스크립트

프로젝트 - 계산기

Jin-Co 2023. 1. 1. 17:31
반응형

계산기 애플리케이션

 

index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Calculator</title>

  <script src="https://kit.fontawesome.com/833be080c6.js" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="./main.css">
  <script type="module" defer src="./index.js"></script>
</head>

<body>
  <!-- container -->
  <div class="calculator">
    <!-- screen -->
    <div class="screen">
      <p class="input"></p>
      <p class="result"></p>
    </div>

    <!-- button container -->
    <div class="keys">
      <button class="key">1</button>
      <button class="key">2</button>
      <button class="key">3</button>
      <button class="key key-operator">-</button>
      <button class="key">4</button>
      <button class="key">5</button>
      <button class="key">6</button>
      <button class="key key-operator">+</button>
      <button class="key">7</button>
      <button class="key">8</button>
      <button class="key">9</button>
      <button class="key key-operator">*</button>
      <button class="key">.</button>
      <button class="key">0</button>
      <button class="key">c</button>
      <button class="key key-operator">/</button>
      <button class="key">=</button>
    </div>
  </div>
</body>

</html>

main.css

@import url('https://fonts.googleapis.com/css?family=Lato&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  height: 100vh;
  background-color: rgb(149, 193, 231);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 'Lato';
}

.calculator {
  border-radius: 5px;
  width: 375px;  
}

.screen {
  height: 150px;
  background-color: black;
  border-radius:5px 5px 0 0;
  color: #fff;
  font-size: 3.3rem;
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;  
}

p {
  height: 150px;
  width: 100%;  
  overflow: hidden;  
}

.keys {
  border-radius: 0 0 5px 5px;
  padding-top: 1px;
}

button {  
  font-size: 3.3rem;
  border-radius: 5px;
  border: 1px solid #000;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;  
  transition: .3s ease;
}

button:hover {  
  filter: brightness(110%);
}

button:active {  
  transform: scale(.98);
}

.result {
  text-align: right;
}

.keys {  
  height: 100%;
  width: 375px;
  display: grid;  
  background: #fff;
  gap: 5px;
  grid-template: repeat(5, 90px) / repeat(4, 90px);
}

.key:last-child {
  grid-column-start: 1;
  grid-column-end: 5;
}

index.js

import { multiply, divide, add, subtract } from './calculator.js'

// variables
const btnKeysEl = document.querySelectorAll('.key')
const inputEl = document.querySelector('.input')
const resultEl = document.querySelector('.result')
const operatorsEl = document.querySelectorAll('.key-operator')
const operators = ['-', '+', '/', '*']

// event handlers
btnKeysEl.forEach((btn) => {
  btn.addEventListener('click', (e) => {
    if (operators.includes(e.target.textContent)) {
      disableOperators()
    } else {
      enableOperators()
    }

    if (e.target.textContent === '.') {
      if (inputEl.textContent[e.target.textContent.length - 1] === '.') {
        return
      }
    }

    if (e.target.textContent === '=') {
      calculate()
      return
    }

    if (e.target.textContent === 'c') {
      clear()
      return
    }

    if (inputEl.textContent.length >= 12) {
      alert('Maximum reached')
    } else {
      inputEl.textContent += e.target.textContent
    }
  })
})

// functions
function disableOperators() {
  operatorsEl.forEach((el) => {
    el.disabled = true
  })
}

function enableOperators() {
  operatorsEl.forEach((el) => {
    el.disabled = false
  })
}

function calculate() {
  let newArray = []
  let newOperators = []

  newArray = inputEl.textContent.split(/[-+\/*]/).filter((num) => num !== '')
  console.log(newArray)
  newOperators = inputEl.textContent
    .split('')
    .filter((t) => isNaN(+t) && t !== '.')

  while (newOperators.includes('*')) {
    let index = newOperators.indexOf('*')
    let value = multiply(newArray[index], newArray[index + 1])
    newArray.splice(index, 2, value)
    newOperators.splice(index, 1)
  }

  while (newOperators.includes('/')) {
    let index = newOperators.indexOf('/')
    let value = divide(newArray[index], newArray[index + 1])
    newArray.splice(index, 2, value)
    newOperators.splice(index, 1)
  }

  while (newOperators.includes('+')) {
    let index = newOperators.indexOf('+')
    let value = add(newArray[index], newArray[index + 1])
    newArray.splice(index, 2, value)
    newOperators.splice(index, 1)
  }

  while (newOperators.includes('-')) {
    let index = newOperators.indexOf('-')
    let value = subtract(newArray[index], newArray[index + 1])
    newArray.splice(index, 2, value)
    newOperators.splice(index, 1)
  }

  showResult(newArray[0])
}

function showResult(result) {
  resultEl.textContent = result
  inputEl.textContent = result
}

function clear() {
  inputEl.textContent = ''
  resultEl.textContent = ''
}

calculator.js

function multiply(num1, num2) {
  return +num1 * +num2
}

function divide(num1, num2) {
  return +num1 / +num2
}

function add(num1, num2) {
  return +num1 + +num2
}

function subtract(num1, num2) {
  return +num1 - +num2
}

export {multiply, divide, add, subtract}

 

데모

 

Calculator

1 2 3 - 4 5 6 + 7 8 9 * . 0 c / =

jin-co-jcg.vercel.app

 

728x90
반응형

'프론트엔드 > 자바스크립트' 카테고리의 다른 글

JavaScript?  (0) 2023.01.08
프로젝트 - 그림판  (0) 2023.01.04
클라이언트 측 데이터 저장소 - 인덱스드 디비  (0) 2022.12.29
클라이언트 측 데이터 저장소 - 웹 스토리지 (Web Storage)  (0) 2022.12.29
프로젝트 - to do  (0) 2022.12.29

'프론트엔드/자바스크립트' Related Articles

티스토리툴바