Scribd
Cargar
5 vistas3 páginas

Ejemplo 5 Java

El documento presenta un sistema de ventas desarrollado en JavaScript que permite registrar ventas, calcular totales y exportar datos a Excel. Incluye un formulario para ingresar producto, precio y cantidad, así como una tabla que muestra el historial de ventas. Los datos se almacenan en el almacenamiento local del navegador para su persistencia.

Cargado por

lucholuchito
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 DOCX, PDF, TXT o lee en línea desde Scribd
5 vistas3 páginas

Ejemplo 5 Java

El documento presenta un sistema de ventas desarrollado en JavaScript que permite registrar ventas, calcular totales y exportar datos a Excel. Incluye un formulario para ingresar producto, precio y cantidad, así como una tabla que muestra el historial de ventas. Los datos se almacenan en el almacenamiento local del navegador para su persistencia.

Cargado por

lucholuchito
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 DOCX, PDF, TXT o lee en línea desde Scribd

<!

DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Sistema de Ventas con JS</title>
<script src="[Link]
<script
src="[Link]
></script>
</head>
<body class="bg-gray-100 font-sans">

<header class="bg-green-700 text-white p-4 text-center">


<h1 class="text-xl font-bold">Sistema de Ventas</h1>
</header>

<main class="p-6 grid grid-cols-1 md:grid-cols-2 gap-6">

<!-- Formulario -->


<section class="bg-white p-6 rounded-2xl shadow">
<h2 class="font-bold mb-4">Registrar Venta</h2>

<input type="text" id="producto" placeholder="Producto"


class="w-full mb-2 p-2 border rounded">
<input type="number" id="precio" placeholder="Precio" class="w-
full mb-2 p-2 border rounded">
<input type="number" id="cantidad" placeholder="Cantidad"
class="w-full mb-2 p-2 border rounded">

<button onclick="registrarVenta()" class="bg-green-600 text-white


px-4 py-2 rounded w-full">Registrar</button>
</section>

<!-- Totales -->


<section class="bg-white p-6 rounded-2xl shadow text-center">
<h2 class="font-bold mb-4">Resumen</h2>
<p>Total Ventas:</p>
<p id="total" class="text-3xl font-bold">0</p>
</section>

</main>
<!-- Tabla -->
<section class="p-6">
<div class="bg-white p-6 rounded-2xl shadow">
<h2 class="font-bold mb-4">Historial de Ventas</h2>

<button onclick="exportExcel()" class="mb-4 bg-blue-600 text-


white px-4 py-2 rounded">Exportar a Excel</button>

<table class="w-full text-left" id="tabla">


<thead>
<tr class="border-b">
<th>#</th>
<th>Producto</th>
<th>Precio</th>
<th>Cantidad</th>
<th>Total</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</section>

<script>
let ventas = [Link]([Link]('ventas')) || [];

function registrarVenta() {
const producto = [Link]('producto').value;
const precio = parseFloat([Link]('precio').value);
const cantidad =
parseFloat([Link]('cantidad').value);

const total = precio * cantidad;

const venta = { producto, precio, cantidad, total };


[Link](venta);

[Link]('ventas', [Link](ventas));

renderTabla();
calcularTotal();
}
function renderTabla() {
const tbody = [Link]('#tabla tbody');
[Link] = '';

[Link]((v, i) => {
[Link] += `
<tr class="border-b">
<td>${i + 1}</td>
<td>${[Link]}</td>
<td>${[Link]}</td>
<td>${[Link]}</td>
<td>${[Link]}</td>
</tr>`;
});
}

function calcularTotal() {
const total = [Link]((sum, v) => sum + [Link], 0);
[Link]('total').innerText = [Link](2);
}

function exportExcel() {
const ws = [Link].json_to_sheet(ventas);
const wb = [Link].book_new();
[Link].book_append_sheet(wb, ws, "Ventas");
[Link](wb, "[Link]");
}

[Link] = () => {
renderTabla();
calcularTotal();
};
</script>

</body>
</html>

También podría gustarte