Skip to content

Commit

Permalink
adj html cards
Browse files Browse the repository at this point in the history
  • Loading branch information
@victorgarrido1
victorgarrido1 committed May 2, 2024
1 parent 841d41a commit 90451f9
Show file tree
Hide file tree
Showing 5 changed files with 101 additions and 101 deletions.
7 changes: 7 additions & 0 deletions assets/css/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 */
}
93 changes: 56 additions & 37 deletions assets/js/api.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -103,32 +114,54 @@ const renderMovieDetails = async (movieId) => {
</div>
</div>`;

// updated content
// Append the movie details to the document body
document.body.appendChild(rootNode);
} catch (error) {
console.error("Error rendering movie details:", error.message);
}
};


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 {
// Fetch movie details using the movie ID
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 = `
<div class="flex justify-left">
<div class="w-96 xl:w-full" style="margin-left: 2rem;">
<div class="relative flex flex-col mt-24 bg-white shadow-md rounded-xl">
<!-- Image container -->
<div class="relative h-96 overflow-hidden overflow-y-visible bg-blue-gray-500/40 rounded-t-xl shadow-blue-gray-500/40 ">
<img id="movie-poster" class="movie-poster-search" src="https://media.themoviedb.org/t/p/w600_and_h900_bestv2/${singleMovie.poster_path}" alt="poster_path"/>
</div>
<!-- Text content container -->
<div class="p-6 flex justify-end"> <!-- Adjusted justify-end class -->
<div class="text-right"> <!-- Add text-right class -->
<div class="movie-details w-64"> <!-- Adjust the width to w-64 (64px) -->
<h5 id="movie-title" class="movie-title-search text-xl font-semibold text-blue-gray-900">${singleMovie.title}</h5>
<p id="movie-description" class="movie-description-search text-base font-light leading-relaxed text-inherit">${singleMovie.overview}</p>
<p>${singleMovie.runtime}</p>
</div>
</div>
</div>
</div>
</div>
</div>
`;
// 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);
}
Expand All @@ -137,7 +170,6 @@ document.addEventListener("DOMContentLoaded", async () => {
}
});


document.addEventListener("DOMContentLoaded", async (e) => {
let results = await geTrendingFilms();

Expand All @@ -148,7 +180,7 @@ document.addEventListener("DOMContentLoaded", async (e) => {
<div class="flex flex-row flex-wrap justify-center">
<div class="relative flex flex-col mt-8 bg-white shadow-md rounded-xl w-96">
<div
class="relative h-56 mx-4 -mt-6 overflow-hidden bg-blue-gray-500/40 rounded-xl shadow-blue-gray-500/40">
class="relative h-56 mx-4 mt-6 overflow-hidden bg-blue-gray-500/40 rounded-xl shadow-blue-gray-500/40">
<img class="movie-poster" src="https://media.themoviedb.org/t/p/w600_and_h900_bestv2/${item.poster_path}" alt="poster_path"/>
</div>
<div class="p-6">
Expand Down Expand Up @@ -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
Expand All @@ -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 = `
<div class="flex flex-row flex-wrap justify-center">
<div class="relative flex flex-col mt-8 bg-white shadow-md rounded-xl w-96">
<div
class="relative h-56 mx-4 -mt-6 overflow-hidden bg-blue-gray-500/40 rounded-xl shadow-blue-gray-500/40">
<img class="movie-poster" src="https://media.themoviedb.org/t/p/w600_and_h900_bestv2/${item.poster_path}" alt="poster_path"/>
</div>
<div class="flex flex-row flex-wrap justify-center h-25">
<div class="relative flex flex-col mt-8 bg-white shadow-md rounded-xl w-96 h-96">
<div class="relative mx-4 -mt-6 overflow-hidden bg-blue-gray-500/40 rounded-xl shadow-blue-gray-500/40">
<img class="movie-poster" src="https://media.themoviedb.org/t/p/w600_and_h900_bestv2/${item.poster_path}" alt="poster_path" object-fit: cover;">
</div>
<div class="p-6">
<h5 class="movie-title text-xl font-semibold text-blue-gray-900">
${item.original_title}
Expand Down
24 changes: 0 additions & 24 deletions assets/js/script.js
View file

This file was deleted.

62 changes: 28 additions & 34 deletions details.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,55 +2,49 @@
<html lang="en">

<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HomeLand Movies</title>
<!-- Link to your custom CSS file -->
<link rel="stylesheet" href="/assets/css/index.css" />
<link rel="stylesheet" href="/assets/css/index.css">
<!-- Link to your favicon -->
<link rel="icon" type="image/png" sizes="32x32" href="/assets/img/favicon.ico">
<!-- Link to Tailwind CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
<!-- Link to Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous" />
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
</head>

<body>
<h3>hello movies</h3>
<!-- HTML markup for the new movie card -->
<div id="movie-details-card" class="box">
<div class="container mx-auto">
<div class="flex size-48">
<div class="size-48">
<div class="relative flex flex-col mt-24 bg-white shadow-md rounded-xl w-96">
<div
class="relative h-96 mx-6-mt-6 overflow-hidden bg-blue-gray-500/40 rounded-xl shadow-blue-gray-500/40">
<img id="movie-poster" class="movie-poster-search" src="" alt="poster_path" />
</div>
<div class="p-6">
<h5 id="movie-title" class="movie-title-search text-xl font-semibold text-blue-gray-900">
</h5>
<p id="movie-description"
class="movie-description-search h-24 text-base font-light leading-relaxed text-inherit">
</p>
</div>
</div>
</div>
</div>
</div>
<header class="mb-9">
<a href="index.html" class="block">
<div id="main-text-bar"></div>
<h2 class="mb-2 mt-0 text-4xl font-medium leading-tight text-primary">
HomeLand Movies: A Collection of Movies
</h2>
</a>
</header>

<main>
<!-- HTML markup for the new movie card -->
</main>

<!-- Using utilities: -->
<div class="flex flex-row ml-32 py-3">
<a href="./index.html" class="inline-block">
<button class="font-bold text-center uppercase text-xs py-3 px-6 rounded-lg bg-gray-900 text-white shadow-md hover:shadow-lg focus:opacity-[0.85] focus:shadow-none active:opacity-[0.85] active:shadow-none learn-more-button">
Go Back
</button>
</a>
</div>




<a href="./index.html" class="btn btn-block btn-danger">&larr; Go back.</a>


<footer class="text-center">
© 2024 My New Website Productions
</footer>

<!-- Script placeholder -->
<script src="/assets/js/api.js"></script>

</body>
</body>

</html>
16 changes: 10 additions & 6 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,15 +16,19 @@
<title>Movies App</title>
</head>


<body>
<header>
<div id="main-text-bar"></div>
<h1 id="main-page-text" style="text-align: center;"><a href="index.html">Welcome to the Movies!</a></h1> </header>
<header class="mb-9">
<a href="index.html" class="block"> <!-- Add href attribute with index.html -->
<div id="main-text-bar"></div>
<h2 class="mb-2 mt-0 text-4xl font-medium leading-tight text-primary">
HomeLand Movies: A Collection of Movies
</h2>
</a>
</header>
<main>

<!-- Here we have the global search button -->
<form class="max-w-md mx-auto">
<form class="max-w-md mx-auto mb-8">
<label for="default-search" class="mb-2 text-sm font-medium text-gray-900 sr-only dark:text-white">Search</label>
<div class="relative">
<div class="absolute inset-y-1 -left-3 flex items-center ps-3 pointer-events-none">
Expand All @@ -50,4 +54,4 @@ <h1 id="main-page-text" style="text-align: center;"><a href="index.html">Welcome
</footer>
<!-- Script placeholder -->
<script src="/assets/js/api.js"></script>
</body>
</body>

0 comments on commit 90451f9

Please sign in to comment.