diff --git a/assets/css/index.css b/assets/css/index.css index 4ae00ac..e008f48 100644 --- a/assets/css/index.css +++ b/assets/css/index.css @@ -16,3 +16,10 @@ justify-content: center; /* Horizontally center the content */ align-items: center; /* Vertically center the content */ } + +/* Hide the default link styling */ +a { + text-decoration: none; /* Remove underline */ + color: inherit; /* Inherit color from parent */ + cursor: pointer; /* Change cursor to pointer */ +} diff --git a/assets/js/api.js b/assets/js/api.js index 720c034..27310fc 100644 --- a/assets/js/api.js +++ b/assets/js/api.js @@ -8,6 +8,26 @@ const options = { }, }; +// Function to perform movie search +// Function to fetch movie data from the API +const searchOptions = { + method: "GET", + headers: { + accept: "application/json", + Authorization: + "Bearer eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiI4YzNhNGM2NWM0YmIxNjQyYmQxZGIwNDdiMGFiYmMwYyIsInN1YiI6IjY1Njk3ZjVjZWVlMTg2MDBhZTYzNmI0MCIsInNjb3BlcyI6WyJhcGlfcmVhZCJdLCJ2ZXJzaW9uIjoxfQ.IwECgYGXPKl2a4YxM9NGuyM-TIDJOXXpJSlaeQz6NL4", + }, +}; + +const singleOptions = { + method: "GET", + headers: { + accept: "application/json", + Authorization: + "Bearer eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiI4YzNhNGM2NWM0YmIxNjQyYmQxZGIwNDdiMGFiYmMwYyIsInN1YiI6IjY1Njk3ZjVjZWVlMTg2MDBhZTYzNmI0MCIsInNjb3BlcyI6WyJhcGlfcmVhZCJdLCJ2ZXJzaW9uIjoxfQ.IwECgYGXPKl2a4YxM9NGuyM-TIDJOXXpJSlaeQz6NL4", + }, +}; + const geTrendingFilms = async () => { try { const response = await fetch( @@ -42,15 +62,6 @@ const getMovies = async (query = null, options = {}) => { } }; -const singleOptions = { - method: "GET", - headers: { - accept: "application/json", - Authorization: - "Bearer eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiI4YzNhNGM2NWM0YmIxNjQyYmQxZGIwNDdiMGFiYmMwYyIsInN1YiI6IjY1Njk3ZjVjZWVlMTg2MDBhZTYzNmI0MCIsInNjb3BlcyI6WyJhcGlfcmVhZCJdLCJ2ZXJzaW9uIjoxfQ.IwECgYGXPKl2a4YxM9NGuyM-TIDJOXXpJSlaeQz6NL4", - }, -}; - // Function to fetch details of a single movie const getMovie = async (movieId) => { try { @@ -103,6 +114,7 @@ const renderMovieDetails = async (movieId) => { `; + // updated content // Append the movie details to the document body document.body.appendChild(rootNode); } catch (error) { @@ -110,11 +122,11 @@ const renderMovieDetails = async (movieId) => { } }; - document.addEventListener("DOMContentLoaded", async () => { // Retrieve the movie ID from the URL parameters const urlParams = new URLSearchParams(window.location.search); const movieId = urlParams.get("id"); + console.log(movieId); if (movieId) { try { @@ -122,13 +134,34 @@ document.addEventListener("DOMContentLoaded", async () => { const singleMovie = await getMovie(movieId); console.log(singleMovie); - // Populate the HTML elements with movie details - document.getElementById("movie-title").textContent = singleMovie.title; - document.getElementById("movie-description").textContent = - singleMovie.overview; - document.getElementById( - "movie-poster" - ).src = `https://media.themoviedb.org/t/p/w600_and_h900_bestv2/${singleMovie.poster_path}`; + // Create a new div to hold the movie details + const movieDetailsDiv = document.createElement("div"); + movieDetailsDiv.classList.add("container", "mx-auto"); + movieDetailsDiv.innerHTML = ` +
+
+
+ +
+ poster_path +
+ +
+
+
+
${singleMovie.title}
+

${singleMovie.overview}

+

${singleMovie.runtime}

