Scribd
Cargar
90 vistas6 páginas

PHP Calculadora - PHP: Isset Isset Isset

El documento describe una calculadora web básica que realiza las cuatro operaciones matemáticas básicas (suma, resta, multiplicación y división) utilizando PHP y JavaScript. El código PHP procesa las operaciones matemáticas según los parámetros recibidos a través de una URL, mientras que el código JavaScript maneja la interfaz y la interacción del usuario al permitir ingresar números, seleccionar una operación y mostrar el resultado sin recargar la página.

Cargado por

MARIA ALEJANDRA ZAVALA CHANGOLUISA
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
90 vistas6 páginas

PHP Calculadora - PHP: Isset Isset Isset

El documento describe una calculadora web básica que realiza las cuatro operaciones matemáticas básicas (suma, resta, multiplicación y división) utilizando PHP y JavaScript. El código PHP procesa las operaciones matemáticas según los parámetros recibidos a través de una URL, mientras que el código JavaScript maneja la interfaz y la interacción del usuario al permitir ingresar números, seleccionar una operación y mostrar el resultado sin recargar la página.

Cargado por

MARIA ALEJANDRA ZAVALA CHANGOLUISA
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 6

PHP

calculadora.php
<?php
if (isset($_GET['numero1']) && isset($_GET['numero2']) &&
isset($_GET['operacion'])) {
$num1 = $_GET['numero1'];
$num2 = $_GET['numero2'];
$operacion = $_GET['operacion'];

if ($operacion === "Suma"){


$resultado = $num1 + $num2;
echo "<p>El resultado es: $resultado</p>";
} else if ($operacion == "Resta"){
$resultado = $num1 - $num2;
echo "<p>El resultado es: $resultado</p>";
} else if ($operacion == "Multiplicacion"){
$resultado = $num1 * $num2;
echo "<p>El resultado es: $resultado</p>";
} else if ($operacion == "Division"){
if ($num2 == 0){
echo "<p>No existe división para cero</p>";
} else {
$resultado = $num1 / $num2;
echo "<p>El resultado es: $resultado</p>";
}
}
}
?>

HTML
index.html
<!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">
<link rel="stylesheet" href="css/bootstrap.min.css">
<title>Calculadora</title>
<script>
function realizarOperacion() {
var numero1 =
parseFloat(document.getElementById("numero1").value);
var numero2 =
parseFloat(document.getElementById("numero2").value);
var operacion = document.getElementById("operacion").value;

if (isNaN(numero1) || isNaN(numero2)) {
alert("Ingrese números válidos.");
return;
}

// En lugar de redirigir, mostraremos el resultado en el


elemento 'resultado'
var resultadoElement =
document.getElementById("resultado");

// Realizar la operación en JavaScript antes de mostrar el


resultado
var resultado;
if (operacion === "Suma") {
resultado = numero1 + numero2;
} else if (operacion === "Resta") {
resultado = numero1 - numero2;
} else if (operacion === "Multiplicacion") {
resultado = numero1 * numero2;
} else if (operacion === "Division") {
if (numero2 === 0) {
resultado = "No existe división para cero";
} else {
resultado = numero1 / numero2;
}
}

// Mostrar el resultado en el elemento


resultadoElement.innerHTML = "<p>El resultado es: " +
resultado + "</p>";
}
</script>
</head>

<body>
<div class="container">
<div class="row">
<div class="col-md-12 bg-light rounded-5 p-5">
<h3 class="text-info p-4 text-center">Calculadora</h3>
<div class="row mt-3">
<div class="col form-group">
<label for="numero1">Ingrese el primer
número</label>
<input type="text" class="form-control mt-3"
placeholder="Primer número" name="numero1"
id="numero1">
</div>
<div class="col form-group">
<label for="numero2">Ingrese el segundo
número</label>
<input type="text" class="form-control mt-3"
placeholder="Segundo número" name="numero2"
id="numero2">
</div>
<div class="col form-group">
<label for="operacion">Ingrese la operación que
desea realizar</label>
<input type="text" class="form-control mt-3"
placeholder="Suma, Resta, Multiplicación o
División" name="operacion" id="operacion">
</div>
</div>
<button type="button" onclick="realizarOperacion()"
class="btn btn-secondary mt-5 mb-5">Realizar
Operación</button>
<div class="resultado" id="resultado">
<!-- El resultado se mostrará aquí -->
</div>
</div>
</div>
</div>
</body>

</html>
codigo feo
<?php

echo "<h1>Calculadora Basicas";


echo "<br>";
echo "<input type='text' name='valor1' value=''>";
echo "<input type='text' name='valor2' value=''>";
echo "<br>";
echo "<br>";
echo "<input type='text' name='operacion' value=''>";
echo "<br>";
echo "<br>";
echo "<br>";
echo "<input type='text' name='resultado' value='0'>";
echo "<br>";
echo "<br>";
echo "<br>";
//boton resultado
echo "<button type='button' name='resultado1' >Resultado</button>";

echo "<script>

//al hacer click en el boton resultado tomar los valores de los input y
realizar la operacion

var boton = document.querySelector('button[name=resultado1]');

boton.addEventListener('click', function() {

var valor1 = document.querySelector('input[name=valor1]').value;

var valor2 = document.querySelector('input[name=valor2]').value;

var operacion = document.querySelector('input[name=operacion]').value;

var resultado = document.querySelector('input[name=resultado]');

if (operacion == 'suma') {

resultado.value = parseInt(valor1) + parseInt(valor2);

} else if (operacion == 'resta') {


resultado.value = parseInt(valor1) - parseInt(valor2);

} else if (operacion == 'multiplicacion') {

resultado.value = parseInt(valor1) * parseInt(valor2);

} else if (operacion == 'division') {

resultado.value = parseInt(valor1) / parseInt(valor2);

} else {

resultado.value = 'Operacion no valida';

}
//si en la division el valor2 es 0 mostrar mensaje de error
if (valor2 == 0) {

resultado.value = 'No se puede dividir por 0';

});

//agregarle estilo al boton


boton.style.backgroundColor = 'green';
boton.style.color = 'white';
boton.style.border = 'none';
boton.style.padding = '10px';
boton.style.borderRadius = '5px';
boton.style.cursor = 'pointer';

//agregarle estilo al input


var input = document.querySelectorAll('input');

for (var i = 0; i < input.length; i++) {

input[i].style.border = 'none';
input[i].style.borderBottom = '1px solid black';
input[i].style.width = '100px';
input[i].style.margin = '10px';
input[i].style.padding = '10px';
input[i].style.fontSize = '20px';
input[i].style.textAlign = 'center';

//agregarle estilo al body

document.body.style.textAlign = 'center';

</script>";

También podría gustarte