AdSense

網頁

2026/3/10

Claude Code 做個簡單的計算機

用Claude Code做的第一個小東西，簡單計算機。


建立一個空資料夾calculator，在該目錄開啟Claude Code後，，輸入以下prompt。

Make a simple html calculator with only plus, minus, multiply, divide calculation features, so I can use it on my
browser. The backround should be black, and the button line and text are white.



● Write(calculator.html)
  ⎿  Wrote 256 lines to calculator.html
       1 <!DOCTYPE html>
       2 <html lang="en">
       3 <head>
       4   <meta charset="UTF-8">
       5   <meta name="viewport" content="width=device-width, initial-scale=1.0">
       6   <title>Calculator</title>
       7   <style>
       8     * {
       9       margin: 0;
      10       padding: 0;
     … +246 lines (ctrl+o to expand)

● Created calculator.html at C:\my\dev\claude-code\calculator\calculator.html.

  Open it in your browser and you'll get a calculator with:
  - Black background, white borders and text
  - +, −, ×, ÷ operations
  - C (clear), +/- (toggle sign), % (percent)
  - Expression shown above the current value
  - Keyboard support: digits, operators, Enter/=, Escape to clear, Backspace to delete

產生的html檔calculator.html內容，點兩下在瀏覽器開啟就是一個簡單的計算機。



calculator.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Calculator</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      background-color: #000;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      font-family: Arial, sans-serif;
    }

    .calculator {
      border: 1px solid #fff;
      border-radius: 8px;
      overflow: hidden;
      width: 280px;
    }

    .display {
      background-color: #000;
      color: #fff;
      text-align: right;
      padding: 16px 20px;
      border-bottom: 1px solid #fff;
    }

    .display .expression {
      font-size: 14px;
      color: #aaa;
      min-height: 20px;
      margin-bottom: 4px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .display .result {
      font-size: 36px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

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

    button {
      background-color: #000;
      color: #fff;
      border: 1px solid #fff;
      padding: 20px;
      font-size: 18px;
      cursor: pointer;
      transition: background-color 0.1s;
    }

    button:hover {
      background-color: #222;
    }

    button:active {
      background-color: #444;
    }

    button.operator {
      color: #fff;
    }

    button.equals {
      background-color: #fff;
      color: #000;
    }

    button.equals:hover {
      background-color: #ccc;
    }

    button.equals:active {
      background-color: #aaa;
    }

    button.wide {
      grid-column: span 2;
    }
  </style>
</head>
<body>
  <div class="calculator">
    <div class="display">
      <div class="expression" id="expression"></div>
      <div class="result" id="result">0</div>
    </div>
    <div class="buttons">
      <button onclick="clearAll()">C</button>
      <button onclick="toggleSign()">+/-</button>
      <button onclick="percent()">%</button>
      <button class="operator" onclick="setOperator('/')">÷</button>

      <button onclick="inputDigit('7')">7</button>
      <button onclick="inputDigit('8')">8</button>
      <button onclick="inputDigit('9')">9</button>
      <button class="operator" onclick="setOperator('*')">×</button>

      <button onclick="inputDigit('4')">4</button>
      <button onclick="inputDigit('5')">5</button>
      <button onclick="inputDigit('6')">6</button>
      <button class="operator" onclick="setOperator('-')">−</button>

      <button onclick="inputDigit('1')">1</button>
      <button onclick="inputDigit('2')">2</button>
      <button onclick="inputDigit('3')">3</button>
      <button class="operator" onclick="setOperator('+')">+</button>

      <button class="wide" onclick="inputDigit('0')">0</button>
      <button onclick="inputDecimal()">.</button>
      <button class="equals" onclick="calculate()">=</button>
    </div>
  </div>

  <script>
    let currentValue = '0';
    let previousValue = '';
    let operator = null;
    let shouldResetDisplay = false;

    const resultEl = document.getElementById('result');
    const expressionEl = document.getElementById('expression');

    function updateDisplay() {
      resultEl.textContent = currentValue;
    }

    function inputDigit(digit) {
      if (shouldResetDisplay) {
        currentValue = digit;
        shouldResetDisplay = false;
      } else {
        currentValue = currentValue === '0' ? digit : currentValue + digit;
      }
      updateDisplay();
    }

    function inputDecimal() {
      if (shouldResetDisplay) {
        currentValue = '0.';
        shouldResetDisplay = false;
        updateDisplay();
        return;
      }
      if (!currentValue.includes('.')) {
        currentValue += '.';
        updateDisplay();
      }
    }

    function setOperator(op) {
      if (operator && !shouldResetDisplay) {
        calculate(true);
      }
      previousValue = currentValue;
      operator = op;
      shouldResetDisplay = true;

      const symbols = { '+': '+', '-': '−', '*': '×', '/': '÷' };
      expressionEl.textContent = previousValue + ' ' + symbols[op];
    }

    function calculate(chaining = false) {
      if (!operator || !previousValue) return;

      const prev = parseFloat(previousValue);
      const curr = parseFloat(currentValue);
      let result;

      switch (operator) {
        case '+': result = prev + curr; break;
        case '-': result = prev - curr; break;
        case '*': result = prev * curr; break;
        case '/':
          if (curr === 0) {
            currentValue = 'Error';
            expressionEl.textContent = '';
            operator = null;
            previousValue = '';
            updateDisplay();
            return;
          }
          result = prev / curr;
          break;
      }

      const symbols = { '+': '+', '-': '−', '*': '×', '/': '÷' };
      if (!chaining) {
        expressionEl.textContent = previousValue + ' ' + symbols[operator] + ' ' + currentValue + ' =';
      }

      currentValue = parseFloat(result.toPrecision(10)).toString();
      operator = null;
      previousValue = '';
      shouldResetDisplay = true;
      updateDisplay();
    }

    function clearAll() {
      currentValue = '0';
      previousValue = '';
      operator = null;
      shouldResetDisplay = false;
      expressionEl.textContent = '';
      updateDisplay();
    }

    function toggleSign() {
      currentValue = (parseFloat(currentValue) * -1).toString();
      updateDisplay();
    }

    function percent() {
      currentValue = (parseFloat(currentValue) / 100).toString();
      updateDisplay();
    }

    document.addEventListener('keydown', (e) => {
      if (e.key >= '0' && e.key <= '9') inputDigit(e.key);
      else if (e.key === '.') inputDecimal();
      else if (e.key === '+') setOperator('+');
      else if (e.key === '-') setOperator('-');
      else if (e.key === '*') setOperator('*');
      else if (e.key === '/') { e.preventDefault(); setOperator('/'); }
      else if (e.key === 'Enter' || e.key === '=') calculate();
      else if (e.key === 'Escape') clearAll();
      else if (e.key === 'Backspace') {
        if (currentValue.length > 1) {
          currentValue = currentValue.slice(0, -1);
        } else {
          currentValue = '0';
        }
        updateDisplay();
      }
    });
  </script>
</body>
</html>

標籤：

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)

AdSense