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