Calculadora em React

Prévia do material em texto

PÚBLICA 
Calculadora em React com opção de calculadora cientifica 
 
 
 
import React, { useState } from 'react'; 
import './App.css'; 
 
// Componente da Calculadora 
function Calculator() { 
 const [display, setDisplay] = useState('0'); // Estado para exibir o valor na tela 
 const [memory, setMemory] = useState(null); // Estado para armazenar o primeiro número da operação 
 const [operator, setOperator] = useState(null); // Estado para armazenar o operador selecionado 
 
 // Função para limpar o display 
 const clearDisplay = () => { 
 setDisplay('0'); 
 }; 
 
 // Função para atualizar o display com o número pressionado 
 const inputDigit = (digit) => { 
 if (display === '0') { 
 setDisplay(digit); 
 } else { 
 setDisplay(display + digit); 
 } 
 }; 
 
 // Função para realizar operações matemáticas 
 const performOperation = () => { 
 const result = eval(memory + operator + display); // Usando eval para simplificar, mas não recomendado em 
produção 
 setDisplay(result.toString()); 
 setMemory(null); 
 setOperator(null); 
 }; 
 
 return ( 
 <div className="calculator"> 
 <input type="text" className="display" value={display} readOnly /> 
 <div className="buttons"> 
 <button onClick={clearDisplay}>C</button> 
 <button onClick={() => inputDigit('7')}>7</button> 
 <button onClick={() => inputDigit('8')}>8</button> 
 <button onClick={() => inputDigit('9')}>9</button> 
 <button onClick={() => inputDigit('4')}>4</button> 
 <button onClick={() => inputDigit('5')}>5</button> 
 <button onClick={() => inputDigit('6')}>6</button> 
 <button onClick={() => inputDigit('1')}>1</button> 
 <button onClick={() => inputDigit('2')}>2</button> 
 <button onClick={() => inputDigit('3')}>3</button> 
 <button onClick={() => inputDigit('0')}>0</button> 
 <button onClick={() => inputDigit('.')}>.</button> 
 
PÚBLICA 
 <button onClick={() => setOperator('+')}>+</button> 
 <button onClick={() => setOperator('-')}>-</button> 
 <button onClick={() => setOperator('*')}>*</button> 
 <button onClick={() => setOperator('/')}>/</button> 
 <button onClick={performOperation}>=</button> 
 </div> 
 </div> 
 ); 
} 
 
// Componente principal da aplicação 
function App() { 
 return ( 
 <div className="App"> 
 <h1>Calculadora</h1> 
 <Calculator /> 
 </div> 
 ); 
} 
 
export default App;