Last active
November 11, 2021 14:34
-
-
Save furenku/75acc93016f987bff6b8051e087976c6 to your computer and use it in GitHub Desktop.
calculadora
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| let numeroA | |
| let numeroB | |
| let operacion | |
| function sumar( a, b ) { | |
| return a + b | |
| } | |
| function restar( a, b ) { | |
| return a - b | |
| } | |
| function multiplicar( a, b ) { | |
| return a * b | |
| } | |
| function dividir( a, b ) { | |
| return a / b | |
| } | |
| function elegirNumero( numero = 0, posicion = 1 ) { | |
| if( typeof numero !== "number" ) { | |
| throw new Error("Número no es un número") | |
| } | |
| if( typeof posicion !== "number" ) { | |
| throw new Error("Posición no es un número") | |
| } | |
| switch( posicion ) { | |
| case 1: | |
| numeroA = numero | |
| break | |
| case 2: | |
| numeroB = numero | |
| break | |
| } | |
| } | |
| function elegirOperacion( op ) { | |
| if( typeof op !== "function" ) { | |
| throw new Error("Operación no es una función") | |
| } | |
| if( | |
| op != sumar && | |
| op != restar && | |
| op != multiplicar && | |
| op != dividir | |
| ) { | |
| throw new Error("Operación no es una función permitida") | |
| } | |
| operacion = op | |
| } | |
| function ejecutarOperacion() { | |
| if( typeof numeroA !== "number" || typeof numeroB !== "number" ) { | |
| throw new Error("No se han elegido ambos números") | |
| } | |
| try { | |
| let resultado = operacion( numeroA, numeroB ) | |
| console.log( "el resultado es", resultado) | |
| return resultado | |
| } catch( error ) { | |
| console.log( error.message ) | |
| return error | |
| } | |
| } | |
| console.log( "Calculadora" ) | |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Interfaz: | |
| function clicarNumero( numero ) { | |
| console.log( "clicar numero", numero ) | |
| } | |
| function cambiarEntradaNumero( evento ) { | |
| let elemento = evento.target | |
| let valor = elemento.value | |
| console.log( valor ) | |
| } | |
| function prepararInterfaz() { | |
| let entradaA = document.querySelector(".numeroA") | |
| let entradaB = document.querySelector(".numeroB") | |
| entradaA.addEventListener("keyup", function ( evento ) { | |
| let elemento = evento.target | |
| let valor = elemento.value | |
| console.log( valor ) | |
| }) | |
| // en clase de mañana: agregar estas y refactorizar: | |
| entradaA.addEventListener("change", cambiarEntradaNumero) | |
| entradaB.addEventListener("keyup", cambiarEntradaNumero) | |
| entradaB.addEventListener("change", cambiarEntradaNumero) | |
| } | |
| prepararInterfaz() |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| * { | |
| /* out */ | |
| outline: 1px solid #ace; | |
| } | |
| /* Reset */ | |
| html, body { | |
| /* w100p */ | |
| width: 100%; | |
| /* h100p */ | |
| height: 100%; | |
| /* m0 */ | |
| margin: 0; | |
| /* p0 */ | |
| padding: 0; | |
| } | |
| body { | |
| /* dg */ | |
| display: grid; | |
| /* pic */ | |
| place-items: center; | |
| } | |
| #calculadora { | |
| /* w20rem */ | |
| width: 20rem; | |
| } | |
| #calculadora > *, | |
| .numeros > * { | |
| /* p1rem */ | |
| padding: 1rem; | |
| } | |
| header { | |
| /* df */ | |
| display: flex; | |
| } | |
| header input { | |
| /* w50p */ | |
| width: 50%; | |
| } | |
| .teclado { | |
| /* dg */ | |
| display: grid; | |
| /* gtc */ | |
| grid-template-columns: 1fr 1fr 1fr; | |
| } | |
| .operaciones { | |
| /* dg */ | |
| display: grid; | |
| /* gtc */ | |
| grid-template-columns: 1fr 1fr 1fr 1fr; | |
| } | |
| .teclado button, | |
| .operaciones button, | |
| .acciones button | |
| { | |
| /* w100p */ | |
| width: 100%; | |
| } | |
| .teclado button:nth-child(10) { | |
| /* gc */ | |
| grid-column: 2; | |
| } | |
| .acciones { | |
| /* df */ | |
| display: flex; | |
| } | |
| .pantalla { | |
| /* fz2rem */ | |
| font-size: 2rem; | |
| /* tar */ | |
| text-align: right; | |
| } | |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- html:5 --> | |
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Calculadora</title> | |
| <!-- link --> | |
| <link rel="stylesheet" href="calculadora.css"> | |
| </head> | |
| <body> | |
| <!-- #calculadora --> | |
| <div id="calculadora"> | |
| <!-- .pantalla --> | |
| <div class="pantalla"> | |
| 0 | |
| </div> | |
| <!-- .numeros --> | |
| <div class="numeros"> | |
| <!-- header --> | |
| <header> | |
| <!-- input.numeroA[type=number] --> | |
| <input type="number" class="numeroA"> | |
| <!-- input.numeroB[type=number] --> | |
| <input type="number" class="numeroB"> | |
| </header> | |
| <!-- .teclado --> | |
| <div class="teclado"> | |
| <!-- button{$}*10 --> | |
| <button onclick="clicarNumero(1)">1</button> | |
| <button onclick="clicarNumero(2)">2</button> | |
| <button onclick="clicarNumero(3)">3</button> | |
| <button onclick="clicarNumero(4)">4</button> | |
| <button onclick="clicarNumero(5)">5</button> | |
| <button onclick="clicarNumero(6)">6</button> | |
| <button onclick="clicarNumero(7)">7</button> | |
| <button onclick="clicarNumero(8)">8</button> | |
| <button onclick="clicarNumero(9)">9</button> | |
| <button onclick="clicarNumero(0)">0</button> | |
| </div> | |
| </div> | |
| <!-- .operaciones --> | |
| <div class="operaciones"> | |
| <button class="operacion">+</button> | |
| <button class="operacion">-</button> | |
| <button class="operacion">x</button> | |
| <button class="operacion">%</button> | |
| </div> | |
| <!-- .acciones --> | |
| <div class="acciones"> | |
| <!-- button.cancelar --> | |
| <button class="cancelar"> | |
| Cancelar | |
| </button> | |
| <!-- button.ejecutar --> | |
| <button class="ejecutar"> | |
| = | |
| </button> | |
| </div> | |
| </div> | |
| <!-- script --> | |
| <script src="calculadora-frontend.js"></script> | |
| <script src="calculadora-interfaz.js"></script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment