Proyectos (DIA 1 - 13)

Realizados gracias al curso "JAVASCRIPT TOTAL"
2026-08-15 02:50:10 +00:00 · 2026-01-30 19:16:11 -05:00
commit 03a7ef3253
67 changed files with 2204 additions and 0 deletions
@@ -0,0 +1,79 @@
+// VARIABLES
+let selector = document.getElementById("miSelector");
+let input = document.getElementById("miInput");
+let boton = document.getElementById("miBoton");
+let lista = document.getElementById("miListado");
+
+let archivo = 'peliculas.json';
+
+// ESCUCHADORES DE EVENTOS
+selector.addEventListener("change", cambiarArchivo);
+selector.addEventListener("cambioModo", mensajeModo);
+input.addEventListener("input", verificarInput);
+boton.addEventListener("click", buscar);
+
+// FUNCIONES
+function cambiarArchivo() {
+    archivo = selector.value;
+
+    lista.innerHTML = "<li style='color:gray;font-style:italic'>Escribe algo para buscar</li>";
+
+    input.value = "";
+
+    let evento = new CustomEvent("cambioModo");
+    selector.dispatchEvent(evento);
+}
+
+function mensajeModo() {
+    alert("El archivo de busqueda ahora es " + selector.value);
+}
+
+function verificarInput() {
+    input.value = input.value.replace(/[^a-zA-Z ]/g, "");
+}
+
+function buscar() {
+    lista.innerHTML = "";
+
+    if (input.value.trim() === "") {
+        lista.innerHTML = "<li style='color:gray;font-style:italic'>Escribe algo para buscar</li>";
+        return;
+    }
+
+    fetch(archivo)
+    .then(res => res.json())
+    .then(data => {
+
+        let encontrados = 0;
+
+        for (let item of data.data) {
+            console.log(item);
+
+            if (item.nombre.includes(input.value.toUpperCase())) {
+
+                encontrados++;
+
+                let li = document.createElement("li");
+                li.textContent = item.nombre;
+
+                let p = document.createElement("p");
+                p.textContent = item.sinopsis;
+
+                let img = document.createElement("img");
+                img.src = item.imagen;
+                img.alt = item.nombre;
+                img.style.width = "200px";
+                img.style.marginTop = "10px";
+                img.style.borderRadius = "8px";
+
+                li.appendChild(p);
+                li.appendChild(img);
+                lista.appendChild(li);
+            }
+        }
+
+        if (encontrados === 0) {
+            lista.innerHTML = "<li style='color:gray;font-style:italic'>No se encontraron resultados</li>";
+        }
+    });
+}