feat: implement country search functionality with dynamic results

2026-05-25 12:29:22 -03:00
parent 4a7c4871f6
commit 19fbf05d87
2 changed files with 49 additions and 1 deletions
--- a/ejercicio5/ejercicio5.js
+++ b/ejercicio5/ejercicio5.js
@@ -1 +1,45 @@
 // Agregar aquí el código javascript
+
+const countries = [
+    'Argentina',
+    'Brasil',
+    'Chile',
+    'Colombia',
+    'Ecuador',
+    'Perú',
+    'Uruguay',
+    'Venezuela',
+    'Paraguay',
+    'Bolivia',
+    'Panamá',
+    'Costa Rica',
+    'Cuba',
+    'República Dominicana',
+    'Guatemala',
+    'Honduras',
+    'El Salvador',
+    'Nicaragua',
+    'Puerto Rico',
+    'México',
+    'Estados Unidos',
+    'Canadá',
+    'Guayana',
+    'Surinam',
+    'Guyana Francesa',
+];
+
+document.getElementById('search').addEventListener('input', () => {
+    const query = document.getElementById('search').value.toLowerCase();
+    const resultsList = document.getElementById('resultsList');
+    resultsList.innerHTML = '';
+
+    const filteredCountries = countries.filter(country =>
+        country.toLowerCase().includes(query)
+    );
+
+    filteredCountries.forEach(country => {
+        const li = document.createElement('li');
+        li.textContent = country;
+        resultsList.appendChild(li);
+    });
+});
--- a/ejercicio5/index.html
+++ b/ejercicio5/index.html
@@ -8,7 +8,11 @@
    </head>
    <body>
        <h1>Ejercicio 5</h1>
-
+        <div id="results">
+            <label for="search">Buscar:</label>
+            <input type="text" id="search" name="search">
+            <ul id="resultsList"></ul>
+        </div>
        <script src="ejercicio5.js"></script>
    </body>
 </html>