+
+
+
+
+
+
+ + `; + // Append the movie details div to the main section of the page + document.querySelector("main").appendChild(movieDetailsDiv); } catch (error) { console.error("Error fetching movie details:", error); } @@ -137,7 +170,6 @@ document.addEventListener("DOMContentLoaded", async () => { } }); - document.addEventListener("DOMContentLoaded", async (e) => { let results = await geTrendingFilms(); @@ -148,7 +180,7 @@ document.addEventListener("DOMContentLoaded", async (e) => {
+ class="relative h-56 mx-4 mt-6 overflow-hidden bg-blue-gray-500/40 rounded-xl shadow-blue-gray-500/40"> poster_path
@@ -184,17 +216,6 @@ document.addEventListener("DOMContentLoaded", async (e) => { let inputMovie = document.querySelector(".movie-search-input"); let movieBtn = document.querySelector(".movie-search-btn"); -// Function to perform movie search -// Function to fetch movie data from the API -const searchOptions = { - method: "GET", - headers: { - accept: "application/json", - Authorization: - "Bearer eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiI4YzNhNGM2NWM0YmIxNjQyYmQxZGIwNDdiMGFiYmMwYyIsInN1YiI6IjY1Njk3ZjVjZWVlMTg2MDBhZTYzNmI0MCIsInNjb3BlcyI6WyJhcGlfcmVhZCJdLCJ2ZXJzaW9uIjoxfQ.IwECgYGXPKl2a4YxM9NGuyM-TIDJOXXpJSlaeQz6NL4", - }, -}; - // Event listener for the button click movieBtn.addEventListener("click", async function (e) { e.preventDefault(); // Prevent default form submission behavior //Err in 113 @@ -205,17 +226,15 @@ movieBtn.addEventListener("click", async function (e) { document.getElementById("movie-container").innerHTML = ""; - results.results.forEach((item) => { //convert item into the html element const rootNode = document.createElement("div"); rootNode.innerHTML = ` -
-
-
- poster_path -
+
+
+
+ poster_path +
${item.original_title} diff --git a/assets/js/script.js b/assets/js/script.js deleted file mode 100644 index 50a62cb..0000000 --- a/assets/js/script.js +++ /dev/null @@ -1,24 +0,0 @@ -// const searchOptions = { -// method: "GET", -// headers: { -// accept: "application/json", -// Authorization: -// "Bearer eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiI4YzNhNGM2NWM0YmIxNjQyYmQxZGIwNDdiMGFiYmMwYyIsInN1YiI6IjY1Njk3ZjVjZWVlMTg2MDBhZTYzNmI0MCIsInNjb3BlcyI6WyJhcGlfcmVhZCJdLCJ2ZXJzaW9uIjoxfQ.IwECgYGXPKl2a4YxM9NGuyM-TIDJOXXpJSlaeQz6NL4", -// }, -// }; - -// const getMovies = async (query = null, options = {}) => { -// try { -// const response = await fetch( -// `https://api.themoviedb.org/3/search/movie?query=${query}&include_adult=false&language=en-US&page=1`, -// searchOptions -// ); - -// // Parse response as JSON -// const data = await response.json(); -// return data; -// } catch (error) { -// console.error("Error fetching movies:", error); -// throw error; // Rethrow the error for handling outside this function -// } -// } \ No newline at end of file diff --git a/details.html b/details.html index 123b0bb..f54ebe8 100644 --- a/details.html +++ b/details.html @@ -2,55 +2,49 @@ - - + + + HomeLand Movies - + + integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous"> -

hello movies

- -
-
-
-
-
-
- poster_path -
-
-
-
-

-

-
-
-
-
-
+
+ +
+

+ HomeLand Movies: A Collection of Movies +

+ +
+ +
+ +
+ + +
+ + +
- - - - ← Go back. - -
© 2024 My New Website Productions
+ - - \ No newline at end of file + + \ No newline at end of file diff --git a/index.html b/index.html index a4811d8..b7732fe 100644 --- a/index.html +++ b/index.html @@ -16,15 +16,19 @@ Movies App - -
-
-

Welcome to the Movies!

+
+ +
+

+ HomeLand Movies: A Collection of Movies +

+ +
-
+
@@ -50,4 +54,4 @@

Welcome - \ No newline at end of file +