I'm trying to create a random movie generator. I've already created a generator that displays a new movie after a button is clicked. But I want to create a table that will display more information about each movie that is generated i.e the director, genre, year etc. I want this information to be generated into a table each time and the correct data to be under the correct heading in the table.
Example of how the data would look
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>Movie Generator</title>
</head>
<body><div class="container">
<div class="row flex-top justify-content-center">
<header class="border shadow">
<h1>Movie Generator</h1>
</header>
</div>
<div class="row flex-top justify-content-center">
<button id="button" class="btn-large new-movie-button" onClick="getMovie()">New Movie</button>
</div>
<div class="row justify-content-center">
<main class="card">
<p class="movie card-body center" id="newMovieSection"></p>
</main>
</div>
</div>
<script src="movie.js"></script>
</body>
</html>
CSS so far:
header {
padding: 2em;
background-color: black;
margin-top: 2em;
text-align: center;
color: white;
}
.movie {
font-size: 2em;
}
.btn-large {
margin: 0.5em
}
.card {
text-align: center;
width: 45em;
}
.new-movie-button{
background-color: rgb(77, 87, 97);
border-color: black;
color: white;
}
button:hover {
background-color: rgb(142, 155, 168);
color: white;
}
JavaScript so far:
var movies = [
"Twilight",
"The Twilight Saga: New Moon",
"The Twilight Saga: Eclipse",
"The Twilight Saga: Breaking Dawn - Part 1",
"The Twilight Saga: Breaking Dawn - Part 2",
"Star Wars: Episode IV - A New Hope ",
"Star Wars: Episode V - The Empire Strikes Back",
"Star Wars: Episode VI - Return of the Jedi",
"Star Wars: Episode I - The Phantom Menace",
"Star Wars: Episode II - Attack of the Clones",
"Star Wars: Episode III - Revenge of the Sith",
"Star Wars: Episode VII - The Force Awakens ",
"Star Wars: Episode VIII - The Last Jedi ",
"Star Wars: The Rise of Skywalker",
"Rogue One: A Star Wars Story",
"Iron Man ",
"Iron Man 2",
"Iron Man 3",
"The Incredible Hulk",
"Thor",
"Thor: The Dark World",
"Thor: Ragnarok",
"Captian America: The First Avenger ",
"Captian America: The Winter Soldier",
"Captian America: Civil War",
"Avengers Assemble ",
"Avengers: Age of Ultron ",
"Avengers: Infinity War",
"Avengers: Endgame",
"Black Panther ",
"Doctor Strange ",
"Ant-Man",
"Ant-Man and the Wasp",
"Spider-Man: Homecoming ",
"Spider-Man: Far from Home",
"Guardians of the Galaxy ",
"Guardians of the Galaxy Vol.2",
"Harry Potter and the Philosopher's Stone ",
"Harry Potter and the Chamber of Secrets ",
"Harry Potter and the Prisoner of Azkaban ",
"Harry Potter and the Goblet of Fire ",
"Harry Potter and the Order of the Phoenix ",
"Harry Potter and the Half-Blood Prince ",
"Harry Potter and the Deathly Hallows: Part 1 ",
"Harry Potter and the Deathly Hallows: Part 2",
"The Lord of the Rings: The Fellowship of the Ring ",
"The Lord of the Rings: The Two Towers ",
"The Lord of the Rings: The Return of the King ",
"The Hobbit: An Unexpected Journey ",
"The Hobbit: The Desolation of Smaug ",
"The Hobbit: The Battle of Five Armies ",
"Spider-Man",
"Spider-Man 2",
"Spider-Man 3",
"Mission: Impossible ",
"Mission: Impossible II",
"Mission: Impossible III",
"Mission: Impossible - Ghost Protocol",
"Mission: Impossible - Rogue Nation ",
"Mission: Impossible - Fallout ",
"Rise of the Planet of the Apes",
"Dawn of the Planet of the Apes",
"War for the Planet of the Apes",
"The Bourne Identity ",
"The Bourne Supremacy",
"The Bourne Ultimatum ",
"The Bourne Legacy",
"Jason Bourne ",
"The Amazing Spider-Man ",
"The Amazing Spider-Man 2",
"Jurassic Park",
"The Lost World: Jurassic Park",
"Jurassic Park III",
"Jurassic World",
"Jurassic World: Fallen Kingdom",
"Jumanji",
"Jumanji: Welcome to the Jungle",
"Jumanji: The Next Level",
"The Fast and the Furious ",
"2 Fast 2 Furious",
"The Fast and the Furious: Tokyo Drift ",
"Fast & Furious",
"Fast & Furious 5",
"Fast & Furious 6",
"Fast & Furious 7",
"Fast & Furious 8",
"Fast & Furious: Hobbs & Shaw",
"Transformers",
"Transformers: Revenge of the Fallen",
"Transformers: Dark of the Moon",
"Transformers: Age of Extinction",
"Transformers: The Last Knight ",
"X-Men",
"X2",
"X-Men: The Last Stand",
"X-Men Origins: Wolverine ",
"X-Men: First Class",
"The Wolverine ",
"X-Men: Days of Future Past",
"Logan",
]
function getMovie() {
var randomNumber = Math.floor(Math.random() * movies.length);
document.getElementById("newMovieSection").innerHTML = movies[randomNumber];
}
Aucun commentaire:
Enregistrer un commentaire