เครื่องคิดเลข

🎯 เราจะมาสร้างเครื่องคิดเลขกันครับ! แต่จะทำทีละขั้นให้เห็นพัฒนาการชัดๆ

ขั้นตอนที่ 1:

"สร้างเครื่องคิดเลขพื้นฐานที่มีปุ่มตัวเลข 0-9 และเครื่องหมายบวก ลบ คูณ หาร"

สิ่งที่ได้คือ เครื่องคิดเลขหน้าตาดี ใช้งานง่าย มีปุ่มครบถ้วน เหมือนเครื่องคิดเลขในมือถือเลยครับ!

ขั้นตอนที่ 2:

"เพิ่มความสามารถในการแสดงประวัติการคำนวณ 5 รายการล่าสุด"

ตอนนี้เราจะเห็นว่าเคยคำนวณอะไรไปบ้าง เผื่อต้องกลับมาดูผลเก่าๆ ไม่ต้องจดใส่กระดาษแล้วครับ 😄

ขั้นตอนที่ 3:

"เพิ่มฟังก์ชั่นพิเศษ เช่น %, √, x², และปุ่มล้างข้อมูล"

เริ่มเทพขึ้นแล้ว! คำนวณได้ซับซ้อนขึ้น ทั้งคิดเปอร์เซ็นต์ ถอดรูท ยกกำลัง จัดเต็มเลยครับ

ขั้นตอนที่ 4:

"ให้สามารถคลิกที่ประวัติการคำนวณเพื่อนำผลลัพธ์มาใช้ต่อได้"

เจ๋งขึ้นอีก! แค่คลิกที่ประวัติ ก็เอาผลลัพธ์มาคำนวณต่อได้เลย ไม่ต้องพิมพ์ใหม่ให้เมื่อยนิ้วครับ

ขั้นตอนที่ 5:

"เพิ่มการแสดงผลแบบ Scientific notation และความสามารถในการ Export ประวัติการคำนวณ"

ขั้นสุดท้าย เพิ่มฟีเจอร์ระดับโปร! รองรับการคำนวณตัวเลขแบบวิทยาศาสตร์ แถมยังเซฟประวัติออกมาเป็นไฟล์ได้ด้วย

💡 เคล็ดลับ: แต่ละขั้นตอนผมตั้งใจให้มันต่อยอดกันไปเรื่อยๆ ครับ เริ่มจากง่ายๆ ค่อยๆ เพิ่มความสามารถ จนกลายเป็นเครื่องคิดเลขเทพๆ ที่ใช้งานได้จริง

Code โปรแกรม

import React, { useState } from 'react';
import { Download } from 'lucide-react';

