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

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

ขั้นตอนที่ 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 Master Class

(ใช้AIช่วยทำธุรกิจ การตลาด เพิ่มประสิทธิภาพ)

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

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

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

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

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

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

และยังมีการประยุกต์ใช้อื่นๆอีกมากมาย

✅ ใช้ Gemini วางแผนการเรียน พร้อมตัวอย่างการใช้งาน
📝 Workshop เพจสอนพิเศษคณิตศาสตร์
💬 workshop เพจ ธุรกิจสอนภาษาอังกฤษ
📝 ลองให้ ChatGPT สอนเขียน HTML CSS สอนดีไม่พอสรุปได้ดีด้วย
🚀 สอนสร้างหน้าเวปใน5นาที ด้วย ChatGPT ไม่ต้องเขียนCodeเองแม้แต่ตัวเดียว
🎥 AI สรุปคลิป youtube
💡 ใช้ ChatGPT ออกไอเดียทำคลิปวีดีโอ
🗺️ ChatGPT เขียน Mind Mapping ได้ด้วย
🔍 ใช้ Chat GPT ช่วยหารูปได้ด้วย
📚 ล้ำจัด ให้ AI แต่งนิทาน พร้อมภาพประกอบ คอมโบ ChatGPT+Midjourney+Canva
🖌️ ทำรูปสมุดระบายสี ด้วย Midjourney
📈 ใช้ ChatGPT เขียน SEO ตั้งแต่เริ่ม
📊 50 marketing Prompt
🖼️ สร้างรูปฟรีๆผ่าน ChatGPT
🖥️ ใช้ ChatGPT สร้างslide แบบ powerpoint
📺 สร้างคำอธิบายคลิป Youtube เพิ่ม SEO

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

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

FAQ

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

ใส่ความเห็น

อีเมลของคุณจะไม่แสดงให้คนอื่นเห็น ช่องข้อมูลจำเป็นถูกทำเครื่องหมาย *