Add CSS styles to element created dynamically in js

JavaScript
,
1

Hi,

I’m doing memory-game.
My code is below:

const game = document.getElementById('game');
let firstCard = null; // at the beginning, firstCard and second cards are setting to 'null'
let secondCard = null;

const config = {
    height: '100px',
    width: '100px',
    src: 'pictures/back-card.jpg',
    position: 'absolute',
    cardsize: 100,
    cardspacing: 10,
    columns: 4,
    rows: 3,
    time: 1000,
    greenBorder: '3px solid #006600',
    redBorder: '3px solid #990000'
}

function createGrid() {
    const cardsIndexes = [] // an empty array, where we are going to push cards
    for (let i = 0; i < config.columns * config.rows / 2; i++) { // 4 * 3 / 2 = 6 cards
        cardsIndexes.push(i); //we are pushing one index / 
        cardsIndexes.push(i); // and then second to 'const cardsIndexes'        
    }

    const shuffleCards = [];
    while (cardsIndexes.length > 0) {
        let random = Math.floor(Math.random() * cardsIndexes.length) // Math.random() is drawing cards form 1 - 12, Math.floor is downward to its nearest integer.
        shuffleCards.push(cardsIndexes[random]); // we are pushing choosed card to empty 'const shuffleCards' from 'cardsIndexes'
        cardsIndexes.splice(random, 1); // we are putting one drawn card to 'const cardsIndexes'
    }

    for (let left = 0; left < config.rows; left++) { // 3 rows
        for (let top = 0; top < config.columns; top++) { // 4 columns
            renderCard(shuffleCards.pop(), left, top); // here, we are taking (remove) drawn card from 'const shuffleCards = []'
        }
    }
}

function renderCard(cardNum, top, left) {
    let card = document.createElement('img');

    card.num = cardNum;
    card.src = config.src;
    card.style.position = config.position;
    card.style.top = (top * (config.cardsize + config.cardspacing) + config.cardspacing) + 'px'; // top = 0,1,2 * (100 + 10) + 10 = 10, 120, 230
    card.style.left = (left * (config.cardsize + config.cardspacing) + config.cardspacing) + 'px'; // left = 0,1,2,3              = 10, 120, 230, 340
    card.style.height = config.height;
    card.style.width = config.width;
    card.onclick = turnCard;
    game.appendChild(card); // we are adding card under game in HTML

}

function turnCard(e) {
    let card = e.target;
    if (firstCard === null) {
        firstCard = card;
        card.src = 'pictures/card' + card.num + '.jpg' // we have to write here 'card.src' to declare exact time (1s) for two clicked cards
    } else if (secondCard === null) {
        secondCard = card;
        card.src = 'pictures/card' + card.num + '.jpg' //   this is a front of card
        setTimeout(checkCards, config.time) // time of showing two cards <= 1s.         

    }

    function transfrom() {       
                   
            card.style.WebkitTransform = 'rotateY(180deg)';
            card.style.WebkitTransform = 'perspective(200px)';
        

    }
    transfrom();

}

function checkCards() {

    if (firstCard.num === secondCard.num) { // if cards are the same,         
        firstCard.style.border = config.greenBorder;
        secondCard.style.border = config.greenBorder;

    } else { // if not, turn back
        firstCard.style.border = config.redBorder;
        secondCard.style.border = config.redBorder;
        firstCard.src = config.src;
        secondCard.src = config.src;
    }

    firstCard = null; // we are resetting the firstCard
    secondCard = null; // we are resetting the secondCard
}

As you can see, I created element tag img dynamically. In function transform() I want to add flipping card animation. It is possible to do that in this way?

Thank you,
Megi

2

Yes you can set transform like this, but note that if you want to apply multiple transformation you’ll have to write them in one line (otherwise the 2nd assignment will overwrite the 1st):

card.style.WebkitTransform = 'rotateY(180deg) perspective(200px)'

If you want to animate this, you can set the transition accordingly. However I’d suggest to put your styles in your actual CSS, and only add a flipped class (say) to the img element. :-)

1 Like
3

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.