const Calculator = () => {
  const [display, setDisplay] = useState('0');
  const [firstNumber, setFirstNumber] = useState(null);
  const [operation, setOperation] = useState(null);
  const [newNumber, setNewNumber] = useState(false);
  const [history, setHistory] = useState([]);
  const [isScientific, setIsScientific] = useState(false);

  const formatDisplay = (number) => {
    if (number === 'Error') return number;
    const num = parseFloat(number);
    if (isScientific && (Math.abs(num) >= 1e10 || (Math.abs(num) < 1e-7 && num !== 0))) {
      return num.toExponential(5);
    }
    return number;
  };

  const numberClick = (number) => {
    if (display === '0' || newNumber) {
      setDisplay(number.toString());
      setNewNumber(false);
    } else {
      setDisplay(display + number.toString());
    }
  };

  const operationClick = (op) => {
    setFirstNumber(parseFloat(display));
    setOperation(op);
    setNewNumber(true);
  };

  const calculateSpecial = (operation) => {
    const number = parseFloat(display);
    let result;
    let calculation;

    switch (operation) {
      case '%':
        result = number / 100;
        calculation = { expression: `${number}% = ${formatDisplay(result)}`, result: result };
        break;
      case '√':
        result = Math.sqrt(number);
        calculation = { expression: `√${number} = ${formatDisplay(result)}`, result: result };
        break;
      case 'x²':
        result = number * number;
        calculation = { expression: `${number}² = ${formatDisplay(result)}`, result: result };
        break;
      default:
        return;
    }

    setDisplay(result.toString());
    setHistory(prevHistory => [calculation, ...prevHistory.slice(0, 4)]);
    setNewNumber(true);
  };

  const calculateResult = () => {
    if (firstNumber === null || operation === null) return;
    
    const secondNumber = parseFloat(display);
    let result;

    switch (operation) {
      case '+':
        result = firstNumber + secondNumber;
        break;
      case '-':
        result = firstNumber - secondNumber;
        break;
      case '×':
        result = firstNumber * secondNumber;
        break;
      case '÷':
        result = secondNumber !== 0 ? firstNumber / secondNumber : 'Error';
        break;
      default:
        return;
    }

    const calculation = {
      expression: `${formatDisplay(firstNumber)} ${operation} ${formatDisplay(secondNumber)} = ${formatDisplay(result)}`,
      result: result,
      timestamp: new Date().toISOString()
    };
    
    setHistory(prevHistory => [calculation, ...prevHistory.slice(0, 4)]);
    setDisplay(result.toString());
    setFirstNumber(null);
    setOperation(null);
    setNewNumber(true);
  };

  const useHistoryResult = (calculation) => {
    setDisplay(calculation.result.toString());
    setFirstNumber(null);
    setOperation(null);
    setNewNumber(true);
  };

  const exportHistory = () => {
    const exportData = {
      calculations: history,
      exportDate: new Date().toISOString(),
      totalCalculations: history.length
    };

    const blob = new Blob([JSON.stringify(exportData, null, 2)], { type: 'application/json' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = `calculator-history-${new Date().toISOString().slice(0,10)}.json`;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    URL.revokeObjectURL(url);
  };

  const clear = () => {
    setDisplay('0');
    setFirstNumber(null);
    setOperation(null);
    setNewNumber(false);
  };

  const clearEntry = () => {
    setDisplay('0');
    setNewNumber(false);
  };

  const clearHistory = () => {
    setHistory([]);
  };

  const backspace = () => {
    if (display.length > 1) {
      setDisplay(display.slice(0, -1));
    } else {
      setDisplay('0');
    }
  };

  const toggleScientific = () => {
    setIsScientific(!isScientific);
  };

  const buttonClass = "w-16 h-12 m-1 text-xl font-semibold rounded-lg focus:outline-none";
  const numberButtonClass = `${buttonClass} bg-gray-200 hover:bg-gray-300 active:bg-gray-400`;
  const operationButtonClass = `${buttonClass} bg-orange-400 hover:bg-orange-500 active:bg-orange-600 text-white`;
  const specialButtonClass = `${buttonClass} bg-blue-400 hover:bg-blue-500 active:bg-blue-600 text-white`;
  const clearButtonClass = `${buttonClass} bg-red-400 hover:bg-red-500 active:bg-red-600 text-white`;

  return (
    <div className="flex gap-4">
      <div className="p-4 bg-white rounded-xl shadow-lg">
        <div className="mb-4">
          <div className="p-4 bg-gray-100 rounded-lg">
            <div className="text-right text-3xl font-semibold overflow-hidden">
              {formatDisplay(display)}
            </div>
          </div>
          <div className="flex justify-end mt-2">
            <button 
              onClick={toggleScientific}
              className={`px-3 py-1 text-sm rounded-lg ${
                isScientific ? 'bg-blue-500 text-white' : 'bg-gray-200'
              } hover:opacity-80`}
            >
              Scientific
            </button>
          </div>
        </div>
        
        <div className="grid grid-cols-4 gap-1">
          <button onClick={clearEntry} className={clearButtonClass}>CE</button>
          <button onClick={clear} className={clearButtonClass}>C</button>
          <button onClick={backspace} className={clearButtonClass}>⌫</button>
          <button onClick={() => operationClick('÷')} className={operationButtonClass}>÷</button>

          <button onClick={() => calculateSpecial('%')} className={specialButtonClass}>%</button>
          <button onClick={() => calculateSpecial('√')} className={specialButtonClass}>√</button>
          <button onClick={() => calculateSpecial('x²')} className={specialButtonClass}>x²</button>
          <button onClick={() => operationClick('×')} className={operationButtonClass}>×</button>

          <button onClick={() => numberClick(7)} className={numberButtonClass}>7</button>
          <button onClick={() => numberClick(8)} className={numberButtonClass}>8</button>
          <button onClick={() => numberClick(9)} className={numberButtonClass}>9</button>
          <button onClick={() => operationClick('-')} className={operationButtonClass}>-</button>

          <button onClick={() => numberClick(4)} className={numberButtonClass}>4</button>
          <button onClick={() => numberClick(5)} className={numberButtonClass}>5</button>
          <button onClick={() => numberClick(6)} className={numberButtonClass}>6</button>
          <button onClick={() => operationClick('+')} className={operationButtonClass}>+</button>

          <button onClick={() => numberClick(1)} className={numberButtonClass}>1</button>
          <button onClick={() => numberClick(2)} className={numberButtonClass}>2</button>
          <button onClick={() => numberClick(3)} className={numberButtonClass}>3</button>
          <button onClick={calculateResult} className={`${operationButtonClass} row-span-2`}>=</button>

          <button onClick={() => numberClick(0)} className={`${numberButtonClass} col-span-2`}>0</button>
          <button onClick={() => numberClick('.')} className={numberButtonClass}>.</button>
        </div>
      </div>

      <div className="p-4 bg-white rounded-xl shadow-lg min-w-[300px]">
        <div className="flex justify-between items-center mb-4">
          <h2 className="text-xl font-semibold">ประวัติการคำนวณ</h2>
          <div className="flex gap-2">
            <button 
              onClick={exportHistory}
              className="px-3 py-1 text-sm bg-green-500 hover:bg-green-600 active:bg-green-700 text-white rounded-lg flex items-center gap-1"
              disabled={history.length === 0}
            >
              <Download size={16} />
              Export
            </button>
            <button 
              onClick={clearHistory}
              className="px-3 py-1 text-sm bg-red-400 hover:bg-red-500 active:bg-red-600 text-white rounded-lg"
            >
              ล้างประวัติ
            </button>
          </div>
        </div>
        {history.length === 0 ? (
          <div className="text-gray-500 text-center py-4">ยังไม่มีประวัติการคำนวณ</div>
        ) : (
          <div className="space-y-2">
            {history.map((calc, index) => (
              <button
                key={index}
                onClick={() => useHistoryResult(calc)}
                className="w-full p-2 text-left bg-gray-100 hover:bg-gray-200 active:bg-gray-300 rounded-lg transition-colors cursor-pointer"
              >
                {calc.expression}
              </button>
            ))}
          </div>
        )}
      </div>
    </div>
  );
};

export default Calculator;

ขอขอบคุณที่ไว้วางใจ

เราอยู่ในยุคที่ AI กำลังจะมาพลิกโลกการทำงาน

คอร์สนี้เหมาะสำหรับ

ผู้ประกอบการ เจ้าของธุรกิจ ที่อยากนำ AI มาช่วยเพิ่มผลกำไร เพิ่มยอดขาย
มนุษย์เงินเดือน ที่ต้องการอัพสกิลตัวเอง เพื่อเพิ่มโอกาสในอาชีพการงาน
ผู้ที่สนใจเทคโนโลยี AI และต้องการนำไปประยุกต์ใช้ในชีวิตประจำวัน
นักลงทุน ที่ต้องการให้ AI ช่วยตัดสินใจในการลงทุน

สิ่งที่คุณจะได้เรียนรู้ในคอร์ส

ปูพื้นฐาน AI และ ChatGPT จากระดับเริ่มต้นจนใช้งานเป็น
เทคนิคการ Prompt ให้ AI ทำงานตามที่เราต้องการ
ประยุกต์ใช้ AI ในด้านต่างๆ เช่น การตลาด, Content Creation, SEO
สร้างรูปภาพ วิดีโอ ด้วย AI อย่าง DALL-E
เรียนรู้การใช้ AI ช่วยเหลือในการลงทุน
AI อีกมากมายที่จะช่วยให้ชีวิดและธุรกิจของคุณง่ายขึ้น

ไอเดียทำคลิปไม่มีตัน

ช่วยเราทำคลิป tiktok ยอดวิวพุ่งๆ ไม่ต้องยิงAds

FAQ

ทั้งหมดนี้เพียง 3,990 บาท ก่อนปรับเป็นราคาเต็ม 8,990 ในอนาคต