Create a draft search app
This commit is contained in:
parent
187b450f85
commit
2b54da80b1
2 changed files with 150 additions and 0 deletions
34
Tasks/Task 01/movieSearch/index.html
Normal file
34
Tasks/Task 01/movieSearch/index.html
Normal file
|
|
@ -0,0 +1,34 @@
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<title>Movie Search</title>
|
||||||
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="container my-5">
|
||||||
|
<h1>Movie Search</h1>
|
||||||
|
<form id="movieSearch" class="mb-3">
|
||||||
|
<div class="input-group mb-3">
|
||||||
|
<input class="form-control">
|
||||||
|
<button class="btn btn-primary" type="submit">Search</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
<table id="output" class="table">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th scope="col">#</th>
|
||||||
|
<th scope="col">Poster</th>
|
||||||
|
<th scope="col">Name</th>
|
||||||
|
<th scope="col">Rating</th>
|
||||||
|
<th scope="col">Description</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" crossorigin="anonymous"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js" crossorigin="anonymous"></script>
|
||||||
|
<script src="./main.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
116
Tasks/Task 01/movieSearch/main.js
Normal file
116
Tasks/Task 01/movieSearch/main.js
Normal file
|
|
@ -0,0 +1,116 @@
|
||||||
|
const maxRating = 10;
|
||||||
|
|
||||||
|
window.addEventListener(
|
||||||
|
"load",
|
||||||
|
(e) => {
|
||||||
|
let config;
|
||||||
|
/**
|
||||||
|
* @type {HTMLTableElement}
|
||||||
|
*/
|
||||||
|
let table = document.querySelector("table#output");
|
||||||
|
let form = document.getElementById("movieSearch");
|
||||||
|
let textInput = form.querySelector("input");
|
||||||
|
table.hidden = true;
|
||||||
|
|
||||||
|
form.addEventListener(
|
||||||
|
"submit",
|
||||||
|
async (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
table.hidden = true;
|
||||||
|
config ??= await queryTMDb("configuration");
|
||||||
|
|
||||||
|
while (table.tBodies.length > 0) {
|
||||||
|
table.removeChild(table.tBodies[0]);
|
||||||
|
}
|
||||||
|
|
||||||
|
let result = await queryTMDb(
|
||||||
|
"search/movie",
|
||||||
|
{
|
||||||
|
include_adult: true,
|
||||||
|
language: "en-US",
|
||||||
|
query: textInput.value
|
||||||
|
});
|
||||||
|
|
||||||
|
let tBody = table.createTBody();
|
||||||
|
tBody.classList.add("align-middle");
|
||||||
|
|
||||||
|
for (let i = 0; i < result.results.length; i++) {
|
||||||
|
let movie = result.results[i];
|
||||||
|
let row = tBody.insertRow();
|
||||||
|
let title = document.createElement("a");
|
||||||
|
let poster = document.createElement("img");
|
||||||
|
|
||||||
|
title.href = `${new URL(`${movie.id}`, "https://themoviedb.org/movie/")}`;
|
||||||
|
title.classList.add("link-body-emphasis");
|
||||||
|
title.target = "_blank";
|
||||||
|
title.innerText = movie.title;
|
||||||
|
|
||||||
|
poster.src = new URL(
|
||||||
|
`./${movie.poster_path}`,
|
||||||
|
new URL(
|
||||||
|
`${config.images.poster_sizes[0]}/`,
|
||||||
|
config.images.secure_base_url).toString()).toString();
|
||||||
|
|
||||||
|
row.insertCell().innerText = `#${i + 1}`;
|
||||||
|
row.insertCell().appendChild(poster);
|
||||||
|
row.insertCell().appendChild(title);
|
||||||
|
row.insertCell().appendChild(createRating(movie.vote_average));
|
||||||
|
row.insertCell().innerText = movie.overview;
|
||||||
|
}
|
||||||
|
|
||||||
|
table.hidden = false;
|
||||||
|
console.log(config);
|
||||||
|
console.log(result);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Queries an endpoint of the TMDb API.
|
||||||
|
*
|
||||||
|
* @param {string} endpoint
|
||||||
|
* @param {Record<string, string>} params
|
||||||
|
* The parameters to send to the API.
|
||||||
|
*/
|
||||||
|
async function queryTMDb(endpoint, params) {
|
||||||
|
let url = new URL(endpoint, "https://api.themoviedb.org/3/");
|
||||||
|
|
||||||
|
for (let param in params) {
|
||||||
|
url.searchParams.append(param, `${params[param]}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
await fetch(
|
||||||
|
`${url}`,
|
||||||
|
{
|
||||||
|
headers: {
|
||||||
|
Accept: "application/json"
|
||||||
|
}
|
||||||
|
})).json();
|
||||||
|
}
|
||||||
|
|
||||||
|
function createRating(rating) {
|
||||||
|
let progressBar = document.createElement("div");
|
||||||
|
let indicator = progressBar.appendChild(document.createElement("div"));
|
||||||
|
let rounded = Math.round(rating * 10) / 10;
|
||||||
|
|
||||||
|
progressBar.style.minWidth = "10rem";
|
||||||
|
progressBar.classList.add("progress");
|
||||||
|
|
||||||
|
for (
|
||||||
|
let attribute of
|
||||||
|
[
|
||||||
|
["role", "progressbar"],
|
||||||
|
["aria-label", "Rating"],
|
||||||
|
["aria-valuenow", `${rating}`],
|
||||||
|
["aria-valuemin", `${0}`],
|
||||||
|
["aria-valuemax", `${maxRating}`]
|
||||||
|
])
|
||||||
|
{
|
||||||
|
progressBar.setAttribute(attribute[0], attribute[1]);
|
||||||
|
}
|
||||||
|
|
||||||
|
indicator.classList.add("progress-bar", "text-bg-warning", "overflow-visible");
|
||||||
|
indicator.style.width = `${rating * 10}%`;
|
||||||
|
indicator.textContent = `${rounded}/${maxRating}`;
|
||||||
|
return progressBar;
|
||||||
|
}
|
||||||
Loading…
Reference in a new issue