image.png

vite+react+mathjs
App.js

import { useState } from 'react'
import './App.css'
import * as math from 'mathjs'

function App() {

  const [formula, setFormula] = useState('');
  const [realFor, setRealFor] = useState('')
  const [rst, setRst] = useState('')

  const formulaAdd = (s, type) => {
    if(type === 'rst') {
      try{
        if(realFor) {
          setRst(Math.round(math.evaluate(realFor || '0') * 1000000000) / 1000000000)
        } else {
          setRst('')
        }
        setFormula('')
        setRealFor('')
      }catch(err) {
        console.error('error:', err)
      }
      return
    }

    setRst('')
    setRealFor(`${realFor}${s.replaceWord || s.word}`)
    setFormula(`${formula}${s.word}`)
  }

  const keyBtns = [
    {label: 'btn1', color: 'rgba(0, 0, 0, 0.1)'},
    {label: 'btn2', color: 'rgba(0, 0, 0, 0.1)'},
    {label: 'lnv', color: 'rgba(0, 0, 0, 0.1)'},
    {label: '(', onClick: (word)=>formulaAdd({word})},
    {label: ')', onClick: (word)=>formulaAdd({word})},
    {label: '%', onClick: (word)=>formulaAdd({word})},
    {label: 'AC', background: '#fda955', onClick: ()=>{setFormula('');setRealFor('');setRst('')}},
    {label: 'x!', onClick: (word) => {formulaAdd({word: '!', replaceWord: '!'})}},
    {label: 'sin', onClick: () => formulaAdd({word: 'sin(', replaceWord: 'sin('})},
    {label: 'cos', onClick: () => formulaAdd({word: 'cos(', replaceWord: 'cos('})},
    {label: '7', background: '#fff', onClick: (word)=>formulaAdd({word})},
    {label: '8', background: '#fff', onClick: (word)=>formulaAdd({word})},
    {label: '9', background: '#fff', onClick: (word)=>formulaAdd({word})},
    {label: '÷', onClick: (word)=>formulaAdd({word, replaceWord: '/'})},
    {label: 'π', onClick: (word) =>formulaAdd({word, replaceWord: 'PI'})},
    {label: 'tan', onClick: () => formulaAdd({word: 'tan(', replaceWord: 'tan('})},
    {label: 'log', onClick: () => formulaAdd({word: 'log(', replaceWord: 'log('})},
    {label: '4', background: '#fff', onClick: (word)=>formulaAdd({word})},
    {label: '5', background: '#fff', onClick: (word)=>formulaAdd({word})},
    {label: '6', background: '#fff', onClick: (word)=>formulaAdd({word}, 'num')},
    {label: '×', onClick: (word)=>formulaAdd({word, replaceWord: '*'})},
    {label: 'e', onClick: (word)=>formulaAdd({word})},
    {label: 'ln', onClick: () => formulaAdd({word: 'ln(', replaceWord: 'log(e,'})},
    {label: '√', onClick: () => formulaAdd({word: 'sqrt(', replaceWord: 'sqrt('})},
    {label: '1', background: '#fff', onClick: (word)=>formulaAdd({word})},
    {label: '2', background: '#fff', onClick: (word)=>formulaAdd({word})},
    {label: '3', background: '#fff', onClick: (word)=>formulaAdd({word})},
    {label: '-', onClick: (word)=>formulaAdd({word})},
    {label: 'EXP', onClick: () => formulaAdd({word: 'e^', replaceWord: 'e^'})},
    {label: 'Ans', color: 'rgba(0, 0, 0, 0.1)'},
    {label: <span>x<sup>y</sup></span>, onClick: () => formulaAdd({word: '^', replaceWord: '^'})},
    {label: '0', background: '#fff', onClick: (word)=>formulaAdd({word})},
    {label: '.', background: '#fff', onClick: (word)=>formulaAdd({word})},
    {label: '=', background: '#747bff', color: '#fff', onClick: (word)=>formulaAdd({word}, 'rst')},
    {label: '+', onClick: (word)=>formulaAdd({word})},
  ]

  return (<div className='calculator'>
    <div className='view'>
      <div className='formula'>{formula}</div>
      <div className='result'>{rst}</div>
    </div>
    <div className='push-button'>
      {keyBtns.map(item => {
        return <span 
          className='calculator-btn' 
          key={item.label}
          style={{ 
            background: item.background || 'transparent', 
            color: item.color || '#000'
          }}
          onClick={() => item.onClick(item.label)}
        >
          {item.label}
        </span>
      })}
    </div>
  </div>)
}

export default App

index.css

.calculator {
  border: rgba(0,0,0,0.01) 1px solid;
  border-radius: 5px;
  padding: 10px;
  width: 520px;
  background-color: rgba(0, 0, 0, 0.1);
  user-select: none;
  .view {
    box-sizing: border-box;
    width: 100%;
    height: 80px;
    background-color: #fff;
    box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    margin-bottom: 10px;
    text-align: right;
    padding: 0 10px;
    font-size: 18px;
    .formula {
      width: 100%;
      height: 40px;
      line-height: 40px;
      /* text-align: right; */
      /* direction: rtl; */
    }
    .result {
      width: 100%;
      height: 40px;
      line-height: 40px;
    }
  }
  .push-button {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(7, 1fr);
    .calculator-btn {
      font-size: 18px;
      box-shadow: -1px -1px rgba(255, 255, 255, 0.3), 1px 1px rgba(0, 0, 0, 0.3);
      display: flex;
      justify-content: center;
      align-items: center;
      height: 40px;
      border-radius: 10px;
      cursor: pointer;
    }
    .calculator-btn:active {
      background-color: rgba(0, 0, 0, 0.1) !important;
    }
  }
}