So, I'm getting an API response from the node backend which I then want to display on my HTML page using javascript template literals. Styles for the body, HTML, and some HTML content do get applied ut the styles for that page do not get applied to data that is being rendered using template literals and appears as plain html tags on screen.
HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Movies</title>
<link rel="stylesheet" href="/css/homepage.css" />
</head>
<body>
<section id="section">
<div id="g"></div>
<div class="card">
<div class="card_img">
<img
src="https://images.unsplash.com/photo-1621570170764-306af40c39eb?ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxfHx8ZW58MHx8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&q=60"
alt=""
class="movie_poster"
/>
</div>
<div class="card-body">
<p class="movie_title">Lorem ipsum dolor sit amet consectetur.</p>
<div class="movie_desc">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos
temporibus aliquam pariatur consequatur, exercitationem ex? Nulla
aperiam architecto illum, similique sint minus velit culpa nesciunt
corporis at distinctio possimus a.
</div>
<div class="movie_extra_details">
Lorem ipsum dolor sit amet consectetur.
</div>
</div>
</div>
</section>
<script>
try {
fetch("/home/movies", {
method: "POST",
body: JSON.stringify({ page_number: 1 }),
headers: {
"Content-type": "application/json;charset=UTF-8",
auth_token: localStorage.getItem("jwtToken"),
},
})
.then((response) => {
return response.json();
})
.then((data) => {
console.log(data);
show_movies_list(data);
});
} catch (err) {
console.log(err);
}
function show_movies_list({ message: { results } }) {
for (let index = 1; index < 2; index++) {
const element = results[index];
const { poster_path, overview, title, id, original_language, adult } =
element;
let cdds = `
<div class="card">
<div class="card_img">
<img
src= ${poster_path}
alt=""
class="movie_poster"
/>
</div>
<div class="card-body">
<p class="movie_title">${title}</p>
<div class="movie_desc">
${overview}
</div>
<div class="movie_extra_details">
${original_language} ${adult ? "Adult" : "UA"}
</div>
</div>
</div>
`;
document.getElementById("g").append(cdds);
}
}
</script>
</body>
</html>
CSS Code
html,
body {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Roboto", sans-serif;
color: #fff;
background-color: #000;
}
.card {
display: flex;
flex-direction: column;
width: 300px;
height: 200px;
background-color: lightcoral;
}
.card-body {
display: none;
padding: 5%;
}
.card_img img {
width: 300px;
height: 200px;
}
.card:hover {
transition: 0.5s ease-in;
height: auto;
}
.card:hover .card-body {
display: block;
transition: 0.5s ease;
}
OUTPUTS
Do y'all need to node backend code too
