I currently have a random movie generator and I would like to add the movie poster/image every time a new movie is generated. The movies are randomly generated and displayed within a table. What would I need to do to display the movie poster for the random movie generated each time?
HTML so far:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<link rel="stylesheet" href="movie.css">
<title>The Movie Connoisseur</title>
</head>
<body>
<div class="container">
<div class="row flex-top justify-content-center">
<header class="border shadow">
<h1>The Movie Connoisseur</h1>
</header>
<pre>
</div>
<table style="width:100%">
<caption>Random Movie Generator</caption>
<thead>
<tr>
<th>Title</th>
<th>Genre</th>
<th>Director</th>
<th>Length(Hours)</th>
<th>Year</th>
</tr>
</thead>
<tbody>
<tr>
<td id="newMovieTitle"></td>
<td id="newMovieGenre"></td>
<td id="newMovieDirector"></td>
<td id="newMovieLength"></td>
<td id="newMovieYear"></td>
</tr>
</tbody>
</table>
<button id="button" class="btn-large new-movie-button" onClick="getMovie()">New Movie</button>
</div>
</div>
<script src="movie.js"></script>
</pre>
</body>
</html>
JavaScript so far:
const movies = [
{
title: 'Star Wars Episode IV: A New Hope',
genre: 'Adventure',
director: 'George Lucas',
year: '1977',
length: '2.01',
},
{
title: 'Mission: Impossible III',
genre: 'Adventure',
director: 'J. J. Abrams',
year: '2006',
length: '2.06',
},
{
title: 'Spider-Man 2',
genre: 'Adventure',
director: 'Sam Raimi',
year: '2004',
length: '2.07',
},
{
title:'Twilight ',
director:'Catherine Hardwick',
genre:'Drama ',
year:'2008',
length: '2.02',
},
{
title:'The Twilight Saga: New Moon',
director:'Chris Weitz',
genre:'Drama ',
year:'2009',
length: '2.1',
},
{
title: 'The Twilight Saga: Eclipse',
director: 'David Slade',
genre: 'Drama ',
year: '2010',
length: '2.04',
},
{
title: 'The Twilight Saga: Breaking Dawn - Part 1',
director: 'Bill Condon',
genre: 'Drama ',
year: '2011',
length: '1.57',
},
{
title: 'The Twilight Saga: Breaking Dawn - Part 2',
director: 'Bill Condon',
genre: 'Drama ',
year: '2012',
length: '1.55',
},
{
title: 'Star Wars: Episode V - The Empire Strikes Back',
director: 'Irvin Kershner',
genre: 'Adventure ',
year: '1980',
length: '2.04',
},
{
title: 'Star Wars: Episode VI - Return of the Jedi',
director: 'Richard Marquand',
genre: 'Adventure ',
year: '1983',
length: '2.11',
},
{
title: 'Star Wars: Episode I - The Phantom Menace',
director: 'George Lucas',
genre: 'Adventure ',
year: '1999',
length: '2.16',
},
{
title: 'Star Wars: Episode II - Attack of the Clones',
director: 'George Lucas',
genre: 'Adventure ',
year: '2002',
length: '2.22',
},
{
title: 'Star Wars: Episode III - Revenge of the Sith',
director: 'George Lucas',
genre: 'Adventure ',
year: '2005',
length: '2.2',
},
{
title: 'Star Wars: Episode VII - The Force Awakens ',
director: 'J.J. Abrams',
genre: 'Adventure ',
year: '2015',
length: '2.18',
},
];
const titleCell = document.getElementById('newMovieTitle');
const genreCell = document.getElementById('newMovieGenre');
const directorCell = document.getElementById('newMovieDirector');
const lengthCell = document.getElementById('newMovieLength');
const yearCell = document.getElementById('newMovieYear');
function getMovie() {
const randomNumber = Math.floor(Math.random() * movies.length);
const newMovie = movies[randomNumber];
titleCell.textContent = newMovie.title;
genreCell.textContent = newMovie.genre;
directorCell.textContent = newMovie.director;
lengthCell.textContent = newMovie.length;
yearCell.textContent = newMovie.year;
}
Aucun commentaire:
Enregistrer un commentaire