I am coding a random quote generator. I almost have it fully coded how I want. I am a beginner in HTML and I've never used Javascript before this weekend. I took from multiple tutorials to code this exactly how I want it and am very proud. I have one last thing I am trying to do. When a item from the array is called, I want it to be removed, stored in another array and when the original array reaches 0, I want it to reset. I know its possible but I am not sure what to add to this script to make it work. Thanks so much for any help.
This is my HTML:
<style type="text/css">
body{
font-family: "Poppins", sans-serif;
background-color: #3F6BFF;
}
.maincontainer{
position:relative;
width: 500px;
height: 300px;
animation:flip 1s;
text-align: center;
margin: 0 auto;
border-radius: 25px;
}
.thecard{
position:relative;
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: all 0.5s ease;
border-radius: 25px;
}
.thecard:active{
transform:rotateY(360deg);
}
.thefront{
position: absolute;
width: 100%;
height: 100%;
padding-right:30px;
padding-left:30px;
backface-visibility: hidden;
background-color: #fff;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
border-radius: 25px;
}
.theback{
position: absolute;
width: 100%;
height: 100%;
padding-right:30px;
padding-left:30px;
backface-visibility: hidden;
transform: rotateY(180deg);
background: #000;
border-radius: 25px;
}
.gameTitleStyle{
font-weight: 800;
font-size:32px;
text-transform: uppercase;
}
.ruleStyle{
position:relative;
top:-20px;
font-style: italic;
}
.questionStyle{
position: relative;
top: 20px;
font-size:18px;
}
</style>
<body>
<div class="maincontainer" id="quoteBtn">
<div class="thecard">
<div class="thefront">
<h1 class="gameTitleStyle" id="gameTitle">Business Name</h1>
<p class="ruleStyle" id="ruleTxt">Rules</p>
<p class="questionStyle" id="quote">Card Description</p>
</div>
<div class="theback"></div>
</div>
</div>
<script src="javascript.js"></script>
</body>
This is my Javascript
const quotes =[
{
game: 'CARD TYPE 1',
quote: "This is the card description for Card Type 1",
rule: "Card Type 1 Rules"
},
{
game: 'CARD TYPE 2',
quote: "This is the card description for Card Type 2",
rule: "Card Type 2 Rules"
},
{
game: 'CARD TYPE 3',
quote: "This is the card description for Card Type 3",
rule: "Card Type 3 Rules"
}
];
const maincontainer = document.querySelector("#quoteBtn");
const questionStyle = document.querySelector("#quote");
const gameTitleStyle = document.querySelector("#gameTitle");
const ruleStyle = document.querySelector("#ruleTxt");
quoteBtn.addEventListener("click", displayQuote);
function displayQuote(){
let number = Math.floor(Math.random() * quotes.length);
gameTitle.innerHTML = quotes[number].game;
quote.innerHTML = quotes[number].quote;
ruleTxt.innerHTML = quotes[number].rule;
}
Aucun commentaire:
Enregistrer un commentaire