Skip to content

Instantly share code, notes, and snippets.

@xqft

xqft/index.html

Last active September 29, 2022 16:03
Show Gist options
  • Save xqft/6550526dca37a83bdd1c0c94b8f03549 to your computer and use it in GitHub Desktop.
Save xqft/6550526dca37a83bdd1c0c94b8f03549 to your computer and use it in GitHub Desktop.
Download ZIP
Grupal 4 final
Raw
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>
Raw
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;
}
Raw
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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment