Manual Facturador (12463)

Facturación Básica con JavaScript y Jquery
iniciaremos creando un carpeta llamada facturador en el escritorio y o en donde deseen y hay

podremos todo nuestro código y luego de esto abriremos el editor de desarrollo, que en este caso
usaremos Visual esdudio code pata este ejemplo.
Daremos en file open folder y ubicaremos la carpeta que creamos llamada facturador y ya abierto el
proyecto dentro de este crearemos la carpeta de assets en donde podremos los archivos de bootstrap 4
para manejar los estilos los estilos y hay mismo pondremos la Liberia de JavaScript llamada jquery
que es la que nos ayudara a capturar y mostrar los datos en la vista, posterior a esto creemos una
carpeta llamada js y dentro de este un archivo llamado factura-controller.js y por ultimo en la raíz del
proyecto un archivo llamado index.html, con estos cambio nuestro proyecto se debe ver de la siguiente
manera:
listo ahora dentro del archivo index.html pondremos el siguiente código para el formulario de nuestra
factura:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="assets/bootstrap.css">
<link rel="stylesheet" href="assets/style.css">
</head>
<body>
<div class="container" style="margin-top: 50px;">
<form>
<div class="row">
<h5>Ingrese Productos</h5>
</div>
<div class="row">
<div class="col-lg-3 col-md-3">
<div class="form-group">
<label for="proSelect">Producto</label>
<select id="proSelect" class="form-control">
</select>
</div>
</div>

<label for="exampleInputPassword1">Valor</label>
<input id="valor" type="number" class="form-control">
</div>
</div>

<label for="iva">Iva</label>
<input id="iva" type="number" class="form-control">
</div>
</div>

<label for="cant">Cant.</label>
<input id="cant" type="number" class="form-control">
</div>
</div>
<label for="agregar"></label>
<button id="agregar" type="button" class="btn btn-primary btn-block">Agregar</button>
</div>
</div>
<button id="limpiar" type="button" class="btn btn-warning btn-block">Reiniciar</button>
</div>
</div>
<button id="generar" type="button" class="btn btn-success btn-block">Generar factura</button>
</div>
</div>
</div>
</form>

<hr>
<h5 id="numFact"></h5>
<div style="overflow-y: scroll; max-height: 300px;">
<table class="table">
<thead class="thead-dark">
<tr>
<th scope="col">Producto</th>
<th scope="col">val Und</th>
<th scope="col">Iva</th>
<th scope="col">valor. Iva</th>
<th scope="col">Cant.</th>
</tr>
</thead>
<tbody id="porFact">
</tbody>
</table>
</div>

<div id="tableTotal" class="row">
<table class="table table-bordered">
<thead class="thead-dark"></thead>
<tbody id="totales">
</tbody>
</table>
</div>

</div>

<script src="assets/jquery.js"></script>
<script src="js/controller/factura-controller.js"></script>
</body>
</html>
las etiquetas script apuntan apuntaran a nuestros archivos controller y jquery para trabajar la lógica en los archivos
factura-controller.js.
En nustros archivo factura-controller.js crearemos tres variables que nos permitira majejar los datos gnerales de cada
función
var lisProd = ["seleccione", "papa", "arroz", "sal", "azucar", "frijol", "camisa"];

var productosFac = [];
var factura;
lisProd: lista de productos.

ProductosFac: lista de productos agregados al la factura.
Factura : Valor valor final de los datos de la factura.
Crearemos la funcion que
Crearemos el objeto de la estructura de los datos de factura y producto:
en la función
imprimirProd imprimir la la lista de productos que generamos inicialmente como lisProd
creemos la función que captura los valores de los productos y los agrega a la lista de productos por medio del atributo
id del input en el html y en le campo valor se aplicara la funcion que obtendra el iva digitado por el usuario del total
final del producto, por ultimo la función imprimirProdFactura que recibirá por parámetro el producto final que nos
permitirá imprimir el producto el la lista para poder visualizarlo.
Ahora crearemos las funciones de de totalFactura que no

calculara el toral de todos los productos agregados a nuestra lista por medio de un foreach sumando el totla de
producto y total iva de cada producto y tomaremos el numero de factura de la fecha exacta en que se genere la factura
y finalmente imprimirTotales nos permitirá visualizar en la vista los totales obtenido en la anterior función.
La funciona limpiarElementos como su nombre lo dice nos permitirá limpiar los datos diligenciados por el usuario
totales y lista de productos.
Finalmente creáremos la función que se ejecutara por

defecto cuando se carge la vista que ejecutara las función imprimirProd y eventos que nos permitirá ejecutar los
eventos de cada botos de nuestra aplicación por medio del atributo id de cada botos del formulario en index.html
finalmente ejecuta remos el
archivo index.html de
nuestra aplicación y se
vera de la siguiente manera.
funcionalmente así:

Manual Facturador (12463)

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Manual Facturador (12463)

Cargado por

Copyright:

Formatos disponibles

Facturación Básica con JavaScript y Jquery

iniciaremos creando un carpeta llamada facturador en el escritorio y o en donde deseen y hay

var lisProd = ["seleccione", "papa", "arroz", "sal", "azucar", "frijol", "camisa"];

lisProd: lista de productos.

Crearemos el objeto de la estructura de los datos de factura y producto:

Ahora crearemos las funciones de de totalFactura que no

Finalmente creáremos la función que se ejecutara por

También podría gustarte