这是一个HTML，CSS，JavaScript电影预告片项目。 我想创建每部电影的卡片，其中显示每部电影的信息
我想用网格格式显示电影卡，就像在html CSS中一样。
那么如何在JavaScript中创建并显示网格格式的卡片
请通过我的HTML，CSS，JavaScript代码，键入任何电影，并请运行我的代码在您的设备上准确的输出
如能提供帮助，将不胜感激。
//APIS
const API_KEY='d0bb61e85a438ea9d517dce9f15693aa';
const URL='https://api.themoviedb.org/3/search/movie?api_key=d0bb61e85a438ea9d517dce9f15693aa&query=furious'
const IMAGE_URL = 'https://image.tmdb.org/t/p/w500'
.header-fixed {
background-color:#292c2f;
box-shadow:0 1px 1px #ccc;
padding: 20px 40px;
height: 80px;
color: #ffffff;
box-sizing: border-box;
top:-100px;
-webkit-transition:top 0.3s;
transition:top 0.3s;
}
.header-fixed .header-limiter {
max-width: 1200px;
text-align: center;
margin: 0 auto;
display: grid;
}
/* The header placeholder. It is displayed when the header is fixed to the top of the
browser window, in order to prevent the content of the page from jumping up. */
.header-fixed-placeholder{
height: 80px;
display: none;
}
/* Logo */
.header-fixed .header-limiter h1 {
float: left;
font: normal 28px Cookie, Arial, Helvetica, sans-serif;
line-height: 40px;
margin: 0;
}
.header-fixed .header-limiter h1 span {
color: #5383d3;
}
/* The navigation links */
.header-fixed .header-limiter a {
color: #ffffff;
text-decoration: none;
}
.header-fixed .header-limiter nav {
font:16px Arial, Helvetica, sans-serif;
line-height: 40px;
float: right;
}
.header-fixed .header-limiter nav a{
display: inline-block;
padding: 0 5px;
text-decoration:none;
color: #ffffff;
opacity: 0.9;
}
.header-fixed .header-limiter nav a:hover{
opacity: 1;
}
.header-fixed .header-limiter nav a.selected {
color: #608bd2;
pointer-events: none;
opacity: 1;
}
/* Fixed version of the header */
body.fixed .header-fixed {
padding: 10px 40px;
height: 50px;
position: fixed;
width: 100%;
top: 0;
left: 0;
z-index: 1;
}
body.fixed .header-fixed-placeholder {
display: block;
}
body.fixed .header-fixed .header-limiter h1 {
font-size: 24px;
line-height: 30px;
}
body.fixed .header-fixed .header-limiter nav {
line-height: 28px;
font-size: 13px;
}
/* Form */
.form-group{
display: grid;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 1em;
margin-right: 1em;
height: 30px;
}
#search{
color: #ffffff;
background-color: #5383d3;
min-height: 38px;
font-weight: 400;
text-align: center;
cursor: pointer;
font-size: 1rem;
line-height: 1.5;
padding: 0 auto;
border-radius: 25px;
}
.submit_se{
display: flex;
justify-content: center;
align-items: center;
height:30px;
}
#inputValue{
border-radius: 25px;
border: 2px solid gray;
text-align: center;
}
input[type="text"]::placeholder {
/* Firefox, Chrome, Opera */
text-align: center;
}
<!DOCTYPE html>
<!--my javascript is in my html-->
<!--my javascript include the APIs-->
<!--YOU CAN TRY MY CODE FOR BETTER OUTPUT-->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Movie app</title>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<header class="header-fixed">
<div class="header-limiter">
<h1 class="title" >MOVIE TRAILERS</h1>
</div>
</header>
<div class="container">
<form>
<div class="form-group">
<input type="text" id="inputValue" placeholder="search the trailer">
</div>
<div class="submit_se">
<button type="submit" id="search">Search the movie trailer</button>
</div>
</form>
</div>
<div id="movies-searchable">
</div>
<!--JAVASCRIPT-->
<script>
//Selecting elements from DOM
const buttonElement=document.querySelector('#search');
const inputElement=document.querySelector('#inputValue');
const movieSearchable=document.querySelector('#movies-searchable');
buttonElement.onclick = function(event){
event.preventDefault();
const value = inputElement.value;
const newURL =URL +'&query=' + value;
fetch(newURL)
.then((res ) => res.json())
.then((data) => {
console.log('Data:',data);
const movies = data.results;
const movieBlock = replicateMovieCards(movies);
movieSearchable.appendChild(movieBlock);
})
.catch((error)=> {
console.log("error",error);
})
console.log(value);
}
function movieSection(movies){
return movies.filter((movie) => movie.poster_path !== null).map((movie) =>{
return `
<img src =${IMAGE_URL + movie.poster_path} data-movie-id=${movie.id}/>
<h4 class= "title"><b>Name ${movie.title}</b></h4>
<p class = "des">Synopsis ${movie.overview}</p>
`
;
})
}
function replicateMovieCards(movies){
const movieElement = document.createElement('div');
movieElement.setAttribute('class','card');
const movieTemplate =
` <section class="section">
<div class="container">
</div>
${movieSection(movies)}
</section>
` ;
movieElement.innerHTML= movieTemplate;
return movieElement;
}
</script>
</body>
</html>
```null
您所需要的只是css-grid和一些填充。 我强烈建议您通读以下指南:
https://css-tricks.com/snippets/css/complete-guide-grid/
