<!DOCTYPE html>
<html lang="es">
<cabeza>
<meta charset="UTF-8"/>
<meta name="viewport" content="ancho=ancho-del-dispositivo, escala-inicial=1.0"/>
<title>Registro Diario</title>
<meta name="color del tema" contenido="#000000">
<estilo>
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; }
</estilo>
</cabeza>
<cuerpo>
Registro Diario
<form id="formulario">
<input type="date" id="fecha" required />
<input type="number" id="cantidad" placeholder="Cantidad" required />
<input type="number" id="precio" placeholder="Precio" step="0.01" required />
Agregar
</form>
<div class="total">Total: $<span id="total">0.00</span></div>
<div id="lista"></div>
<guión>
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 = `
<div>
${r.fecha}</strong><br/>
${r.cantidad} x $${r.precio} = <strong>$${sub.toFixed(2)}</strong>
</div>
<button onclick="registros.splice(${i},1); actualizar()">⠌</button>`;
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();
</script>
</cuerpo>
</html>