I'm attempting to add animation to my random quote generator by making it look like another card is being flipped on top of the existing one, similar to a deck of cards. With limited coding knowledge, I followed a tutorial and made some adjustments to achieve the desired functionality. Here is the code I have so far. Can anyone help me figure out how to implement this animation? Once I have this feature added, the card will function exactly as I envision.
<!DOCTYPE html>
<html>
<head>
<title>Quote Gen</title>
</head>
<style type="text/css">
.cardbutton{
width: 540px;
height: 300px;
border-width: 12px;
border-style: solid;
border-color: #02fad1;
background-color: #fff;
border-radius: 25px;
}
.wrapper {
display: flex;
align-items: center;
justify-content: center;
}
</style>
<body>
<h1>Simple Quote Generator</h1>
<div class="wrapper">
<button onclick="newQuote()" class="cardbutton" style="padding-right:15px; padding-left:15px;">
<h1 style="font-family:poppins; position: absolute; top:100px; left:50%; margin-left:-83px;">MOST LIKELY TO</h1>
<p id="quoteDisplay" style="position: relative; top:20px;">Whoever is most likely to, drinks!</p>
</button>
</div>
<script src="javascript.js"></script>
</body>
</html>
Below is my JavaScript code.
var quotes = [
'Who do you want to make out with the most?',
'If you had to flash just one person in this room, who would it be?',
'If you haven't had your first kiss yet, who in this room do you want to have your first kiss with?',
'Of the people in this room, who would you go out with?',
'Describe the most attractive thing about each person in this room.',
'Who here do you think is the best flirt?',
'Who has the best smile?',
'Who has the cutest nose?',
'How about prettiest eyes?',
'Who's the funniest in this room?'
]
function newQuote() {
var randomNumber = Math.floor(Math.random() * (quotes.length));
document.getElementById('quoteDisplay').innerHTML = quotes[randomNumber];
}