La Calculadora - JS y HTML - ARGENTINA PROGRAMA 4.0

Trabajando con FORMULAS BASICAS


 A continuación código HTML + script

<!DOCTYPE html>  
<html>  
  <link rel="stylesheet" href="style.css">
<body>  
 
<section class="Formulario">
  <h3>Sumar dos números</h3>
<p>Por favor, introduce dos números:</p>  
Número 1: <input id="num1" placeholder="Ingresar Primer Número"><br>  
Número 2: <input id="num2" placeholder="Ingesar Segundo Número">  
<button id="bo" type="button" onclick="Sumar()">Sumar</button>
<button id="bo" type="button" onclick="Restar()">Restar</button>
<button id="bo" type="button" onclick="Multiplicar()">Multiplicar</button>
<button id="bo" type="button" onclick="Dividir()">Dividir</button>
<div id="Resultado">
    <h2><p id="sumando"></p></h2>
    <h2><p id="restando"></p></h2>
    <h2><p id="multiplicando"></p></h2>
    <h2><p id="dividiendo"></p></h2>
</div>

</section>  
 


<script>  
function Sumar() {  
  var x,y,suma,text;  
  x = document.getElementById("num1").value;  
  y = document.getElementById("num2").value;  
  if (isNaN(x) || isNaN(y)) {  
    text = "Es necesarios introducir dos números válidos";  
  } else {  
    //si no ponemos parseFloat concatenaría x con y  
    suma=parseFloat(x)+parseFloat(y);  
    text= suma;  
  }  
  document.getElementById("sumando").innerHTML = text;  
}  
function Restar() {  
  var x,y,resta,text;  
  x = document.getElementById("num1").value;  
  y = document.getElementById("num2").value;  
  if (isNaN(x) || isNaN(y)) {  
    text = "Es necesarios introducir dos números válidos";  
  } else {  
    //si no ponemos parseFloat concatenaría x con y  
    resta=parseFloat(x)-parseFloat(y);  
    text= resta;  
  }  
  document.getElementById("restando").innerHTML = text;  
}  

 
function Multiplicar() {  
  var x,y,multiplica,text;  
  x = document.getElementById("num1").value;  
  y = document.getElementById("num2").value;  
  if (isNaN(x) || isNaN(y)) {  
    text = "Es necesarios introducir dos números válidos";  
  } else {  
    //si no ponemos parseFloat concatenaría x con y  
    multiplica=parseFloat(x)*parseFloat(y);  
    text= multiplica;  
  }  
  document.getElementById("multiplicando").innerHTML = text;  
}  

function Dividir() {  
  var x,y,divide,text;  
  x = document.getElementById("num1").value;  
  y = document.getElementById("num2").value;  
  if (isNaN(x) || isNaN(y)) {  
    text = "Es necesarios introducir dos números válidos";  
  } else {  
    //si no ponemos parseFloat concatenaría x con y  
    divide=parseFloat(x)/parseFloat(y);  
    text= divide;  
  }  
  document.getElementById("dividiendo").innerHTML = text;  
}  

</script>  
</body>  
</html>

Código style.css

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;

}

.Formulario{
    width: 300px;
    background: rgb(84, 195, 247);
    padding: 20px;
    margin: auto;
    margin-top: 15px;
    border-radius: 4px;
    font-family: 'calibri';
    color: white;
    box-shadow: 7px 13px 37px #000;
}
.Formulario  {
    font-size: 22px;
    margin-bottom: 20px;
  }
 
 #num1, #num2 {
    width: 100%;
    background: white;
    padding: 10px;
    border-radius: 4px;
    margin-bottom: 16px;
    border: 1px solid #1f53c5;
    font-family: 'calibri';
    font-size: 18px;
    color: black;
  }
 
  .Formulario p {
    height: 40px;
    text-align: center;
    font-size: 18px;
    line-height: 40px;
  }
 
  .Formulario a {
    color: white;
    text-decoration: none;
  }
 
  .Formulario a:hover {
    color: white;
    text-decoration: underline;
  }
  h2{
    font-size: 40px;
  }
  #bo{
    width: auto;
    background: #237f9b;
    border: none;
    padding: 6px;
    border-radius: 4px;
    color: white;
    margin: 16px 0;
    font-size: 13px;
    font-weight: bold;
}

Comentarios

Entradas populares