se agrega una consulta a la API de la CMF de chile para consultar la …

…tasa de interes promedio más cercana a la fecha
santiagogak · Dec 17, 2024 · 00d0566 · 00d0566
1 parent 8ef1965
commit 00d0566
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 2 deletions.
diff --git a/css/main.css b/css/main.css
@@ -27,9 +27,18 @@ h1 {
     padding: 15px 0;
 }
 
+#cmf {
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: column;
+    margin: 30px auto;
+    margin-bottom: 10px;
+}
+
 .field {
     padding: 10px;
     margin: 5px auto;
+    font-size: 20px;
 }
 
 .field label {
@@ -38,14 +47,15 @@ h1 {
 
 .field input {
     text-align: right;
+    height: 30px;
 }
 
 .errorMessage {
     font-size: 14px;
     color: red;
 }
 
-.submit, .clear, .print {
+.submit, .clear, .print, .btn-tasa {
     margin: 6px auto;
     width: 200px;
     font-weight: 300;

diff --git a/index.html b/index.html
@@ -10,14 +10,15 @@
 <body>
     <main class="container">
         <h1>Calculadora de Cuotas de Crédito</h1>
+        <div id="cmf"></div>
         <form action="" id="calcular">
             <div class="field">
                 <label for="monto">Monto del préstamo:</label>
                 <input type="number" id="monto"/>
             </div>
             <div class="field">
                 <label for="interes">Tasa de Interés:</label>
-                <input type="number" id="interes" step="0.1"/>
+                <input type="number" id="interes" step="0.01"/>
             </div>
             <div class="field">
                 <label for="cuotas">Número de Cuotas:</label>

diff --git a/js/calcuotas.js b/js/calcuotas.js
@@ -3,6 +3,7 @@ const calcButton = document.getElementById("calcular");
 const clearButton = document.getElementById("clear");
 const printButton = document.getElementById("print");
 
+//Funcion para crear el HTML de cada Registro de calculo
 const crearTablaRegistros = () => {    
     const resultados = document.getElementById('resultados');
     resultados.innerHTML = '';
@@ -29,6 +30,57 @@ const crearTablaRegistros = () => {
     }
 }
 
+//Funcion para crear el HTML que muestra la información de la tasa de interés promedio de la CMF de Chile y el botón para utilizar esa tasa
+const appendInteresCMF = (v) => {    
+    const interesCMF = document.getElementById('cmf');
+    interesCMF.innerHTML = '';
+    const cmfHTML = `
+    <p>La Tasa de Interés Promedio (CMF - Comisión para el Mercado Financiero de Chile) para el <strong>${v.Fecha}</strong> es de: <strong>${v.Valor}%</strong></p>
+    <button class='btn-tasa' id='btn-tasa'>Usar Tasa CMF</button>
+    `;
+
+    interesCMF.insertAdjacentHTML( 'beforeend', cmfHTML );
+}
+
+//Función que hace el fetch de consulta a la API de la CMF de Chile para obtener la tasa de interés promedio
+const getInteresCMF = async () => {
+    const apiKey = "34dbf03ff4807805ecec32150fb4ee0b02733186";
+    const urlCMF = `https://api.cmfchile.cl/api-sbifv3/recursos_api/tip/2024?apikey=${apiKey}&formato=json`;
+
+    try {
+        const response = await fetch(urlCMF);
+        if (response.ok) {
+            const jsonCMF = await response.json();
+            const today = new Date();
+            let idxTIP;
+            let diffDias = today;
+            jsonCMF.TIPs.forEach((e,idx) => {
+                const eDate = new Date(e.Fecha+"T00:00:00");
+                if (e.Tipo == "21" && (today - eDate < diffDias)) {
+                    diffDias = today - eDate;
+                    idxTIP = idx;
+                }
+            });
+            if (idxTIP) {
+                appendInteresCMF(jsonCMF.TIPs[idxTIP]);
+                const tasaButton = document.getElementById("btn-tasa");
+
+                tasaButton.addEventListener('click', (e) => {
+                    e.preventDefault();
+                    console.log('presione tasa');
+                    document.getElementById('interes').value = jsonCMF.TIPs[idxTIP].Valor.replace(',','.');
+                });
+            }
+        }
+    } catch (error) {
+        console.log(error);
+    }
+}
+
+//Llamo a la API CMF para obtener la tasa de interés promedio
+getInteresCMF();
+
+//Botón de cálculo de intereses
 calcButton.addEventListener('submit', (e) => {
 
     e.preventDefault();
@@ -86,12 +138,14 @@ calcButton.addEventListener('submit', (e) => {
     }
 });
 
+//Borrar los registros del LocalStorage
 clearButton.addEventListener('click', (e) => {
     e.preventDefault();
     localStorage.clear();
     crearTablaRegistros();
 });
 
+//Imprimir todos los registros guardados en el LocalStorage
 printButton.addEventListener('click', (e) => {
     e.preventDefault();
     crearTablaRegistros();