diff --git a/Tasks/Task 01/movieSearch/index.html b/Tasks/Task 01/movieSearch/index.html index 9199687..6fe9f03 100644 --- a/Tasks/Task 01/movieSearch/index.html +++ b/Tasks/Task 01/movieSearch/index.html @@ -7,25 +7,41 @@

Movie Search

-
-
- - +
+ +
+ + +
+ + +
+
+
+
+ + +
+
+
+ + Logout +
- - - - - - - - - - - - - -
#PosterNameRatingDescription
+ + + + + + + + + + + + +
#PosterNameRatingDescription
+
diff --git a/Tasks/Task 01/movieSearch/main.js b/Tasks/Task 01/movieSearch/main.js index 511f1a7..4153a5c 100644 --- a/Tasks/Task 01/movieSearch/main.js +++ b/Tasks/Task 01/movieSearch/main.js @@ -1,67 +1,88 @@ const maxRating = 10; +let token; 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; + let loginArea = document.getElementById("loginArea"); + let searchArea = document.getElementById("searchArea"); + token = localStorage.getItem("token"); - form.addEventListener( - "submit", - async (e) => { - e.preventDefault(); - table.hidden = true; - config ??= await queryTMDb("configuration"); + if (token === null) { + searchArea.remove(); - while (table.tBodies.length > 0) { - table.removeChild(table.tBodies[0]); - } + loginArea.querySelector("form").addEventListener( + "submit", + async (e) => { + e.preventDefault(); + token = loginArea.querySelector("input").value; + localStorage.setItem("token", token); + loginArea.replaceWith(searchArea); + }); + } + else { + loginArea.remove(); - let result = await queryTMDb( - "search/movie", - { - include_adult: true, - language: "en-US", - query: textInput.value - }); + let config; + /** + * @type {HTMLTableElement} + */ + let table = document.querySelector("table#output"); + let form = document.getElementById("movieSearch"); + let textInput = form.querySelector("input"); + table.hidden = true; - let tBody = table.createTBody(); - tBody.classList.add("align-middle"); + form.addEventListener( + "submit", + async (e) => { + e.preventDefault(); + table.hidden = true; + config ??= await queryTMDb("configuration"); - 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"); + while (table.tBodies.length > 0) { + table.removeChild(table.tBodies[0]); + } - title.href = `${new URL(`${movie.id}`, "https://themoviedb.org/movie/")}`; - title.classList.add("link-body-emphasis"); - title.target = "_blank"; - title.innerText = movie.title; + let result = await queryTMDb( + "search/movie", + { + include_adult: true, + language: "en-US", + query: textInput.value + }); - poster.src = new URL( - `./${movie.poster_path}`, - new URL( - `${config.images.poster_sizes[0]}/`, - config.images.secure_base_url).toString()).toString(); + let tBody = table.createTBody(); + tBody.classList.add("align-middle"); - 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; - } + 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"); - table.hidden = false; - console.log(config); - console.log(result); - }); + 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); + }); + } }); /** @@ -83,7 +104,8 @@ async function queryTMDb(endpoint, params) { `${url}`, { headers: { - Accept: "application/json" + Accept: "application/json", + Authorization: `Bearer ${token}` } })).json(); }