Day 45 — Memory Game — mission complete

Alice Alsford
Mar 26 · 2 min read

Today I finished up the memory game which is all working woo hoo!

There were just two last steps to do.

The first step was to add a delay so that when the card is clicked the styling is not applied start away so that the user can see what they chose before it resets and flips back over.

To do this I needed to set a delay time in the javascript file. I did this where we first declare the guesses when the game first loads. I created a variable called delay and set it to 1.2 seconds or 1200

var delay = 1200;

Then I put the match and resetGuesses as an argument in the setTimeout function with the delay.

setTimeout(match, delay);
setTimeout(resetGuesses, delay);

The last step is to have the cards flip over so the user cant see the cards. The CSS now needs to change as there needs to be a front div and a back div for each card now.

I cut out the original lines of code which applied the background image to the cards. Then I created the front of the cards — which the user first sees when they load the page. This was done by creating a new div in the variable front and then adding the class of front to the div. The class of front will be added later. Then I did the same to create the back of the card and this will get the backgroundImage that we had earlier.

Then I appended it to the grid.

This was all done with the following code:

var front = document.createElement('div');
front.classList.add('front');
var back = document.createElement('div');
back.classList.add('back);
back.style.backgroundImage = `url(${gameGrid[i].img})`;
grid.appendChild(card);card.appendChild(front);card.appendChild(back);

Then lastly, I needed to add parentNode to the clicked.dataset.name like this

firstGuess = clicked.parentNode.dataset.name;

The CSS was updated from the course resources as the course isnt about CSS so it was just copied and pasted in.

Now when the user loads the page the cards are hidden and when clicked on they rotate around.

And the game works!!!!! Yay!!!!

The last mission for today and for the project is to deploy the app onto a website. After a wrestle with netlify not letting me reset my password I finally got in and deployed the site https://modest-hoover-66bfab.netlify.com/

Woo hoo!