I am trying to get my random quote generator to animate. I would like the animation to look like another card, in the same style is being flipped on top of this one, similar to a deck of cards. I don't know much about animation and have minimal coding knowledge, so I built this with a tutorial and then some edits to get it to function exactly how I wanted. Below is my code. Does any one know how I could add to this to complete that function? It is the last thing, I need to have the card function exactly how I want it.
<!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>
<!--
<button onclick="newQuote()" id="quoteDisplay" class="button">Drinking Game</button>
-->
<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>
This is my Javascript.
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];
}
Aucun commentaire:
Enregistrer un commentaire