JavaScript Let's Play - Build a Random Card Memory Game 2026

An intro as to what we'll do in this section.

I want to write a JSON file that contains all the information we need about our cards.

To reference a JSON file from your main JavaScript file, you can grab it using the Fetch API.

The Fetch API is a modern way to retrieve resources, including JSON files, from a server or local directory.

In this lecture I'll show you how to use async/await with Fetch. The async keyword is placed before a function declaration to indicate that the function will return a promise. This means that any value returned from the function will be wrapped in a resolved promise.

The await keyword can only be used inside an async function. It pauses the execution of the function until the promise is resolved, allowing you to write asynchronous code in a synchronous style.

By default, web browsers enforce a same-origin policy, which restricts web pages from making requests to a different origin (protocol, domain, or port) than the one that served the page.

The file protocol (file://) is used by web browsers to access files on the local file system. When you open an HTML file directly in a browser (e.g., by double-clicking it), it is served using this protocol.

When running a local development server:

• You can access any files within the directory where the server is running.

• Subdirectories are also accessible, allowing you to organize your project files effectively.

• The server can serve HTML, CSS, JavaScript, images, and other static assets without triggering CORS errors since it operates under the HTTP protocol.

When running a local development server:

• You can access any files within the directory where the server is running.

• Subdirectories are also accessible, allowing you to organize your project files effectively.

• The server can serve HTML, CSS, JavaScript, images, and other static assets without triggering CORS errors since it operates under the HTTP protocol.

We will code up a simple Fetch request, followed by then() statements to deal with the promises. I'll also show you a limitation of the map() method.

Using the spread syntax in JavaScript allows you to expand an iterable (like an array or string) into individual elements. This feature, introduced in ES6, provides a concise way to work with arrays and objects, making it easier to create new arrays or merge existing ones.

Once a CSS grid is created, elements are automatically added to the grid layout based on the defined grid structure.

Before we go further, I want us to be on the same page regarding what we will call our cards and the structure that our HTML will take.

In this lecture I want to loop through all of our cards in our "cards" array, and add those cards directly to the live Document Object Model (DOM). This is not the best way to do it, as I'll show you in future lectures, but for now I want you to know about this approach because you'll see most developers do this.

Using the appendChild() method is a common way to add elements, such as cards, to the DOM in JavaScript.

The appendChild() method is part of the Node interface in the DOM. It appends a node (usually an element) as the last child of a specified parent node.

• Each time you append an item to the DOM, the browser may need to recalculate the layout (reflow) and repaint the affected area of the page. This can be particularly costly in terms of performance if done repeatedly in a loop, leading to slow rendering and a laggy user experience.

• Increased CPU Usage: Continuously modifying the DOM can significantly increase CPU usage, especially if you are adding many elements in a tight loop. This can lead to freezing or stuttering in the browser.

A Document Fragment is a lightweight container used in the DOM (Document Object Model) to hold a portion of the document structure. It allows developers to group multiple nodes together without affecting the live DOM until they are explicitly added.

In this lecture we will adapt our code to use fragments and then add the cards to the live DOM. This is a grandmaster technique because now we are avoiding having to manipulate the live DOM on each FOR iteration.

I want to test our code and also prove that the fragment is emptied when we finally append its contents to the live DOM.

We are going to use CSS to style the back of the card

In this lecture you're going to now style the front of the card, and also fix a slight error in our code

Updated project files for this section

This is going to be a very short section - in fact, only a few lectures long.

I did this because its so important for you to master the fisher-yates shuffle and also understand how to create a CSS 3D transformation to a card. 

In this lecture we will loop through all of our cards and dynamically add a click event listener to them. In doing so I will teach you about the THIS keyword in JavaScript which will point to the DOM element that triggered the event.

The rotateY() function specifically rotates an element around the vertical Y-axis. When you apply transform: rotateY(180deg);, it effectively flips the element to face the opposite direction. The angle specified (in this case, 180 degrees) determines how far the element will rotate

In this lecture I want to set up our shuffle() function that we will use to implement the Fisher-Yates shuffle algo.

The Fisher-Yates shuffle, also known as the Knuth shuffle, is a highly efficient algorithm used to randomize the order of elements in a finite sequence, such as an array. This algorithm ensures that every possible permutation of the sequence is equally likely, making it a fair and unbiased method for shuffling.

It's time to put theory to practical use.

In this lecture we will create a temporary variable that holds our random card, and then later insert that card into the position represented by the currentIndex.

When you log an array directly in the console using console.log(), it logs a reference to that array in memory rather than a snapshot of its current state. This means that if the contents of the array change after logging, the console will reflect those changes when you expand the logged output.

I'll show you how to see the incremental changes we make to the shuffledCardsArray by creating a shallow copy of it in memory.

Destructuring assignment in JavaScript is a powerful feature introduced in ES6 that allows developers to extract values from arrays into distinct variables. This technique enhances code readability, reduces verbosity, and improves maintainability.

In this lecture we will look at the second way we can define our shuffledCardsArray with less code.

Attached are the latest project files

A quick intro about what we will do in this exciting section!

The this keyword in JavaScript is a fundamental concept that refers to the context in which a function is executed. In our project, THIS refers to the HTML element that triggered the flip effect.

We will use this concept to define our firstCard and secondCard variables.

A flag variable is a boolean variable used to indicate the status of a particular condition. It can signal the presence or absence of a specific condition within your code.

In our example, I want to set a noFlipping flag so that the user will not be allowed to flip more than 2 cards.

The dataset property in JavaScript is a feature introduced by HTML5 that provides access to custom data attributes defined using the data-* prefix. This property is exposed via the HTMLElement interface and offers a convenient way to interact with these custom attributes programmatically.

In this lecture we will use the dataset property to determine if the "name" value is the same between 2 cards.

We will also use the ternary operator in JavaScript to execute the appropriate function depending on whether there is a match or not.

The setTimeout() function is provided by the global Window object, and is used to generate a timer after which a JavaScript function executes. In this lecture we will use the setTimeout() function to unflip the cards if there is no match.

Right now, we are stuck. Once the cards flip back over to their original position, the user is not able to click on more cards. This is because our flags are still set.

In this lecture we will build a resetFlags() function that will solve this problem.

I can't wait.

I want to now deal with matched logic.

Once two cards are matched, we don't want them flipping back over. Also, we don't want the user clicking on those cards again, and finally we want to add a visual effect to those cards making it very clear that they are matched.

A quick lecture to preclude the user from clicking on the same card twice and falsely getting a match. We will also solve the problem of being stuck when we have two cards that are matched.

The latest project files.

A quick introduction to the finishing touches we will implement in this section.

In this lecture I want to implement a counter to indicate how many tries the user has left to match cards. When the counter gets to zero, the user loses and has to start again.

Now that we have our counter set up, we can decrease the counter every time the user does not get a match, and perform a simple check to see if the counter at any time has reached 0.

Let's use JavaScript to dynamically add the <img> to the DOM when the user loses the game.

Using position: fixed in CSS allows an element to maintain a constant position relative to the viewport, meaning it will not move when the page is scrolled. This property is particularly useful for creating persistent UI elements.

The requestAnimationFrame() method is a JavaScript function that allows you to create smooth animations by synchronizing your animation updates with the browser's repaint cycle.

I want to define a function that creates a star using pure JavaScript. We will then later style each star created using CSS.

CSS animations allow for the smooth transition of elements between different styles over time, enhancing the visual appeal and interactivity of web pages. They consist of two main components: keyframes and animation properties.

Once our star animation completes, I want to ensure our HTML is clean. To do this, I will use the remove() method to remove the star from the DOM.

Now that we have defined our star function, and styled those stars in CSS, it's time to add logic to add it to our game.

It really has come to this point ... to test our final code.

Before we finish off, let's add a quick transition property to any changes in the background color of our back card.

Final project code.

It's always a bitter sweet for me at this point. I've had to much fun putting this course together, and its sad to end.

However, I also know that many more exciting courses are on the horizon, so I will (hopefully) see you again soon.

Take care my dear student. Take care :)