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,31 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Buscador de Peliculas y Series</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <div class="contenedor">
+        <h1>Buscador</h1>
+        <hr>
+        <div class="bloque">
+            Seleccione una opción:
+            <select id="miSelector">
+                <option value="peliculas.json">Peliculas</option>
+                <option value="series.json">Series</option>
+            </select>
+        </div>
+        <div class="bloque bloque-busqueda">
+            <input type="text" id="miInput" placeholder="Ingrese para buscar...">
+            <button id="miBoton">Buscar</button>
+        </div>
+        <div class="bloque">
+            <ul id="miListado">
+            </ul>
+        </div>
+    </div>
+</body>
+<script src="script.js"></script>
+</html>
@@ -0,0 +1,21 @@
+{
+    "data": 
+    [ 
+        { "nombre": "BACK TO THE FUTURE", 
+        "sinopsis": "El adolescente Marty McFly es amigo de Doc, un científico al que todos toman por loco. Cuando Doc crea una máquina para viajar en el tiempo, un error fortuito hace que Marty llegue a 1955, año en el que sus futuros padres aún no se habían conocido.",
+        "imagen": "Portadas/Back_to_the_Future.jpg"
+        },
+        { "nombre": "SHREK", 
+        "sinopsis": "Shrek es un ogro antisocial y huraño que ama la soledad y tranquilidad de su pantano, donde disfruta ahuyentando a turbas e intrusos. Un día, su vida normal se interrumpe cuando salva sin querer a un burro parlante, Donkey («Burro» en Hispanoamérica; «Asno» en España), de unos soldados, provocando que este comience a seguirlo y a quedarse con él a la fuerza.",
+        "imagen": "Portadas/Shrek.webp"},
+        { "nombre": "AVATAR", 
+        "sinopsis": "La película se sitúa en el año 2154, donde conocemos a un joven llamado Jake Sully, un marine veterano de guerra y herido en combate que ha quedado parapléjico, es seleccionado para participar en el programa Avatar ocupando el puesto de científico que ocupaba su hermano gemelo recién fallecido e incinerado delante sus propios ojos.",
+        "imagen": "Portadas/Avatar.webp"},
+        { "nombre": "GODZILLA", 
+        "sinopsis": "Ford Brody es un experto de los marines que tiene que ir a Japón para rescatar a su padre. Pronto, los dos hombres se encuentran atrapados en el caos cuando Godzilla, el Rey de los Monstruos, aparece después de pasar décadas debajo del agua.",
+        "imagen": "Portadas/Godzilla.jpg"},
+        { "nombre": "WEATHERING WITH YOU", 
+        "sinopsis": "En junio de 2021, el estudiante de primer año de secundaria Hodaka Morishima escapa de Kōzushima para escapar de su problemática vida familiar a Tokio. Cuando su ferry a la ciudad es golpeado por una tormenta, Keisuke Suga lo salva y le da a Hodaka su tarjeta de presentación.",
+        "imagen": "Portadas/Weathering_With_You.jpg"}
+    ]
+}
@@ -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>";
+        }
+    });
+}
@@ -0,0 +1,15 @@
+{
+    "data": 
+    [ 
+        { "nombre": "FALLOUT", "sinopsis": "Narra la historia de la Easy Company, un batallón estadounidense del regimiento 506 de paracaidistas, que luchó en Europa durante la II Guerra Mundial.",
+        "imagen": "Portadas/FALLOUT.jpg"},
+        { "nombre": "HALO", "sinopsis": "Halo narra un conflicto épico del siglo XXVI entre la humanidad y una amenaza alienígena conocida como el Covenant. Halo entrelazará historias personales profundas con acción, aventura y una visión del futuro ricamente imaginada.",
+        "imagen": "Portadas/HALO.jpg"},
+        { "nombre": "THE WALKING DEAD", "sinopsis": "Basado en la historieta escrita por Robert Kirkman, este drama crudo describe las vidas de un grupo de sobrevivientes que está siempre en movimiento en busca de un hogar seguro durante las semanas y meses de un apocalipsis zombi.",
+        "imagen": "Portadas/Walking_Dead.jpg"},
+        { "nombre": "STRANGER THINGS", "sinopsis": "Cuando un niño desaparece, sus amigos, la familia y la policía se ven envueltos en una serie de eventos misteriosos al tratar de encontrarlo. Mientras tanto, una niña con habilidades especiales aparece en la ciudad.",
+        "imagen": "Portadas/Stranger_Things.jpg"},
+        { "nombre": "THE SIMPSONS", "sinopsis": "La comedia de dibujos animados se centra en una familia que vive en la ciudad de Springfield. La cabeza de la familia Simpson es Homero, quien no es un hombre de familia típico, obrero de una planta nuclear, él hace lo mejor para poder liderar a su familia, pero frecuentemente se da cuenta que son ellos los que lo mandan.",
+        "imagen": "Portadas/SIMPSON.jpg"}
+    ]
+}
@@ -0,0 +1,154 @@
+body {
+    text-align: center;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    background: radial-gradient(
+        circle at top,
+        #1f2933 0%,
+        #0f172a 40%,
+        #020617 100%
+    );
+    color: #ff3a3a;
+    min-height: 100vh;
+}
+
+
+.contenedor {
+    max-width: 900px;
+    margin: 60px auto;
+    padding: 40px;
+    border-radius: 20px;
+    background: rgba(15, 23, 42, 0.75);
+    backdrop-filter: blur(12px);
+    box-shadow:
+        0 20px 50px rgba(0,0,0,0.6),
+        inset 0 1px 0 rgba(255,255,255,0.05);
+}
+
+
+h1 {
+    font-weight: 800;
+    font-size: 3rem;
+    letter-spacing: 2px;
+    text-transform: uppercase;
+    color: #ff4b4b; /* un rojo vibrante */
+    text-shadow: 
+        2px 2px 8px rgba(0, 0, 0, 0.6),
+        0 0 10px rgba(255, 75, 75, 0.5); /* efecto de brillo suave */
+    animation: fadeUp 1s ease forwards;
+    margin-bottom: 20px;
+}
+
+
+
+input, select {
+    width: 65%;
+    height: 38px;
+    padding: 6px 12px;
+    font-size: 15px;
+    background: #020617;
+    color: #e5e7eb;
+    border: 1px solid rgba(255, 255, 255, 0.15);
+}
+
+input::placeholder {
+    color: #9ca3af;
+}
+
+
+button {
+    background: linear-gradient(135deg, #c52222, #a31616);
+    border: none;
+    padding: 12px 22px;
+    border-radius: 10px;
+    color: white;
+    font-weight: 600;
+    cursor: pointer;
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+button:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 5px 30px rgba(197, 34, 34, 0.4);
+}
+
+ul {
+    list-style: none;
+    padding: 0;
+}
+
+li {
+    list-style: none;
+    background: #ffffff;
+    border-radius: 18px;
+    margin: 30px auto;
+    padding: 25px;
+    max-width: 420px;
+    transition: transform 0.35s ease, box-shadow 0.35s ease;
+}
+
+li img {
+    display: block;
+    margin: 15px auto 0;
+    max-width: 220px;
+    border-radius: 14px;
+    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.635);
+    transition: transform 0.4s ease;
+}
+
+li p {
+    opacity: 0;
+    max-height: 0;
+    overflow: hidden;
+    font-style: italic;
+    color: #6a2121;
+    margin-top: 10px;
+    line-height: 1.4;
+    text-align: justify;
+    transform: translateY(-6px);
+    transition:
+        opacity 0.4s ease,
+        max-height 0.4s ease,
+        transform 0.4s ease;
+}
+
+li:hover img {
+    transform: scale(1.05);
+}
+
+li:hover p, li:hover img {
+    display: block;
+    opacity: 1;
+}
+
+li:hover p {
+    opacity: 1;
+    max-height: 200px;
+    transform: translateY(0);
+}
+
+li:hover {
+    transform: translateY(-6px) scale(1.02);
+    box-shadow: 0 5px 30px rgba(255, 0, 0, 0.695);
+}
+
+.bloque {
+    margin: 20px auto;
+    max-width: 500px;
+}
+
+.bloque-busqueda {
+    display: flex;
+    justify-content: center;
+    gap: 8px;
+}
+
+@keyframes fadeUp {
+    from {
+        opacity: 0;
+        transform: translateY(10px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}