Dreamso Chat & Workflow
import React, { useState } from 'react';
function Calculator() {
const [result, setResult] = useState(0);
const [input, setInput] = useState('');
const handleClick = (value) => {
setInput(input + value);
};
const handleEqual = () => {
setResult(eval(input));
};
const handleClear = () => {
setInput('');
setResult(0);
};
return (
<div className="calculator">
<div className="result">{result}</div>
<div className="input">{input}</div>
<div className="buttons">
<button onClick={() => handleClick('1')}>1</button>
<button onClick={() => handleClick('2')}>2</button>
<button onClick={() => handleClick('3')}>3</button>
<button onClick={() => handleClick('+')}>+</button>
<br />
<button onClick={() => handleClick('4')}>4</button>
<button onClick={() => handleClick('5')}>5</button>
<button onClick={() => handleClick('6')}>6</button>
<button onClick={() => handleClick('-')}>-</button>
<br />
<button onClick={() => handleClick('7')}>7</button>
<button onClick={() => handleClick('8')}>8</button>
<button onClick={() => handleClick('9')}>9</button>
<button onClick={() => handleClick('*')}>x</button>
<br />
<button onClick={handleEqual}>=</button>
<button onClick={handleClear}>C</button>
<button onClick={() => handleClick('/')}>÷</button>
</div>
</div>
);
}
export default Calculator;