En el mundo actual, la programación web se ha vuelto una habilidad fundamental. Desde simples herramientas hasta complejas aplicaciones, la web ofrece un lienzo infinito para la creatividad y la utilidad. Una de las herramientas más básicas, pero igualmente útiles, es la calculadora de porcentaje. En este artículo, aprenderás cómo desarrollar una calculadora de porcentaje utilizando las tecnologías web más comunes: HTML, CSS y JavaScript.
1. Planificación y Diseño:
Antes de comenzar a codificar, es crucial tener una idea clara de lo que deseas lograr. En el caso de nuestra calculadora de porcentaje, identificaremos las funcionalidades clave que debe tener:
- Un campo de entrada para el número base.
- Un campo de entrada para el porcentaje.
- Un botón para calcular el resultado.
- Un área para mostrar el resultado.
2. Estructura HTML:
Comencemos creando la estructura básica de nuestra calculadora en HTML. Utilizaremos elementos como <input> para los campos de entrada y <button> para el botón de cálculo. Aquí tienes un ejemplo de cómo podría verse:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Percentage Calculator</title>
</head>
<body>
<div class="calculator">
<h1>Calcula el porcentaje</h1>
<input type="text" id="inputNumber" placeholder="Introduce un numero">
<input type="text" id="inputPercentage" placeholder="Introduce el porcentaje">
<button onclick="calculatePercentage()">Calcular</button>
<p id="result">Resultado: </p>
</div>
<script src="script.js"></script>
</body>
</html>3. Estilizado con CSS:
Aunque el diseño no es el foco principal de esta guía, es importante darle a nuestra calculadora una apariencia agradable y funcional. Puedes personalizar el aspecto de tu calculadora ajustando las propiedades CSS según tus preferencias.
body {
font-family: 'Arial', sans-serif;
background-color: #191970;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.calculator {
text-align: center;
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
input {
padding: 10px;
margin: 5px;
border: 1px solid #ccc;
border-radius: 4px;
width: 80%;
}
button {
padding: 10px;
background-color: #4caf50;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
width: 80%;
}
button:hover {
background-color: #45a049;
}
#result {
margin-top: 15px;
}
4. Funcionalidad con JavaScript:
Ahora, pasemos a la parte más emocionante: ¡hacer que nuestra calculadora funcione! Utilizaremos JavaScript para realizar los cálculos necesarios y mostrar el resultado en la pantalla. Aquí tienes un ejemplo básico de cómo podríamos lograrlo:
function calculatePercentage() {
var inputNumber = parseFloat(document.getElementById('inputNumber').value);
var inputPercentage = parseFloat(document.getElementById('inputPercentage').value);
if (!isNaN(inputNumber) && !isNaN(inputPercentage)) {
var result = (inputNumber * inputPercentage) / 100;
document.getElementById('result').innerText = 'Result: ' + result.toFixed(2) + '%';
} else {
document.getElementById('result').innerText = 'Invalid input. Please enter valid numbers.';
}
}
5. Publicación y Promoción:
Una vez que hayas terminado de desarrollar tu calculadora de porcentaje, es hora de compartir tu creación con el mundo. Puedes subir tus archivos HTML, CSS y JavaScript a un servidor web o utilizar servicios gratuitos de alojamiento. Además, no te olvides de promocionar tu calculadora en las redes sociales y comunidades en línea relevantes para que más personas puedan beneficiarse de ella.
¡Y eso es todo! Con estos simples pasos, has aprendido cómo desarrollar tu propia calculadora de porcentaje utilizando HTML, CSS y JavaScript. ¡Esperamos que esta guía te haya sido útil en tu viaje de desarrollo web!
DESARROLLADO POR: CRISTHIAN WEB