Scribd
Upload
8 views

Proyecto calculadora con react

Uploaded by

Damian Darbo
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
8 views

Proyecto calculadora con react

Uploaded by

Damian Darbo
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 5

App.

js
import './App.css';
import logo from './imagenes/logocalcu.jpg'
import Boton from './componentes/Boton';
import Pantalla from './componentes/Pantalla';
import BotonClear from './componentes/BotonClear';
import { useState } from 'react';
import { evaluate } from 'mathjs';

function App() {
const[input, setInput] = useState('');
const agregarInput = val => {
setInput (input + val);
}
const calcularResultado = () => {
if (input) {
try {
const resultado = evaluate(input);
setInput(resultado.toString());
} catch (error) {
setInput('Error');
}
} else {
alert("Ingrese un valor");
}
}
return (
<div className="App">
<div className="contenedor-calculadora">
<Pantalla input={input} />
<div className="fila">
<Boton manejarClic={agregarInput}>1</Boton>
<Boton manejarClic={agregarInput}>2</Boton>
<Boton manejarClic={agregarInput}>3</Boton>
<Boton manejarClic={agregarInput}>+</Boton>
</div>
<div className="fila">
<Boton manejarClic={agregarInput}>4</Boton>
<Boton manejarClic={agregarInput}>5</Boton>
<Boton manejarClic={agregarInput}>6</Boton>
<Boton manejarClic={agregarInput}>-</Boton>
</div>
<div className="fila">
<Boton manejarClic={agregarInput}>7</Boton>
<Boton manejarClic={agregarInput}>8</Boton>
<Boton manejarClic={agregarInput}>9</Boton>
<Boton manejarClic={agregarInput}>*</Boton>
</div>
<div className="fila">
<Boton manejarClic={agregarInput}>0</Boton>
<Boton manejarClic={agregarInput}>.</Boton>
<Boton manejarClic={calcularResultado}>=</Boton>
<Boton manejarClic={agregarInput} >/</Boton>
</div>
<div className="fila">
<BotonClear manejarClear={()=> setInput('')}>
Clear
</BotonClear>
</div>

</div>
</div>
);
}
export default App;

index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));


root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>

</body>
</html>

COMPONENTES
BOTON.jsx
import React from "react";
import '../hojas-de-estilo/Boton.css'
function Boton(props){
function esOperador(valor){
return isNaN(valor) && (valor !== '.') && (valor !== '=');
}
return( <div className={`boton-contenedor $
{esOperador(props.children) ? 'operador' : '' }`.trimEnd()}
onClick={()=>props.manejarClic(props.children)}>
{props.children}
</div>
);
}export default Boton;

Botón.clear.jsx
import React from 'react';
import '../hojas-de-estilo/BotonClear.css';
const BotonClear = (props)=>(
<div className='boton-clear'
onClick={props.manejarClear}>
{props.children}
</div>
);export default BotonClear;

Pantalla.jsx
import React from 'react';
import'../hojas-de-estilo/Pantalla.css';
const Pantalla = ( {input} )=>(
<div className='input'>
{input}
</div>
);export default Pantalla;

You might also like