<h1>🔮 계산기</h1>

<div class="input-box">
  <input id="firstNumber" type="number">
  <select name="calculation" id="calculation">
    <option value="plus" selected>+</option>
    <option value="minus">-</option>
    <option value="multiplication">×</option>
    <option value="division">÷</option> 
  </select>
  <input id="lastNumber" type="number">

  &nbsp;<button type="button" onclick="calculation()">계산하기</button>
</div>

<p id="result" class="result">=</p>

$input-size-s: 50px;
$gab: 10px;
$border-color: #e6e6e6;
$radius: 5px;
$radius-circle: 50%;
$button-size-m: 120px;
$main-color: #755DE3;
$font-size-m: 18px;

h1 {
  color: $main-color;
}
.input-box {
  input, select, button {
    border: 1px solid $border-color;
    padding: $gab;
    border-radius: $radius;
    font-size: $font-size-m;
    outline: transparent;
  }
  input {
    width: $input-size-s;
  }
  select {
    border: none;
  }
  button {
    min-width: $button-size-m;
    background-color: $main-color;
    color: #fff;
  }
}

.result {
  padding: 0 $gab;
  font-size: $font-size-m;
  color: $main-color;
}
View Compiled 
function calculation() {
  const select = document.getElementById("calculation");
  const type = select.options[select.selectedIndex].value;
  const firstNumber = document.getElementById("firstNumber").value;
  const lastNumber = document.getElementById("lastNumber").value;
  const result = document.getElementById("result");
  
  if(type === "plus") {
    result.innerText = plus(Number(firstNumber),Number(lastNumber));
  } else if(type === "minus") {
    result.innerText = minus(Number(firstNumber),Number(lastNumber));
  } else if(type === "multiplication") {
    result.innerText = multiplication(Number(firstNumber),Number(lastNumber));
  } else if(type === "division") {
    result.innerText = division(Number(firstNumber),Number(lastNumber));
  }
}

function plus(num1, num2) {
  return num1 + num2;
}

function minus(num1, num2) {
  return num1 - num2;
}

function multiplication(num1, num2) {
  return num1 * num2;
}

function division(num1, num2) {
  return num1 / num2;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.