Registro Diario html, cuerpo { margen: 0; fondo: #000 !importante; color: #fff; familia de fuentes: "Segoe UI", sans-serif; } h1 { alineación del texto: centro; color: #00f5ff; margen superior: 20px; } formulario { display: flex; flex-direction: columna; espacio: 10px; ancho máximo: 360px; margen: automático; relleno: 10px; } entrada, botón { relleno: 12px; borde: ninguno; radio del borde: 8px; tamaño de fuente: 1rem; } entrada { fondo: #111; color: #fff; } botón { fondo: #00f5ff; color: #000; peso de fuente: negrita; } .total { alineación del texto: centro; tamaño de fuente: 1.5rem; margen: 20px; color: #00f5ff; } .registro { fondo: #111; relleno: 12px; margen: 8px automático; ancho máximo: 360px; radio del borde: 10px; visualización: flexible; justificar contenido: espacio entre; alinear elementos: centro; } botón .registro { fondo: #ff3b30; color: blanco; relleno: 5px 10px; tamaño de fuente: 0.8rem; radio del borde: 6px; } Registro Diario
Agregar
Total: $0.00
const formulario = document.getElementById('formulario'); const lista = document.getElementById('lista'); const totalSpan = document.getElementById('total'); deje registros = []; función actualizar() { lista.innerHTML = ''; sea total = 0; registros.forEach((r, i) => { const sub = r.cantidad * r.precio; total += sub; const div = document.createElement('div'); div.className = 'registro'; div.innerHTML = `
${r.fecha}
${r.cantidad} x $${r.precio} = $${sub.toFixed(2)}
`; lista.appendChild(div); }); totalSpan.textContent = total.toFixed(2); } formulario.addEventListener('enviar', (e) => { e.preventDefault(); const fecha = document.getElementById('fecha').value; const cantidad = parseFloat(document.getElementById('cantidad').value); const precio = parseFloat(document.getElementById('precio').value); registros.push({ fecha, cantidad, precio }); actualizar(); formulario.reset(); }); document.getElementById('fecha').valueAsDate = new Date();