Fin Calculadora JS

sorgazb · Jun 22, 2024 · 1f65a75 · 1f65a75
1 parent 0fa459e
commit 1f65a75
Show file tree

Hide file tree

Showing 4 changed files with 74 additions and 136 deletions.
diff --git a/css/estilos.css b/css/estilos.css
@@ -1,49 +1,57 @@
+html{
+    background-color: #A0B4C8;
+}
+.container{
+    margin: auto;
+    height: 500px;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+}
+
+h1{
+    margin: auto;
+    letter-spacing: 5px;
+    color: #24395D;
+    font-family: "Bungee", sans-serif;
+    font-weight: 400;
+}
 
 #calculadora{
-    border: 6px solid black;
+    padding: 10px;
+    margin: auto;
+    border: 3px solid black;
     border-radius: 10px;
     background-color: #7f8291;
-    display: flex;
-    position: relative;
-    align-items: center;
+    box-shadow: 10px 10px 10px black;
+}
+
+#calculadora tr{
+    padding: 5px;
+}
+
+#teclado td{
+    margin: auto;
+    padding: 5px;
 }
 
 .pantalla{
     text-align: right;
-}
-/* .pantalla{
-    border: 3px solid black;
+    border: 1px solid black;
     border-radius: 10px;
     background-color: rgb(217, 233, 151,0.3);
     font-family: "Silkscreen", sans-serif;
     font-weight: 400;
-    font-size: 50px;
+    font-size: 30px;
+    max-width: 250px;
     font-style: normal;
-    height: 100%;
-    width: 100%;
-} */
-
-#calculadora tr{
-    display: block;
-}
-
-#calculadora td{
-    border: 1px solid black;
-}
-
-tr{
-
-}
-
-#calculador tr{
-    margin-top: 300px;
+    margin-bottom: 5px;
+    height: 40px;
+    padding-inline: 8px;
 }
 
 .numeros{
-
-}
-
-/* .numeros{
    background-color: #06C1FB;
    color: #18467D;
    border: 3px solid #18467D;
@@ -55,7 +63,7 @@ tr{
    font-weight: 700;
    font-style: normal;
    cursor: pointer;
-} */
+}
 
 .numeros:hover{
     background-color: #18467D;
@@ -66,20 +74,19 @@ tr{
     text-shadow: 0px 4px 4px black;
 }
 
-/* .operaciones{
+.operaciones{
     background-color: #18467D;
     color: #06C1FB;
     border: 3px solid #06C1FB;
     border-radius: 10px;
     font-size: 20px;
-    width: 70px;
     font-family: "Ubuntu", sans-serif;
     font-weight: 700;
     font-style: normal;
     width: 100%;
     height: 100%;
     cursor: pointer;
-} */
+}
 
 .operaciones:hover{
     background-color: #06C1FB;
@@ -88,3 +95,9 @@ tr{
     transition: all 300ms;
     box-shadow: inset 0px 4px 4px #18467D;;
 }
+
+@media screen and (max-width: 420px) {
+    #calculadora{
+        transform: scale(0.8);
+    }
+}
diff --git a/css/prueba.css b/css/prueba.css
diff --git a/index.html b/index.html
@@ -5,13 +5,17 @@
     <meta http-equiv='X-UA-Compatible' content='IE=edge'>
     <title>JavaScript Calculator</title>
     <meta name='viewport' content='width=device-width, initial-scale=1'>
-    <link rel='stylesheet' type='text/css' media='screen' href='css/prueba.css'>
+    <link rel='stylesheet' type='text/css' media='screen' href='css/estilos.css'>
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Silkscreen:wght@400;700&display=swap" rel="stylesheet">
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@700&display=swap" rel="stylesheet">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Bungee&family=Jaro:opsz@6..72&display=swap" rel="stylesheet">
     <script src='js/app.js'></script>
 </head>
 <body>

diff --git a/js/app.js b/js/app.js
@@ -4,32 +4,46 @@ let operando2=0;
 let operando2Aux=0;
 let operacion;
 let resultado=0;
+let cadenaOperacion=0;
 
 function actualizarPantalla(){
-    document.getElementById('valores').value=operando1;
+    document.getElementById('valores').value=cadenaOperacion;
 }
 
 function introducirNumero(numero){
-    if(operando1==0 && operando1!=='0.'){
+    if(operando1==0 && operando1!=='0.' && cadenaOperacion==0){
         operando1=numero;
-    }else{
+        cadenaOperacion=operando1;
+    }else if(cadenaOperacion!=0 && operando1==0){
+        operando1=numero;
+        cadenaOperacion+=operando1;
+    }else if(cadenaOperacion!=0 && operando1!=0){
+        operando1+=numero;
+        cadenaOperacion=operando1;
+    }
+    else{
         operando1+=numero;
+        cadenaOperacion+=operando1;
     }
     actualizarPantalla();
 }
 
 function introducirComa(){
     if(operando1==0){
         operando1='0.';
+        cadenaOperacion=operando1;
     }else{
         operando1+='.';
+        cadenaOperacion+=operando1;
     }
+
     actualizarPantalla();
 }
 
 function resetearPantalla(){
     operando1=0;
     operando2=0;
+    cadenaOperacion=0;
     actualizarPantalla();
 }
 
@@ -39,15 +53,17 @@ function realizarOperacion(valor){
     }
     operando1Aux=parseFloat(operando1);
     operacion=valor;
+    cadenaOperacion+=operacion;
     actualizarPantalla();
-    operando1=0;
-
+    operando1=0; 
 }
 
 function resolverOperacion(){
     operando2Aux=parseFloat(operando1);
     operando2=operando2Aux;
     operando1=operando1Aux;
+    cadenaOperacion+=operando2;
+    actualizarPantalla();
     switch (operacion) {
         case '+':
             resultado=(operando1+operando2);
@@ -65,7 +81,7 @@ function resolverOperacion(){
             resultado=Math.pow(operando1,operando2);
             break;
     }
-    operando1=resultado;
+    cadenaOperacion=resultado;
     actualizarPantalla();
     operando2=parseFloat(operando1);
     operando1=0;