dimanche 26 avril 2020

BEGINNER: Removing items from Javascript Array

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