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
Publicar un comentario