I'm following a tutorial to create a card game in JS and so far this is the full functionality:
https://jsfiddle.net/fqc3so9z/
It consists of putting two equal cards, if it is achieved they remain frozen (put up) and the game continues until they are all up.
**What I want to add is that when they stay up, the border they have is removed.**That is, as if this line of the class were removed .card
:
box-shadow: 1px 1px 1px rgba(0,0,0,.3);
What I did is add the class no-boder
to each card, put the class .no-border
with border:none;
and add on this line (which is supposed to be executed when both cards match) this:
function disableCards() {
firstCard.removeEventListener('click', flipCard);
secondCard.removeEventListener('click', flipCard);
// Esto lo he añadido ahora:
firstCard.classList.add('no-border')
secondCard.classList.add('no-border')
//
resetBoard();
}
However it doesn't work. The problem is that I cannot use the DOM directly because the game has the nature that the order of the cards changes, and also I cannot know which card the user has chosen (where it is), so manually removing the border of each pair of letters with the DOM is not possible for me.
Your approach is fine, the problem comes in several easy errors in the code, but it can take a little while to see.
First : All your cards should not have the class
no-border
, since it is the one that takes it away, they should be without it and add it when you turn them over and they are correct, as you have said.Second : The "border" that you mention, as you have said, is applied with
box-shadow: 1px 1px 1px rgba(0,0,0,.3);
, so it is not a border but a shadow. To remove it you should do it withbox-shadow: none
.Third (and last): The class you use to remove this border is
no-border
, however, in your css it isno-boder
, that is, you are missing oneR
inborder
, so it is not affecting even if it is applied as a base.As an extra piece of information: In the code that you expose here you are affecting both cards when changing their class, but in the one that you have uploaded only the first one, I suppose that it will be a testing error, but for you to take it into account.
With all this your code would look like this: