se agrega soporte a localstorage

css/main.css

@@ -27,8 +27,7 @@ h1 {
     padding: 15px 0;
 }
 
-.submit {
-    background-color: greenyellow;
+.submit, .clear, .print {
     margin: 25px auto;
     width: 200px;
     font-weight: 300;
@@ -37,6 +36,20 @@ h1 {
     border-radius: 30px;
 }
 
+.submit {
+    background-color: greenyellow;
+}
+
+.print {
+    background-color: blue;
+    color: white;
+}
+
+.clear {
+    background-color: red;
+    color: white;
+}
+
 #resultados {
     display: block;
     width: 75%;

index.html

@@ -25,6 +25,8 @@ <h1>Calculadora de Cuotas de Crédito</h1>
             </div>
             <button class="submit" type="submit">Simular Crédito</button>
         </form>
+        <button class="print" id="print">Imprimir Historial</button>
+        <button class="clear" id="clear">Borrar Historial</button>
         <div id="resultados"></div>
     </main>
     <script type="module" src="js/calcuotas.js" defer></script>

js/calcuotas.js

@@ -1,31 +1,38 @@
 
 import RegistroCalculo from './registrocalculo.js';
 const calcButton = document.getElementById("calcular");
+const clearButton = document.getElementById("clear");
+const printButton = document.getElementById("print");
 
-//variable para guardar el historial de cálculos
-let historial = [];
+const crearTablaRegistros = () => {
 
-const crearTablaRegistros = (arrH) => {
+    const historial = window.localStorage;
+    console.log(historial);
+
     const resultados = document.getElementById('resultados');
     resultados.innerHTML = '';
-    arrH.forEach((h,idx) => {
+    for (let i = 0; i < localStorage.length; i++) {
+        const idx = localStorage.key(i);
+        const entry = JSON.parse(localStorage.getItem(idx));
+        const h = Object.assign(new RegistroCalculo, entry);
+        console.log(h);
         const creditoHTML = `
         <div class="registro">
-            <h2>Registro ${idx+1}:</h2>
-            <div class="infoLeft">
-                <p>Monto: ${h.formatoMoneda(h.monto)}</p>
-                <p>Tasa: ${h.tasa}%</p>
-                <p>Cuotas: ${h.cuotas}</p>
-            </div>
-            <div class="infoRight">
-                <p>Pago Mensual: ${h.formatoMoneda(h.pagoMensual)}</p>
-                <p>Total Interéses: ${h.imprimirTotalInteres()}</p>
-                <p>Cuotas:<br> ${h.imprimirDetallePagos(true)}</p>
-            </div>
+        <h2>Registro ${parseInt(idx)}:</h2>
+        <div class="infoLeft">
+        <p>Monto: ${h.formatoMoneda(h.monto)}</p>
+        <p>Tasa: ${h.tasa}%</p>
+        <p>Cuotas: ${h.cuotas}</p>
+        </div>
+        <div class="infoRight">
+        <p>Pago Mensual: ${h.formatoMoneda(h.pagoMensual)}</p>
+        <p>Total Interéses: ${h.imprimirTotalInteres()}</p>
+        <p>Cuotas:<br> ${h.imprimirDetallePagos(true)}</p>
+        </div>
         </div>
         `;
         resultados.insertAdjacentHTML( 'beforeend', creditoHTML );
-    });
+    }
 }
 
 calcButton.addEventListener('submit', (e) => {
@@ -44,7 +51,17 @@ calcButton.addEventListener('submit', (e) => {
 
     const credito = new RegistroCalculo(capital, interes, cuotas);
     credito.calcularTodo();
-    historial.push(credito);
-    console.log(historial);
-    crearTablaRegistros(historial);
+    localStorage.setItem(localStorage.length,JSON.stringify(credito));
+    crearTablaRegistros();
+});
+
+clearButton.addEventListener('click', (e) => {
+    e.preventDefault();
+    localStorage.clear();
+    crearTablaRegistros();
+});
+
+printButton.addEventListener('click', (e) => {
+    e.preventDefault();
+    crearTablaRegistros();
 });

js/registrocalculo.js

@@ -1,8 +1,8 @@
 export default class RegistroCalculo {
     constructor(monto = 0, tasa = 0, cuotas = 1) {
-        this.monto = monto;
-        this.tasa = tasa;
-        this.cuotas = cuotas;
+        this.monto = parseInt(monto);
+        this.tasa = parseInt(tasa);
+        this.cuotas = parseInt(cuotas);
         this.pagoMensual = 0;
         this.pagos = [];
     }