【コーディング】電卓

<div class="calculator">
  <textarea id="display" rows="1" readonly></textarea>

  <div class="buttons">
    <button class="orange" 
            data-action="clear">AC</button>
    <button data-value="(">(</button>
    <button data-value=")">)</button>
    
    <button data-value="/">÷</button>
    <button data-value="7">7</button>
    <button data-value="8">8</button>
    <button data-value="9">9</button>
   
    <button data-value="*">×</button>
    <button data-value="4">4</button>
    <button data-value="5">5</button>
    <button data-value="6">6</button>
    
    <button data-value="-">−</button>
    <button data-value="1">1</button>
    <button data-value="2">2</button>
    <button data-value="3">3</button>

    <button data-value="+">＋</button>
    <button data-value="0">0</button>
    <button data-value=".">.</button>
    <button class="orange double" 
            data-action="calculate">＝</button>
  </div>

</div>

$bg-body: #f2f2f2;
$bg-calculator: #38bdf8;
$bg-display: #fff3d6;
$bg-btn: #2a2a2a;
$bg-blue: #2196f3;
$bg-orange: #ff9800;
$bg-black: #1a1a1a;
$text-dark: #333;
$text-light: #fff;


* {
  box-sizing: border-box;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: $bg-body;
  font-family: system-ui, sans-serif;
}

.calculator {
  width: 300px;
  background: $bg-calculator;
  padding: 25px;
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);

  #display {
    width: 100%;
    height: 100px;
    max-height: calc(1.4em * 3);
    overflow-y: auto;
    overflow-x: hidden;
    margin-bottom: 12px;
    font-size: 24px;
    background: $bg-display;
    text-align: right;
    border: none;
    border-radius: 8px;
    box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.6),
      inset 0 -1px 0 rgba(255, 255, 255, 0.08);
  }

  .buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;

    button {
      height: 52px;
      font-size: 18px;
      border: none;
      border-radius: 10px;
      background: $bg-btn;
      color: $text-light;
      cursor: pointer;
      box-shadow: 0 4px 0 $bg-black, 
        0 8px 14px rgba(0, 0, 0, 0.5);
      transition: transform 0.05s ease, 
        box-shadow 0.05s ease;

      &:active {
        transform: scale(0.95);
        opacity: 0.8;
        transform: translateY(4px);
        box-shadow: 0 0 0 $bg-black, 
          0 4px 8px rgba(0, 0, 0, 0.4);
      }

      &.double {
        grid-row: span 2;
        grid-column: span 2;
      }
      &.orange {
        background: $bg-orange;
        color: $text-light;
      }
    }
      button[data-value="/"],
      button[data-value="*"],
      button[data-value="-"],
      button[data-value="+"],
      button[data-value="("],
      button[data-value=")"] {
        background: $bg-blue;
        box-shadow: 0 4px 0 $bg-black, 
          0 8px 14px rgba(0, 0, 0, 0.5);
      }
  }
}

const $display = $("#display");
const $buttons = $(".buttons button");

$buttons
  .not('[data-action="calculate"]')
  .on("click", function () {
    const action = $(this).data("action");
    const value = $(this).data("value");

    if (action === "clear") {
      $display.val("");
      return;
    }

    if (value !== undefined) {
      const current = $display.val();
      $display.val(current + value);
    }
  });

$buttons
  .filter('[data-action="calculate"]')
  .on("click", function () {
    try {
      const expression = $display.val();
      const result = eval(expression);
      const formatted = Number(result).toLocaleString("ja-JP");

      $display.val(expression + "\n＝" + formatted);
      $display.scrollTop($display[0].scrollHeight);

    } catch {
      $display.val("Error");
    }
  });