xqft/index.html

## index.html
<!doctype html>
<html lang="es">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Japflix</title>
  >
  <link href="css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="css/style.css">
</head>
<body class="bg-dark">
  <main>
    <div class="text-center container">
      <div class="row py-lg-3">
        <div class="col-lg-6 col-md-8 mx-auto">
          <h1 class="fw-light"><img src="img/japflix.png" alt=""></h1>
          <input type="search" class="form-control" name="buscar" id="inputBuscar" placeholder="Ej.: The Lion King">
          <button class="btn btn-primary m-2" id="btnBuscar">Buscar</button>
        </div>
      </div>
    </div>

    <div class="album">
      <ul class="list-group container" id="lista">

      </ul>
    </div>
  </main>

  <div class="offcanvas offcanvas-top" tabindex="-1" id="movieInfo">
    <div class="offcanvas-header">
      <h2 class="movie-info" name="title"></h2>
    </div>
    <div class="offcanvas-body">
      <p class="movie-info" name="overview"></p>
      <hr>
      <div class="d-flex justify-content-between">
        <p class="movie-info" name="genres"></p>
      </div>
    </div>
    <div class="dropdown">
      <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
        More
      </button>
      <ul class="dropdown-menu">
        <li><span class="dropdown-item">Year: <span class="movie-info" name="release_date"></span></span></li>
        <li><span class="dropdown-item">Runtime: <span class="movie-info" name="runtime"></span> mins</span></li>
        <li><span class="dropdown-item">Budget: USD <span class="movie-info" name="budget"></span></span></li>
        <li><span class="dropdown-item">Revenue: USD <span class="movie-info" name="revenue"></span></span></li>
      </ul>
    </div>
  </div>

  <footer class="text-muted py-3">
    <div class="container">
      <p class="float-end mb-1">
        <a href="#">Volver arriba</a>
      </p>
      <p class="mb-1">Este sitio forma parte de <a href="https://jovenesaprogramar.edu.uy/" target="_blank">
          Jovenes a Programar</a>.
      <p class="mb-1">Generado con fines estrictamente educativos.</p>
    </div>
  </footer>

  <script src="js/bootstrap.bundle.min.js"></script>
  <script src="js/script.js"></script>

</body>

</html>

## 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.setAttribute("data-bs-toggle", "offcanvas");
                    element.setAttribute("data-bs-target", "#movieInfo");
                    element.setAttribute("aria-controls", "movieInfo");

                    element.innerHTML =
                    `<a href="#">
                        <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>
                    </a>`;

                    list.appendChild(element);

                    element.addEventListener("click", (e) => {
                       document.querySelectorAll(".movie-info").forEach(node => {
                            const field = node.getAttribute("name");

                            switch(field) {
                                case "genres":
                                    node.innerHTML = item[field].map(elem => elem.name).join(", ");
                                    break;
                                case "release_date":
                                    node.innerHTML = item[field].split("-")[0];
                                    break;
                                default:
                                    node.innerHTML = item[field];
                            }
                       })
                    });
                }
            }
        })
    });
})

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;
}

## style.css
.img-card-fit {
    object-fit: cover;
    width: 100%;
    height: auto;
}

.img-cont {
    height: 200px;
    overflow: hidden;
    background-color: beige;
}

.card-content{
    height: 150px;
    overflow: auto;
}

main {
    min-height: calc(100vh - 100px);
  }

.fa-star {
   color: white;
}

.checked{
    color: orange;
}

.offcanvas-top{
    height: fit-content;
}

.dropdown {
    position: absolute;
    right: 10px;
    bottom: 1em;
}

a {
    text-decoration: none;
    color: inherit;
    outline: 0;
}
	<!doctype html>
	<html lang="es">

	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Japflix</title>
	>
	<link href="css/bootstrap.min.css" rel="stylesheet">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
	<link rel="stylesheet" href="css/style.css">
	</head>
	<body class="bg-dark">
	<main>
	<div class="text-center container">
	<div class="row py-lg-3">
	<div class="col-lg-6 col-md-8 mx-auto">
	<h1 class="fw-light"><img src="img/japflix.png" alt=""></h1>
	<input type="search" class="form-control" name="buscar" id="inputBuscar" placeholder="Ej.: The Lion King">
	<button class="btn btn-primary m-2" id="btnBuscar">Buscar</button>
	</div>
	</div>
	</div>

	<div class="album">
	<ul class="list-group container" id="lista">

	</ul>
	</div>
	</main>

	<div class="offcanvas offcanvas-top" tabindex="-1" id="movieInfo">
	<div class="offcanvas-header">
	<h2 class="movie-info" name="title"></h2>
	</div>
	<div class="offcanvas-body">
	<p class="movie-info" name="overview"></p>
	<hr>
	<div class="d-flex justify-content-between">
	<p class="movie-info" name="genres"></p>
	</div>
	</div>
	<div class="dropdown">
	<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
	More
	</button>
	<ul class="dropdown-menu">
	<li><span class="dropdown-item">Year: <span class="movie-info" name="release_date"></span></span></li>
	<li><span class="dropdown-item">Runtime: <span class="movie-info" name="runtime"></span> mins</span></li>
	<li><span class="dropdown-item">Budget: USD <span class="movie-info" name="budget"></span></span></li>
	<li><span class="dropdown-item">Revenue: USD <span class="movie-info" name="revenue"></span></span></li>
	</ul>
	</div>
	</div>

	<footer class="text-muted py-3">
	<div class="container">
	<p class="float-end mb-1">
	<a href="#">Volver arriba</a>
	</p>
	<p class="mb-1">Este sitio forma parte de <a href="https://jovenesaprogramar.edu.uy/" target="_blank">
	Jovenes a Programar</a>.
	<p class="mb-1">Generado con fines estrictamente educativos.</p>
	</div>
	</footer>

	<script src="js/bootstrap.bundle.min.js"></script>
	<script src="js/script.js"></script>

	</body>

	</html>
	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.setAttribute("data-bs-toggle", "offcanvas");
	element.setAttribute("data-bs-target", "#movieInfo");
	element.setAttribute("aria-controls", "movieInfo");

	element.innerHTML =
	`<a href="#">
	<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>
	</a>`;

	list.appendChild(element);

	element.addEventListener("click", (e) => {
	document.querySelectorAll(".movie-info").forEach(node => {
	const field = node.getAttribute("name");

	switch(field) {
	case "genres":
	node.innerHTML = item[field].map(elem => elem.name).join(", ");
	break;
	case "release_date":
	node.innerHTML = item[field].split("-")[0];
	break;
	default:
	node.innerHTML = item[field];
	}
	})
	});
	}
	}
	})
	});
	})

	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;
	}
	.img-card-fit {
	object-fit: cover;
	width: 100%;
	height: auto;
	}

	.img-cont {
	height: 200px;
	overflow: hidden;
	background-color: beige;
	}

	.card-content{
	height: 150px;
	overflow: auto;
	}

	main {
	min-height: calc(100vh - 100px);
	}

	.fa-star {
	color: white;
	}

	.checked{
	color: orange;
	}

	.offcanvas-top{
	height: fit-content;
	}

	.dropdown {
	position: absolute;
	right: 10px;
	bottom: 1em;
	}

	a {
	text-decoration: none;
	color: inherit;
	outline: 0;
	}