VaidrollTeam: CALCULADORAS BÁSICAS EN PHP, HTML Y CSS

Proyecto de diferentes calculadoras en PHP

Este proyecto contiene 3 diferentes calculadoras.

En la primera calculadora se tiene que ingresar desde el teclado los números, seleccionar la operación a realizar y presionar el botón calcular.

La segunda calculadora tiene los números y las operaciones integrados en su formulario, una pantalla para mostrar el resultado, un botón para limpiar la pantalla y otro para calcular.

La tercera calculadora es similar a la segunda con la diferencia de la ubicación de sus pantallas para mostrar el resultado y el botón punto.

Al presionar en la siguiente imagen se puede ver el proyecto a tamaño original

Primera calculadora en PHP

Segunda calculadora en PHP

Tercera calculadora en PHP

El proyecto esta dividido en varias páginas para que sea más fácil de entender o modificar.

index.php
calculadora1.php
calculadora2.php
calculadora3.php
style.css

index.php

<html>
<head>
<title>VaidrollTeam</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div style="text-align: center;">
  <ul>
    <li><a href="calculadora1.php">Calculadora 1</a></li>
    <li><a href="calculadora2.php">Calculadora 2</a></li>
    <li><a href="calculadora3.php">Calculadora 3</a></li>
  </ul>
</div>
</body>
</html>

calculadora1.php

<?php
include('index.php');
?>
<!DOCTYPE html>
<html>
<head>
<title>VaidrollTeam</title>
</head>
<body>
<form method="post">
<input class="CajaTexto" type="number" name="numero1" placeholder="Ingresa un número" required><br><br>
	<select name="operacion" id="operacion" class="CajaTexto">
	<option value="+">Suma</option>
	<option value="-">Resta</option>
	<option value="*">Multiplicación</option>
	<option value="/">División</option>
	</select><br><br>
<input class="CajaTexto" type="number" name="numero2" placeholder="Ingresa un número" required><br><br>
<input class="BtnCalcular" type="submit" name="btncalcular" value="Calcular"><br>

<?php
if(isset($_POST['btncalcular']))
{
    $numero1		= $_POST["numero1"];
    $numero2 		= $_POST["numero2"];
    $operacion 		= $_POST["operacion"];

    if ($operacion == "+") {
        $resultado = $numero1 + $numero2;
    } elseif ($operacion == "-") {
        $resultado = $numero1 - $numero2;
    } elseif ($operacion == "*") {
        $resultado = $numero1 * $numero2;
    } elseif ($operacion == "/") {
        if ($numero2 == 0) {
            echo "No se puede dividir entre cero";
        } else {
            $resultado = $numero1 / $numero2;
        }
    }
}
?>
<input class="CajaTexto" type="number"  value="<?php if(isset($_POST['btncalcular'])) echo $resultado; ?>" placeholder="0" readonly><br><br>
</form>
</body>
</html>

calculadora2.php

<?php
include('index.php');
?>
<!DOCTYPE html>
<html>
<head>
<title>VaidrollTeam</title>
</head>
<body>
<form method="post">
<table>
<tr>
<td><input class="BtnNumerosGG" type="button" value="1" onclick="document.getElementById('pantalla').value += '1'"></td>
<td><input class="BtnNumerosGG" type="button" value="2" onclick="document.getElementById('pantalla').value += '2'"></td>
<td><input class="BtnNumerosGG" type="button" value="3" onclick="document.getElementById('pantalla').value += '3'"></td>
<td><input class="BtnNumerosGG" type="button" value="+" onclick="document.getElementById('pantalla').value += '+'"></td>
</tr>
<tr>
<td><input class="BtnNumerosGG" type="button" value="4" onclick="document.getElementById('pantalla').value += '4'"></td>
<td><input class="BtnNumerosGG" type="button" value="5" onclick="document.getElementById('pantalla').value += '5'"></td>
<td><input class="BtnNumerosGG" type="button" value="6" onclick="document.getElementById('pantalla').value += '6'"></td>
<td><input class="BtnNumerosGG" type="button" value="-" onclick="document.getElementById('pantalla').value += '-'"></td>
</tr>
<tr>
<td><input class="BtnNumerosGG" type="button" value="7" onclick="document.getElementById('pantalla').value += '7'"></td>
<td><input class="BtnNumerosGG" type="button" value="8" onclick="document.getElementById('pantalla').value += '8'"></td>
<td><input class="BtnNumerosGG" type="button" value="9" onclick="document.getElementById('pantalla').value += '9'"></td>
<td><input class="BtnNumerosGG" type="button" value="*" onclick="document.getElementById('pantalla').value += '*'"></td>
</tr>
<tr>
<td><input class="BtnNumerosGG" type="button" value="C" onclick="document.getElementById('pantalla').value = ''"></td>
<td colspan="2"><input class="BtnNumerosGG" type="button" value="0" onclick="document.getElementById('pantalla').value += '0'"></td>
<td><input class="BtnNumerosGG" type="button" value="/" onclick="document.getElementById('pantalla').value += '/'"></td>
</tr>
<tr>
<td colspan=4><input class="BtnCalcular" type="submit" value="Calcular" name="btncalcular"></td>
</tr>

