Grupal 4

script.js

const MOVIES_URL = "https://japceibal.github.io/japflix_api/movies-data.json";

async function getData() {
    const response = await fetch(MOVIES_URL);
    return response.json();        
}
const datos = getData();

document.addEventListener("DOMContentLoaded", async () => {
    const input = document.querySelector("#inputBuscar");
    const boton = document.querySelector("#btnBuscar");
    
    datos.then((data) => {
        boton.addEventListener("click", async () => {
            if (input.value) {
                const filtered = filterSearch(data, input);
                const list = document.querySelector("#lista");

                list.innerHTML = null;
                for (const item of filtered) {
                    const element = document.createElement("li");
                    element.classList.add("list-group-item", "bg-dark", "text-white");

                    element.innerHTML =
                    `<div class="d-flex justify-content-between">
                        <strong>${item.title}</strong>
                        <span>${genStarRating(item.vote_average * 0.5)}</span>
                    </div>
                    <p class="text-muted"><em>${item.tagline}</em></p>`;

                    list.appendChild(element);

                    element.addEventListener("click", (e) => {
                        console.log("abierto");
                    });
                }
            }
        })
    });
})

function genStarRating(score) {
    let result = "";
    
    for (let i = 0; i < 5; i++)
        result += `<span class="fa fa-star ${i < Math.floor(score) ? 'checked' : ''}"></span>`;
    return result;
}

function filterSearch(data, input) {
    return data.filter(item => {
        let matches = 0;
        for (word of input.value.split(" "))
            matches += matchArray(item.genres, word) + match(item.title, word) + match(item.overview, word) + match(item.tagline, word);
        return matches >= (input.value.split(" ").length * 4) / 2; // 4 matches por cada palabra
    });
}

function match(text, word) {
    if(text.toLowerCase().search(word.toLowerCase()) === -1)
        return 0;
    else return 1;
}

function matchArray(array, word) {
   for (const item of array)
    if (match(item.name, word)){
        return 1
    }
    return 0;
}