adding 'unflipped' to my cards

spenserg92 commented 9 months ago

What's the problem you're trying to solve?

I'm trying to add unflipped to my cards

Post any code you think might be relevant (one fenced block per file)

gameBoard.forEach((card, index) => {
    card.dataset.index = index;
    card.classList.add('unflipped');
    card.addEventListener('click', init)
    card.style.backgroundImage = `url(${shuffledImages[index]})`;
})

function init(){
    matchesFound = 0;
    tries = 3;
    canClick = true;
    selectedCards = [];

    gameBoard.forEach(card => {
        card.classList.remove('visible');
    })

    const reshuffledImages = shuffleArray(images);

    gameBoard.forEach((card, index) => {
        card.style.backgroundImage = `url(${reshuffledImages[index]})`
    });
}

If you see an error message, post it here. If you don't, what unexpected behavior are you seeing?

What is your best guess as to the source of the problem?

Something more in the init function?

What things have you already tried to solve the problem?

adding a classList

Paste a link to your repository here

https://github.com/spenserg92/Memory-Game

timmshinbone commented 9 months ago

share the gameboard variable, what is it?

spenserg92 commented 9 months ago

const gameBoard = document.querySelectorAll('.card')

timmshinbone commented 9 months ago

Share your HTML

spenserg92 commented 9 months ago

    <main class="board">

        <div class="card" id="box1">TILE</div>
        <div class="card" id="box2">TILE</div>
        <div class="card" id="box3">TILE</div>
        <div class="card" id="box4">TILE</div>
        <div class="card" id="box5">TILE</div>
        <div class="card" id="box6">TILE</div>
        <div class="card" id="box7">TILE</div>
        <div class="card" id="box8">TILE</div>
        <div class="card" id="box9">TILE</div>
        <div class="card" id="box10">TILE</div>
        <div class="card" id="box11">TILE</div>
        <div class="card" id="box12">TILE</div>
        <div class="card" id="box13">TILE</div>
        <div class="card" id="box14">TILE</div>
        <div class="card" id="box15">TILE</div>
        <div class="card" id="box16">TILE</div>
        <div class="card" id="box17">TILE</div>
        <div class="card" id="box18">TILE</div>

    </main>

timmshinbone commented 9 months ago

Ok, where are the unflipped and the visible classes coming from?

spenserg92 commented 9 months ago

the 'unflipped' I think is coming from here:

gameBoard.forEach((card, index) => {
    card.dataset.index = index;
    card.classList.add('unflipped');
    card.addEventListener('click', init)
    card.style.backgroundImage = `url(imgs/Mountain Background.jpg)`;

})

It looks like I don't currently have a class of visible. I'm just trying to remove it so i'm guessing I need to create the class of 'visible?

spenserg92 commented 9 months ago

I made some changes and pushed them through if you wanted to look at my code again

nayaba commented 9 months ago

I like the update you made here:

card.style.backgroundImage = `url(imgs/Mountain Background.jpg)`;

remember that everything after the equal sign is being inserted into your html - with that in mind you've got a simple syntax error in that line that is preventing your images from appearing. It does appear that the unflipped class is being added.

sei-ec-remote / project-1-issues