<?php
if(isset($_POST['btncalcular'])) 
{
    $expresion = $_POST["pantalla"];
    $resultado = eval("return $expresion;");
}
?>
			<tr>
				<td colspan=4><input class="CajaTexto" type='text' id='pantalla' name='pantalla' value="<?php if(isset($_POST['btncalcular'])) echo $resultado; ?>" readonly></td>
			</tr>	
		</table>		
    </form>
</body>
</html>

calculadora3.php

<?php
include('index.php');
?>
<!DOCTYPE html>
<html>
<head>
<title>VaidrollTeam</title>
</head>
<body>
	<form method="post">
		<input class="CajaTexto" type="text" name="pantalla" value="<?php if(isset($_POST['pantalla'])) echo $_POST['pantalla']; ?>" readonly><br><br>
		<input class="BtnNumeros3" type="submit" name="boton" value="1">
		<input class="BtnNumeros3" type="submit" name="boton" value="2">
		<input class="BtnNumeros3" type="submit" name="boton" value="3">
		<input class="BtnNumeros3" type="submit" name="boton" value="+"><br>
		<input class="BtnNumeros3" type="submit" name="boton" value="4">
		<input class="BtnNumeros3" type="submit" name="boton" value="5">
		<input class="BtnNumeros3" type="submit" name="boton" value="6">
		<input class="BtnNumeros3" type="submit" name="boton" value="-"><br>
		<input class="BtnNumeros3" type="submit" name="boton" value="7">
		<input class="BtnNumeros3" type="submit" name="boton" value="8">
		<input class="BtnNumeros3" type="submit" name="boton" value="9">
		<input class="BtnNumeros3" type="submit" name="boton" value="*"><br>
		<input class="BtnNumeros3" type="submit" name="boton" value=".">
		<input class="BtnNumeros3" type="submit" name="boton" value="0">
		<input class="BtnNumeros3" type="submit" name="boton" value="C">
		<input class="BtnNumeros3" type="submit" name="boton" value="/"><br>
		<input class="BtnCalcular" type="submit" name="calcular" value="Calcular"><br>
    </form>

<?php
if (isset($_POST["boton"])) {
    $pantalla 	= $_POST["pantalla"];
    $valor 		= $_POST["boton"];
    if ($valor == "C") {
        $pantalla = "";
    } else {
        $pantalla .= $valor;
    }
    echo "<script>document.getElementsByName('pantalla')[0].value='$pantalla';</script>";
} elseif (isset($_POST["calcular"])) {
    $pantalla = $_POST["pantalla"];
    $resultado = eval("return $pantalla;");
    echo "<script>document.getElementsByName('pantalla')[0].value='$resultado';</script>";
}
?>

</body>
</html>

style.css

body
{
background-color:#f2f2f2;
font-family: Arial, sans-serif;
}

ul {
display: inline-block; 
list-style-type: none; 
padding: 0;
}

li {
display: inline-block; 
margin-right: 20px; 
font-size: 18px;
}

a
{
width: 80%;
text-decoration:none;
padding: 10px 30px;
cursor: pointer;
border: 0;
border-radius: 10px;
border:2px solid black;
font-size:18px;
color:white;
background-color: green;
font-weight: bold;
margin-bottom:5%;
}

form {
   
width: 400px; 
margin: 2em auto;
padding: 2em;
border-radius: 6px;
border:0.1em solid black;
text-align:center;
}

.CajaTexto{
width: 100%;
padding: 10px;
font-size:1em;
border-radius:5px;
border:1px solid black;
color:black;
}
.BtnCalcular
{
width: 100%;
padding: 10px 30px;
cursor: pointer;
border: 0;
border-radius: 10px;
border:1px solid black;
font-size:18px;
color:white;
background-color: #1B68DF;
font-weight: bold;
margin-bottom:5%;
}

.BtnNumerosGG
{
width:100%;
padding: 10px 30px;
cursor: pointer;
border: 0;
border-radius: 10px;
border:1px solid black;
font-size:18px;
font-weight: bold;
margin-bottom:5%;
}
table
{
	width:100%;
	text-align:center;
}
.BtnNumeros3
{
width:20%;
padding: 10px 30px;
cursor: pointer;
border: 0;
border-radius: 10px;
border:1px solid black;
font-size:18px;
font-weight: bold;
margin-bottom:5%;
}

Nombre: CalculadorasPHP.rar

Tamaño: 3 KB

Descargar Creando link... espera 30 segundos.

Páginas

CALCULADORAS BÁSICAS EN PHP, HTML Y CSS