En este artículo, vamos a crear una página web de gestión de roles de pago con Javascript. En este proyecto vamos a aprender y despejar los conceptos de javascript básico.
Requisitos previos: Los requisitos previos para este proyecto son:
Enfoque: para crear nuestra página web de administración de roles de pago, tomaremos el monto de la factura ingresado y manejaremos los casos de error para que arroje un error si alguien usa el valor negativo del monto de la factura o más que el monto dado. Luego, aplicaremos nuestra lógica principal para mostrar la salida del número mínimo de notas posibles para devolver al usuario como salida (tabla). Esta página web en realidad contará la cantidad mínima de notas que el cliente obtendrá como devolución en el saldo. Suponga que el monto de la factura es 500 y tiene una rupia de 2000, por lo que calcula el número mínimo de notas que se devolverá al usuario.
Configuración básica: abra VS Code y abra una carpeta desde su unidad donde desea crear este proyecto y asigne el nombre (folderName). Después de abrir crea los siguientes archivos:
- índice.js
- índice.html
- estilo.css
Estructura del proyecto: Debería verse así:
Paso 1: Primero crearemos una estructura HTML en index.html . Esta es la página de índice principal que está conectada al archivo style.css para diseñar e index.js para las operaciones lógicas en el sitio web.
El archivo HTML contiene básicamente tres partes:
- encabezamiento
- secciones de entrada
- tabla (salida)
En la parte del encabezado tenemos el encabezado y en las secciones de entrada tenemos dos entradas del usuario, una es el monto de la factura, otra es la cantidad proporcionada por el usuario. En la última parte, tenemos una tabla para mostrar el número mínimo de billetes que se devolverán al usuario.
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"> </head> <body> <div class="container"> <header><strong> <center>Pay Role Management</center> </strong></header> <p class="description"> Enter the bill amount and the cash given by the customer and know minimum number of notes to return </p> <label for="input-bill"> <strong>Enter the bill amount</strong> </label> <input class="input-bill" id="bill" /> <label for="cash-given"> <strong> Cash Given</strong> </label> <input class="cash-given" id="cash" /> <button class="check-btn" id="btn">Check</button> <p id="error"> </p> <table class="table"> <caption> <strong>Return Change</strong> </caption> <tr class="row"> <th class="row">No of Notes</th> <td class="no-of-notes"></td> <td class="no-of-notes"></td> <td class="no-of-notes"></td> <td class="no-of-notes"></td> <td class="no-of-notes"></td> <td class="no-of-notes"></td> <td class="no-of-notes"></td> </tr> <tr> <th class="row">Notes</th> <td class="row">2000</td> <td class="row">500</td> <td class="row">100</td> <td class="row">20</td> <td class="row">10</td> <td class="row">5</td> <td class="row">1</td> </tr> </table> </div> </body> </html>
Paso 2: Ahora, dentro del archivo javaScript, tomaremos la identificación del botón y el número de entradas y el número de salidas al Html interno. La parte lógica del efectivo restante es proporcionar el mínimo número de billetes posible.
- Calcule el valor restante de la cantidad ingresada, es decir, la cantidad de la factura.
- Manejar los errores.
- Ejecute un bucle en la array de notas y calcule el número mínimo de notas. trunc() es una función en javascript que trunca (corta) el punto y los dígitos a la derecha.
- Finalmente, nuestra salida se muestra de acuerdo con los índices de las notas (noOfNotes).
index.js
var inputBill = document.getElementById("bill");
var cashGiven = document.getElementById("cash");
var checkBtn = document.getElementById("btn");
var errMsg = document.getElementById("error");
var noOfNotes = document.querySelectorAll(".no-of-notes");
var notes = [2000, 500, 100, 20, 10, 5, 1];
function errorHandle(error) {
errMsg.style.display = "block";
errMsg.innerText = error;
}
function hideMessage() {
errMsg.style.display = "none";
}
function clickHandler() {
hideMessage();
if (inputBill.value < 0) {
errorHandle("Please Enter a positive value");
} else {
var remaining = cashGiven.value - inputBill.value;
if (remaining < 0) {
errorHandle("Give me more");
} else {
for (var i = 0; i < notes.length; i++) {
const paisa = Math.trunc(remaining / notes[i]);
remaining %= notes[i];
noOfNotes[i].innerText = paisa;
}
}
}
}
checkBtn.addEventListener("click", clickHandler);
Paso 3: Ahora le daremos estilo a la página web. Aquí, el contenedor principal recibe relleno y se muestra como flexible con dirección como columna y color de fondo azul. También hemos bordeado la mesa con negro sólido, también hemos diseñado el botón.
style.css
.container {
display: flex;
flex-direction: column;
width: 25vw;
margin-left: 500px;
padding: 50px;
background-color: aqua;
}
.table {
border: 2px solid black;
}
.row {
border: 2px solid black;
}
.no-of-notes {
border: 2px solid black;
}
.check-btn {
margin-top: 35px;
padding: 5px;
}
.input-bill {
margin-top: 35px;
padding: 5px;
}
.cash-given {
margin-top: 35px;
padding: 5px;
}
Código final: después de combinar las tres secciones anteriores de códigos, es decir, HTML, CSS y JavaScript, obtendremos el resultado deseado.
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">
<style>
.container {
display: flex;
flex-direction: column;
width: 25vw;
margin-left: 500px;
padding: 50px;
background-color: aqua;
}
.table {
border: 2px solid black;
}
.row {
border: 2px solid black;
}
.no-of-notes {
border: 2px solid black;
}
.check-btn {
margin-top: 35px;
padding: 5px;
}
.input-bill {
margin-top: 35px;
padding: 5px;
}
.cash-given {
margin-top: 35px;
padding: 5px;
}
</style>
</head>
<body>
<div class="container">
<header><strong>
<center>Pay Role Management</center>
</strong></header>
<p class="description">
Enter the bill amount and the cash given by the customer
and know minimum number of notes to return
</p>
<label for="input-bill"><strong>Enter the bill amount</strong></label>
<input class="input-bill" id="bill" />
<label for="cash-given"><strong> Cash Given</strong></label>
<input class="cash-given" id="cash" />
<button class="check-btn" id="btn">Check</button>
<p id="error">
</p>
<table class="table">
<caption>
<strong>Return Change</strong></caption>
<tr class="row">
<th class="row">No of Notes</th>
<td class="no-of-notes"></td>
<td class="no-of-notes"></td>
<td class="no-of-notes"></td>
<td class="no-of-notes"></td>
<td class="no-of-notes"></td>
<td class="no-of-notes"></td>
<td class="no-of-notes"></td>
</tr>
<tr>
<th class="row">Notes</th>
<td class="row">2000</td>
<td class="row">500</td>
<td class="row">100</td>
<td class="row">20</td>
<td class="row">10</td>
<td class="row">5</td>
<td class="row">1</td>
</tr>
</table>
</div>
<script>
var inputBill = document.getElementById("bill");
var cashGiven = document.getElementById("cash");
var checkBtn = document.getElementById("btn");
var errMsg = document.getElementById("error");
var noOfNotes = document.querySelectorAll(".no-of-notes");
var notes = [2000, 500, 100, 20, 10, 5, 1];
function errorHandle(error) {
errMsg.style.display = "block";
errMsg.innerText = error;
}
function hideMessage() {
errMsg.style.display = "none";
}
function clickHandler() {
hideMessage();
if (inputBill.value < 0) {
errorHandle("Please Enter a positive value");
} else {
var remaining = cashGiven.value - inputBill.value;
if (remaining < 0) {
errorHandle("Give me more");
} else {
for (var i = 0; i < notes.length; i++) {
const paisa = Math.trunc(remaining / notes[i]);
remaining %= notes[i];
noOfNotes[i].innerText = paisa;
}
}
}
}
checkBtn.addEventListener("click", clickHandler);
</script>
</body>
</html>
Salida: Instale la extensión del servidor en vivo en VS Code. Haga clic en Live Server y nuestro sitio web está listo ahora.
