{"componentChunkName":"component---src-templates-legacy-tutorial-page-js","path":"/oa/tutorials/build-a-game-of-concentration-with-javascript/conclusion-amI=/","result":{"pageContext":{"tutorial":{"id":"T0E6OlR1dG9yaWFsLTE1MA==","slug":"build-a-game-of-concentration-with-javascript","title":"Build a Game of Concentration with Javascript","previewText":"Get started using Javascript to manipulate the DOM and add interactivity to webpages.\n","heroImagePath":"https://raw.githubusercontent.com/MakeSchool-Tutorials/sa-2018-concentration/master/cover.png","heroImageFile":{"childImageSharp":{"gatsbyImageData":{"layout":"constrained","placeholder":{"fallback":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAAAsTAAALEwEAmpwYAAAEsElEQVQ4y52UfUzUdRzHf8qa1WZtgHgodwcCp3Cx2kpLhVJrWCkPiZkNkUxTsfKRqYGI4BBI8QkU5CSelOPwuAfuRDD1FB+Hlg+JLFNAxKzcELQD7o67V7sD0v7tj/e+n+373evz2r7fz1cQS+XUmKrYiQerbQKJCKQ+lvDqyD4EAVd8R/VgSYmB9dNgTRhPshbgZbUgAILNxgSgXFfDKJEEQSwNxmCqpgA5yTY3UhHIfPwmMv9eXh4OI9xgktyMJWsRpEVDSgRP9iQQbO1hGP0Itl7CgEPPgHIMpioUuLPZJpCOQHanmFdGWv81lHpZsGyNhU0fwcZwunOWMMbKoCGEuAwNQ8AJ6E21pLOfxdYkviKZZHMu2zP+YMvaP9m87i/2Zf6O7cAG7HuXw65lmEuS+MaiI8qhZJa1jBTOodRp8RRJEaTSQFSmBgIGuzm7htgB8yUwm6CnAbrO4shZjCPtE0iNoS83noNWEdkIZNgEqnkdlU6Jp8hvCHiGQCfQ0otgtxFi7eXpvUZsLWfpaz2P5e4F7JkLsCd/DN/Nonfn5+yy+pOEwHqbQAlTUOkqnwErT59B7ARidxnKsGHvugSdp6GrAR6dg5x4SIuA1Ej6c2P53ublehGr+wUUhDwzFPvJ0NWfJrERYozdxBz7m3WmJzTX3Ka5qolbVc38ZmjiXvpKWjcspC0xjrbslZzv3sQJcwJ13Uu4xR7UOjUeIl8EnwAZR9WnqJzWSY73XXaPbaVo8n12vvWANHE7aeIH5Ia2UDEplOJAGUW+AahnfABtV6HjKrQ0Qk8HWq0Od+ct+/jLMGpOURz5mK1BLWTI77FvZgd509vJlreSJW/nwId3UE2dRnmwnNLAILThM7G0NdB/30Rfy3EwN6NxAaUDhsZqE2UznrLNp51s8QMKpj4kb+JDsiUdZEkeUhjWSs2UN6gO8qYqwIu68Hfg0RXougKPLgLtaHVDhuNkGA0nKc9oI2vZT2xPuMaBlCb2b7zpqrevuE5h8g2+n5VL6pQsUt7OZPecPNqNSto1ClpU+Zgbj1NdrcHDaSj2G4++rp5NpwzEVRQSX1lEokHFKn2Fq/7iiII11RpEPjDMDYTh4CcB5bszKR3nj8JHimnefKqUKjzG+A4AdcfqSdYfJbagiLjCEtYq1Xx7SOWqFx4sZlWpDvFoCyMEG26CHdmYbtThs6l4LZgSmYyzC+M4MgSU+I1HW1vHSrWGiL37iMrLZ2nZYRYVlxGVV0B0fj6LFSpeeqEfQXC4Ztv9xaeUTwzjoGg0+909+TEykqqKygHgWF8ZdSdOcrHtDporl9D/fJkTTdc5/ss1V62/2kjd9ZvsyLSTnuxgSxLkZvdxu/gHmvfs4MaOLDoNGjRqDe7ezlkeF4jKeIaEWog5BPMrYZ4SPhvMfCXEq2GJ0UGcfiCxWgcxapirhdkqSDwHpSoDXt4SBP+AQBSaBoQkEJb2I6zgv/kaRNvAIx2E5c8lwYGQYEf40srIbVBw2IhorPP78gtEV3sS/a9QdLGH0ssWShufpWQwxYPr83vOs4oLZupb4LBKi6fTUBoQTOh77/PpnChioiP+V+bOiWZy6HQk/kH8AwjYIZSpK76eAAAAAElFTkSuQmCC"},"images":{"fallback":{"src":"/mediabook/static/c6cd91a6ad3093c648926e9084a26640/5aead/cover.png","srcSet":"/mediabook/static/c6cd91a6ad3093c648926e9084a26640/e9fba/cover.png 50w,\n/mediabook/static/c6cd91a6ad3093c648926e9084a26640/15e42/cover.png 100w,\n/mediabook/static/c6cd91a6ad3093c648926e9084a26640/5aead/cover.png 200w,\n/mediabook/static/c6cd91a6ad3093c648926e9084a26640/d6138/cover.png 400w","sizes":"(min-width: 200px) 200px, 100vw"},"sources":[{"srcSet":"/mediabook/static/c6cd91a6ad3093c648926e9084a26640/b79cb/cover.avif 50w,\n/mediabook/static/c6cd91a6ad3093c648926e9084a26640/6d0de/cover.avif 100w,\n/mediabook/static/c6cd91a6ad3093c648926e9084a26640/f2685/cover.avif 200w,\n/mediabook/static/c6cd91a6ad3093c648926e9084a26640/4ff31/cover.avif 400w","type":"image/avif","sizes":"(min-width: 200px) 200px, 100vw"},{"srcSet":"/mediabook/static/c6cd91a6ad3093c648926e9084a26640/dbc4a/cover.webp 50w,\n/mediabook/static/c6cd91a6ad3093c648926e9084a26640/d8057/cover.webp 100w,\n/mediabook/static/c6cd91a6ad3093c648926e9084a26640/2e34e/cover.webp 200w,\n/mediabook/static/c6cd91a6ad3093c648926e9084a26640/416c3/cover.webp 400w","type":"image/webp","sizes":"(min-width: 200px) 200px, 100vw"}]},"width":200,"height":200}}},"pages":{"nodes":[{"id":"T0E6OlBhZ2UtMTA0Mw==","title":"Introduction","slug":"intro-landing-page-Tqk=","sections":{"nodes":[{"id":"T0E6OlNlY3Rpb24tMzY1NA==","title":"Introduction","htmlContent":"

Welcome, welcome. You've reached the third tutorial of Make School's full-stack web series!

In this tutorial, we'll become friends with client-side JavaScript by building a game of concentration. We'll do the following:

    \n
  1. Build the game UI using HTML, CSS, and Bootstrap
    2. \n
  2. Implement the game logic with client-side JavaScript
    3. \n

In this tutorial, we'll focus on using our front-end technologies: HTML, CSS and client-side JavaScript. Our game will be played in the web browser and won't have a back-end. All code will be retrieved locally on our personal computer.

\n \"Concentration\n

\n

\n\n

Client-side JavaScript refers to JavaScript code that implements logic on our client (in our case, the browser). We'll use JavaScript to implement our concentration game's logic. In the next tutorial, we'll start to learn about using JavaScript to build web apps that run on servers.

\n
"},{"id":"T0E6OlNlY3Rpb24tMzY1NQ==","title":"What is Concentration?","htmlContent":"

The game of concentration involves a board containing an even number of squares. Each square in the grid has a color that matches another square in the board. However, the color of all squares are hidden. The goal of the game is to match the color of each square with it's matching pair.

\n \"Completed\n

Once the game starts, the player clicks on any square within the grid. Once clicked, the square will reveal it's hidden color.

\n \"Flipped\n

The player then has the opportunity to reveal the color of another square. If the color of the second square matches the color of the first square, a match is made. If not, the colors of the two squares return to hidden and the player tries again.

The player tries to match all of the colored squares with their matching square as quickly as possible.

"},{"id":"T0E6OlNlY3Rpb24tMzY1Ng==","title":"Who Is This For?","htmlContent":"

Beginners who have some familiarity with using the following front-end technologies: HTML, CSS, JavaScript and Bootstrap.

What You Should Already Know

This tutorial builds on key concepts from the first two Make School tutorials.

You should know:

If you can't, it's recommended to first complete or review the previous Make School tutorials.

Estimated Completion Time

4 hours

"},{"id":"T0E6OlNlY3Rpb24tMzY1Nw==","title":"What We're Building","htmlContent":"

In this tutorial, we'll build a game of concentration.

If you've been searching for one of those classic, old-school games to distract you from everything you should be doing, this one's for you! Please play responsibly.

Let's take a look at what our game will look like when it's complete:

To review the rules of gameplay: a player reveals the color of two squares at a time. If the color of the chosen squares are the same, a match is made. If not, the color of the square return to hidden. The game is won when the player matches every square with it's matching pair in the board.

"},{"id":"T0E6OlNlY3Rpb24tMzY1OA==","title":"What You'll Learn","htmlContent":"

By the end of this tutorial, you will:

"},{"id":"T0E6OlNlY3Rpb24tMzY1OQ==","title":"If You Get Stuck","htmlContent":"

Getting stuck when coding (and debugging) is a natural part of the programming process. If you find yourself stuck on a problem or lost, pause for a moment and take a breath. Maybe take a walk. Then retrace your steps (in the tutorial, not the walk). Make sure you've followed each step of the tutorial. It's easy to make typos or accidentally skip over important steps.

If you want to compare your code to the solution, you can find it here:

"}]},"next":{"id":"T0E6OlBhZ2UtMTA0NA==","slug":"dev-env-JEU=","title":"Setup Dev Environment"},"previous":{"id":"T0E6OlBhZ2UtMTA0NA==","slug":"dev-env-JEU=","title":"Setup Dev Environment"}},{"id":"T0E6OlBhZ2UtMTA0NA==","title":"Setup Dev Environment","slug":"dev-env-JEU=","sections":{"nodes":[{"id":"T0E6OlNlY3Rpb24tMzY2MA==","title":"Setup Dev Environment","htmlContent":"

To start, we'll setup our developer environment and create a new project.

We'll be using the same set of tools we previously learned about:

You'll need to make sure you have both Google Chrome and the Atom text editor installed. If you've completed the previous tutorials, you will have done through this already.

\n

\n\n

If you don't have the required software installed, make sure you download and install the missing software before proceeding.

\n

With the correct tools, let's create a new project for our codebase.

"},{"id":"T0E6OlNlY3Rpb24tMzY2MQ==","title":"Setting Up a New Project","htmlContent":"

Whenever you're creating a new front-end project, you'll need to repeat the following steps:

\n

\n\n

Open the Atom text editor and create a new file:

\n\n
    \n
  1. Create a new file by pressing the shortcut CMD-n or selecting the New File command in the File menu. \n \"New\n \n
    2. \n
  2. Save the new untitled file you just created by pressing the shortcut CMD-s or selected the Save command in the File menu. \n \"Save\n \n
    3. \n
  3. In the prompt, find a easy-to-find file path (i.e. ~/Code/html/) on your computer to save all the files for your soon-to-be concentration game. Create a new project folder called concentration that will contain all your project-related files. \n \"New\n \n
    4. \n
  4. Save your new file with the name index.html. It's important to include the extension .html. \n \"Save\n \n
    5. \n
  5. Click the Save button to finish creating your new index.html file and enclosing project folder. \n \"Click\n \n
    6. \n
\n

You've now created a new project folder with a empty index.html. This will be the home of our new concentration game.

Next, let's make sure our Project Tree View is showing the correct project.

\n

\n\n

Let's make sure our Tree View has the correct project shown:

\n\n
    \n
  1. Close the Atom window (don't quit the entire application) by clicking the red X in the left-hand corner. \n \"Close\n \n
    2. \n
  2. In the Atom File menu, select Reopen Project to open your concentration project. \n \"Open\n \n
    3. \n
\n

Once you're finished, you should see your concentration project folder and your new index.html file in the Atom editor Tree View.

\n \"Concentration\n

Next, we'll add the boilerplate HTML code and Bootstrap to our index.html.

"},{"id":"T0E6OlNlY3Rpb24tMzY2Mg==","title":"New HTML File Boilerplate","htmlContent":"

Hello, World! is always a good place to start. The Bootstrap docs will make this extremely easy for us.

\n

\n\n

Using the Bootstrap documentation's starter template, setup the code for an initial Hello, World! web page.

\n\n

\n \"Starter\n

\n

To make sure our HTML works, let's open it in the browser.

Remember how?

\n

\n\n

In your Chrome web browser, open your concentration index.html in a new tab.

\n
\n

\n\n

To open your HTML document in Chrome, follow the steps below:

\n\n
    \n
  1. Open the Tree View in Atom if it's not open already. You can toggle the Tree View with the shortcut CMD-\\ or selecting the command under the View menu. \n \"Toggle\n \n
    2. \n
  2. With your Tree View open, right-click on your index.html file. In the contextual menu that pops up, click on Copy Full Path. \n \"Copy\n \n
    3. \n
  3. Open a New Tab in Google Chrome and paste the full file path into the address bar. \n \"Chrome\n \n
    4. \n
  4. Once your index.html file path is in the address path, hit the Return key and you should see your Hello, World! web page. \n \"Hello\n \n
    5. \n
\n

Off to a good start.

"},{"id":"T0E6OlNlY3Rpb24tMzY2Mw==","title":"Setting Up CSS","htmlContent":"

To finish our initial project setup, we'll also need to add our CSS and JavaScript.

We'll start with CSS.

\n

\n\n
    \n
  1. Create a new folder in your concentration project folder named css.
    2. \n
  2. Create a new file in your css folder named style.css.
    3. \n
\n

Your Tree View should look like:

\n \"CSS\n

Back in index.html, we'll need to link our new stylesheet.

\n

\n\n

In index.html, add the following tag inside your <head> element:

\n
<head>\n  // ...\n\n  <link rel=\"stylesheet\" href=\"css/style.css\">\n</head>
\n

To make sure our CSS is properly connected, let's test it out.

\n

\n\n

In your new style.css, add the following CSS rule:

\n
h1 {\n  color: orange;\n}
\n

Refresh your HTML doc in your browser and you should see Hello, World! in orange.

\n \"Orange\n

If you see your <h1> in orange, you can rest assured that your CSS is properly linked. If not, go back through the previous steps again.

Next, we'll need a place to store our script files that we'll use to code our concentration game.

"},{"id":"T0E6OlNlY3Rpb24tMzY2NA==","title":"Configuring JavaScript","htmlContent":"

Similar to our CSS, we'll want to create a new file where we can write JavaScript. Then, we'll need to link our script back to our HTML document.

Let's create our first script file:

\n

\n\n
    \n
  1. Create a new folder in your concentration project folder named js.
    2. \n
  2. Create a new file in your js folder named main.js.
    3. \n
\n

When you're done, your Atom Tree View should look like the following:

\n \"JS\n

Like our CSS file, we'll need to link to main.js from our HTML document.

\n

\n\n

In index.html, add the following <script> element below Bootstrap's scripts but before the closing <body> tag:

\n
<body>\n  <!-- ... previous HTML content -->\n  <!-- ... Bootstrap scripts -->\n\n  <!-- add line below -->\n  <script src=\"js/main.js\" charset=\"utf-8\"></script>\n</body>
\n

Finally, we'll want to test that our HTML doc is correctly configure with our new script file. To do so, we'll use Chrome's DevTools.

Using the JavaScript Console

To see if our main.js script is properly connectly to our HTML document, we'll need to switch back to our browser. First, we'll need to open our DevTools window.

\n

\n\n

Navigate to your Chrome browser. With your index.html web page open, open the Chrome DevTools by pressing the shortcut opt-CMD-i or select the Developer Tools command in the View > Developer menu. \n \"View\n

\n

You'll either see a the DevTools open in a pane on your browser or in a new window.

\n \"DevTools\n

\n

\n\n

If you want to change whether your DevTools is part of your browser or in a separate window, you can configure it the DevTool settings. \n \"DevTools\n

\n

With our DevTools open, let's navigate to the JavaScript console.

\n

\n\n

Click on the Console tab of your DevTools. \n \"JavaScript\n

\n

This is the JavaScript console. In it, you can write and test basic JavaScript. For example we can use console.log() to print text into the console.

Let's do that now.

\n

\n\n

Write the following code in your JavaScript Console:

\n
console.log('writing JavaScript in the console');
\n

You should see the console print the text within the parenthesis: \n \"Log\n

\n

To test if our main.js script is connected to our index.html file, we can simply write JavaScript code in our main.js script and see if it's executed from the DevTools JavaScript Console.

\n

\n\n

Open main.js in your Atom editor and add the following code:

\n
console.log('writing JavaScript with Atom');
\n

Make sure to save main.js after you add the code above.

\n

Now, let's navigate back to our browser and refresh our web page. Keep an eye on your JavaScript console.

What happened? You'll notice that (if setup correctly) the code we wrote in main.js using our Atom text editor executed and was logged in our DevTools console.

\n \"Log\n

\n

\n\n

If set up incorrectly, you won't see any text printed in your console. Try to retrace your steps and figure out what you're missing.

\n
"},{"id":"T0E6OlNlY3Rpb24tMzY2NQ==","title":"Up Next","htmlContent":"

We've successfully set up our new project and the tools we'll use to build our game of concentration. In the next section, we'll start building the game's UI using our familiar friends HTML, CSS and Bootstrap.

"}]},"next":{"id":"T0E6OlBhZ2UtMTA0NQ==","slug":"building-ui","title":"Building the UI"},"previous":{"id":"T0E6OlBhZ2UtMTA0NQ==","slug":"building-ui","title":"Building the UI"}},{"id":"T0E6OlBhZ2UtMTA0NQ==","title":"Building the UI","slug":"building-ui","sections":{"nodes":[{"id":"T0E6OlNlY3Rpb24tMzg1MQ==","title":"Building the UI","htmlContent":"

Let's start building. Throughout this section, we'll be focused on implementing the HTML and CSS for our game of concentration. When we're done, our game should look like the following:

\n \"Game\n

But first, we'll need to get rid of our previous Hello, world! code.

"},{"id":"T0E6OlNlY3Rpb24tMzg1Mg==","title":"Clearing Test Code","htmlContent":"

After successfully verifying that our new project is properly configured, we'll no longer need Hello, world or any of the other code we added in style.css and main.js.

To start building our board, we'll reset and delete the Hello, world! boilerplate code in our project.

\n

\n\n

In index.html, perform the following:

\n
<!doctype html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1, shrink-to-fit=no\">\n\n  <link rel=\"stylesheet\" href=\"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css\" integrity=\"sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm\" crossorigin=\"anonymous\">\n\n  <!-- 1. Change Title Text -->\n  <title>Concentration – A Test of Memory</title>\n\n  <link rel=\"stylesheet\" href=\"css/style.css\">\n</head>\n\n<body>\n  <!-- 2. Delete <h1> -->\n\n  <script src=\"https://code.jquery.com/jquery-3.2.1.slim.min.js\" integrity=\"sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN\" crossorigin=\"anonymous\"></script>\n  <script src=\"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js\" integrity=\"sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q\" crossorigin=\"anonymous\"></script>\n  <script src=\"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js\" integrity=\"sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl\" crossorigin=\"anonymous\"></script>\n  <script src=\"js/main.js\" charset=\"utf-8\"></script>\n</body>\n</html>
\n
    \n
  1. Delete the <h1> element that displays Hello, world!.
    2. \n
  2. Modify the title text inside the <title> element of your <head> to Concentration – A Test of Memory.
    3. \n
\n

Next, we'll need to remove the CSS we added.

\n

\n\n

In style.css, delete all CSS rules so that your stylesheet is empty.

\n

Finally, we'll remove the console.log that we added to our main.js script.

\n

\n\n

In main.js, delete all JavaScript code so that your file is empty.

\n

When you're done, your project, with exception of the HTML boilerplate and title, will be completely blank.

"},{"id":"T0E6OlNlY3Rpb24tMzg1Mw==","title":"Implementing the UI","htmlContent":"

For the rest of this section, we'll work on implementing the UI for our gameboard. When we're done, our game won't do anything, but it'll set the background for us to implement the code for concentration.

The design for our gameboard will be a 4x4 grid like such:

\n \"4x4\n

The height and width of the gameboard will always be 370px by 370px:

\n \"Grid\n

Finally, our gameboard will always take up the full 12 columns of the grid, but it will be centered regardless of the browser's width:

\n \"Board\n

With those details, we can start writing the HTML for our gameboard. We'll need to start by position the gameboard with the correct layout.

\n

\n\n

Create the .container, .row, and column <div> elements to position our gameboard:

\n
<body>\n  <div class=\"container\">\n    <div class=\"row\">\n      <div class=\"col-12\">\n\n        <!-- TODO: add HTML for gameboard -->\n\n      </div>\n    </div>\n  </div>\n\n  <!-- ... existing scripts -->\n</body>
\n

Notice that we haven't added any of our UI code yet. So far, we've implemented the container, row and column needed to position our gameboard, but they're all empty <div> elements.

Creating the Gameboard

If you look at the design of our gameboard, you'll see that it's a 4x4 grid.

\n \"4x4\n

To create our gameboard UI, we'll nest another grid within the current grid that we're using for positioning. Let's start by creating a new .container <div> for our gameboard's grid.

\n

\n\n

Create a new .container <div> within your current grid:

\n
<div class=\"container\">\n  <div class=\"row\">\n    <div class=\"col-12\">\n\n      <!-- nested container for gameboard -->\n      <div class=\"container\">\n\n      </div>\n\n    </div>\n  </div>\n</div>
\n

If you refresh your page right now, you still won't see anything, but we're getting there. We'll start by defining the size of our nested grid.

\n

\n\n

Give your nested .container <div> a new class named .board-container:

\n
<!-- nested container for gameboard -->\n<div class=\"board-container container\">\n\n</div>
\n

With our new .board-container class, we'll select our <div> with CSS and give it the fixed width and height of our gameboard. In addition, we'll add a background-color property so we can see the area of our new container. In style.css, add the following CSS rule:

\n
.board-container {\n  background-color: red;\n  height: 370px;\n  width: 370px;\n}
\n

Let's take a look. Refresh your web page in your browser. You should see the following:

\n \"Red\n

If you adjust the width of your browser, you'll notice that our gameboard's container always remained centered in the middle of our outer grid.

\n \"Red\n

Next, let's create a .row <div> within our .board-container.

\n

\n
<!-- nested container for gameboard -->\n<div class=\"board-container container\">\n  <div class=\"row\">\n\n  </div>>\n</div>
\n

Similar to our .board-container, let's give our row a blue background-color so we can see the area of the <div>. In your stylesheet, add the following descendant selector:

\n
.board-container .row {\n  background-color: blue;\n}
\n

However, if you refresh your web page, you won't see the blue area of your .row <div>. What happened?

\n \"Red\n

Our .row <div> doesn't automatically assume the height of it's container <div>. To implement this behavior, we'll have to add a little more CSS.

\n

\n\n

Give the .row container within your gameboard the same height it's container <div>:

\n
.board-container .row {\n  background-color: blue;\n  height: 100%;\n}
\n

The height percent (%) is based off of the height of the parent <div>. In this case, we give our .row 100% of the height of it's parent element. Which in our case, is the .board-container <div>.

\n

Now, refreshing our web page, we can see the blue area of our row as expect.

\n \"Blue\n

Before we move further, let's go ahead and remove the background-color property for both the .board-container and it's .row. We've confirmed that each <div> is the correct size and position so we no longer need this CSS.

\n

\n\n

Remove the background-color property for both the .board-container and it's .row:

\n
.board-container {\n  height: 370px;\n  width: 370px;\n}\n\n.board-container .row {\n  height: 100%;\n}
\n

With our .board-container and .row container <div> complete, we'll want to start adding each of the gameboard's squares.

Adding a Board Square

Let's look at how we're going to code each square in our 4x4 gameboard. We'll start by figuring out how to implement a single square:

\n \"Square\n

Each square will be 1/4 of the width and height of our gameboard.

In addition, each square can be either faceup or facedown. The square's color is hidden or revealed depending on if it's facedown or faceup.

\n \"Square\n

To imitate the behavior of a square having two faces, we'll do the following:

    \n
  1. Inside each gameboard's square, we'll create a .face-container <div> that's double the height of each square. \n \"Face\n \n
    2. \n
  2. Within the .face-container, we'll add two <div> elements to represent each respective facedown and faceup state. \n \"Face\n \n
    3. \n
  3. The first <div> will cover the top half of the .face-container <div>. It'll be shown whenever the square is facedown. \n \"Facedown\n \n
    4. \n
  4. The second <div> in the .face-container, will cover the bottom half of the <div> element. It will be revealed when the square is faceup. \n \"Faceup\n \n
    5. \n
  5. We'll configure each square so that it can only show either the top or bottom half of the .face-container. This way, the square will always be either facedown or faceup. \n \"Square\n \n
    6. \n

With knowledge about the mechanics of how our square will work, let's start building it. First, we'll need to create a column that's 25% the width of the grid. We can use Bootstrap's column sizes for this.

\n

\n\n

Create a column that will be your gameboard square. This column should be 25% the width of the gameboard and have a class named .board-square:

\n
<!-- nested container for gameboard -->\n<div class=\"board-container container\">\n  <div class=\"row\">\n\n    <!-- gameboard squares -->\n    <div class=\"col-3 board-square\">\n\n    </div>\n\n  </div>\n</div>
\n

We'll want to style our .board-square so that it's height is 25% of the gameboard. Add a CSS rule with the following declarations:

\n\n\n
.board-square {\n  border: 2px solid red;\n  height: 25%;\n  padding: 0;\n}
\n

We added a red border around our game square so that we can see it's area. We'll remove it later when we implement our final design.

\n

Refresh your web page and you should see your gameboard's first square.

\n \"Red\n

But we're not done yet. Next, we'll need to implement the .face-container <div> inside our square with each respective faceup and facedown <div>.

\n

\n\n

Add a <div> inside your .board-square <div> with a class named .face-container:

\n
<!-- nested container for gameboard -->\n<div class=\"board-container container\">\n  <div class=\"row\">\n\n    <!-- gameboard squares -->\n    <div class=\"col-3 board-square\">\n      <div class=\"face-container\">\n\n      </div>\n    </div>\n\n  </div>\n</div>
\n

Next, we'll need to add some CSS so that our .face-container behaves as we expect it to. In addition, we'll add a temporary blue background color so that we can see the container <div> area.

\n
.face-container {\n  background-color: blue;\n  height: 200%;\n  width: 100%;\n}
\n

Refresh your web page and you should see both the red border of the .board-square <div> and the blue background color of the .face-container area.

\n \"Face\n

Within our .face-container, we'll need to add both a facedown and faceup for our gameboard's square.

\n

\n\n

Within your .face-container <div>, add a .facedown and .faceup <div>:

\n
<div class=\"col-3 board-square\">\n  <div class=\"face-container\">\n    <div class=\"facedown\"></div>\n    <div class=\"faceup\"></div>\n  </div>\n</div>
\n

We'll need to add some more CSS for our facedown and faceup <div> elements:

\n
.faceup, .facedown {\n  height: 50%;\n}\n\n.facedown {\n  background-color: lightGray;\n}\n\n.faceup {\n  background-color: coral;\n}
\n

Since the parent container of our .facedown and .faceup <div> elements is 200% the height of our .board-square <div>, we set the height for both .facedown and .faceup <div> elements to 50%. In addition, we give both facedown and faceup <div> elements a temporary color so we can test that our code is working as expected.

\n

Once again, refresh your web page in your browser. This time you'll see both the facedown and faceup colors of the gameboard square.

\n \"Boardsquare\n

Last, we'll need to modify our square so that only one face (faceup or facedown) can be displayed at a time. To do this, we'll use a new property named overflow. This will hide any overflow content within our .board-square <div>.

\n

\n\n

In your stylesheet, add the overflow property to your .board-square <div>:

\n
.board-square {\n  /* ... previous CSS declarations */\n\n  overflow: hidden;\n}
\n

Refresh your gameboard and you'll see that only the .facedown <div> shown in your .board-square <div>.

\n \"Boardsquare\n

The .faceup <div> is still there, it's just hidden because we specified that our .board-square should hide overflow content.

"},{"id":"T0E6OlNlY3Rpb24tMzg1NA==","title":"Implementing the Flip Transition","htmlContent":"

Throughout our game, squares will be flipped faceup and facedown. We'll handle the flipping of our board square using CSS.

Since each of our squares will have a .faceup and .facedown <div>, we'll flip between the two faces by changing the top position of our .face-container.

\n \"Flipping\n

To implement the flipping transition, we'll need to be able to adjust the top position of our .face-container.

\n

\n\n

In style.css, add the following CSS declarations to .face-container:

\n
.face-container {\n  /* ... previous CSS declarations */\n\n  position: absolute;\n  top: 0;\n}
\n

By setting our position to absolute, we can now adjust the .face-container vertical position easily by changing the top property.

\n

\n \"Flipping\n

Remember, the percent (%) is based on it's container element, in this case the .board-square <div>.

Next, we'll create a new CSS rule that will set the top position to -100% when applied to it's respective HTML element.

\n

\n\n

In style.css, add the following CSS rule:

\n
.flipped .face-container {\n  top: -100%;\n}
\n

Notice that our new rule has a higher CSS specificity value than our CSS rule for .face-container. This will ensure that if applied, our .flipped .face-container selector will have precedence.

\n

To finish up, we'll add the transition property to create a smoother animation when a square is flipped from facedown to faceup and vice versa.

\n

\n\n

In style.css, add the following declaration to your existing .face-container CSS rule:

\n
.face-container {\n  /* ... previous CSS declarations */\n\n  transition: 400ms;\n}
\n

With our new CSS, whenever the .flipped class is applied to our .board-square <div>, the .faceup <div> of our .face-container will be revealed.

Let's try it now.

\n

\n\n

In index.html, add the .flipped class to your .board-square <div>:

\n
<div class=\"col-3 board-square flipped\">\n  <div class=\"face-container\">\n    <div class=\"facedown\"></div>\n    <div class=\"faceup\"></div>\n  </div>\n</div>
\n

Refresh your browser and take a look.

\n \"Flipped\n

As expected, our .faceup <div> is revealed in our .board-square and the .facedown <div> is hidden.

Implementing the Remaining Squares

To implement the remaining squares, we could simple copy and paste the .board-square HTML and it's nested elements 15 more times. However, this would lead to a lot of unnecessary duplication and would be hard to maintain if we wanted to make changes in the future. Instead, we'll move onto the next section to learn how to create the remaining squares in our gameboard using JavaScript.

"},{"id":"T0E6OlNlY3Rpb24tMzg1NQ==","title":"Cleaning Up","htmlContent":"

Before moving onto the next section, let's do some cleanup. We added some extra, unneeded code to better understand what was going on in our browser. Since we're finished, let's remove that extra code.

\n

\n\n
    \n
  1. In index.html, remove the .flipped class from the .board-square <div> so that it returns to being .facedown.
    2. \n
  2. In style.css, modify your .board-square border to have a color of #F7F7F7, instead of red.
    3. \n
  3. In style.css, remove the blue background color from .face-container.
    4. \n
  4. In style.css, delete the CSS rule setting a coral background color for the .faceup selector.
    5. \n
  5. In style.css, change the background color of your .facedown selector from lightGray to #D0D0D0\n
    6. \n
\n

When you're done, move onto the next section and we'll begin learning how to manipulate the DOM with client-side JavaScript.

"}]},"next":{"id":"T0E6OlBhZ2UtMTA0Ng==","slug":"client-side-javascript","title":"Client-side JavaScript"},"previous":{"id":"T0E6OlBhZ2UtMTA0Ng==","slug":"client-side-javascript","title":"Client-side JavaScript"}},{"id":"T0E6OlBhZ2UtMTA0Ng==","title":"Client-side JavaScript","slug":"client-side-javascript","sections":{"nodes":[{"id":"T0E6OlNlY3Rpb24tMzY3MA==","title":"Client-side JavaScript","htmlContent":"

In the previous section, we worked on implementing the UI for our gameboard. You should have created a 4x4 grid gameboard with a single square.

\n \"Starting\n

In this section, we'll learn to write client-side JavaScript to generate our concentration gameboard.

"},{"id":"T0E6OlNlY3Rpb24tMzY3MQ==","title":"Intro to the DOM","htmlContent":"

The Document Object Model (DOM) is a representation of HTML that can be changed and manipulated with code. For us, that means we'll be able to write JavaScript code that dynamically changes our HTML and generates our gameboard in the browser.

\n

\n\n

The DOM is a hard concept for beginners to grasp. We've greatly simplified our definition of the DOM to meet our needs. If you're interested in learning more about the DOM, check out the links below:

\n\n\n

It's useful to generate our gameboard with code for the following reasons:

By writing JavaScript, we can manipulate the DOM and dynamically add HTML that isn't in our index.html document.

Manipulating the DOM

We'll start by generating the HTML for each of our 16 squares. To do so, we'll need to change the DOM and insert the following HTML for each of our 16 gameboard squares:

<div class=\"col-3 board-square\">\n  <div class=\"face-container\">\n    <div class=\"facedown\"></div>\n    <div class=\"faceup\"></div>\n  </div>\n</div>

We'll start by adding an id to the .row <div> of our gameboard. We'll need this to easily access the correct position in the DOM where we'll insert our 16 .board-square elements.

\n

\n\n

Add the following id to the .row <div> of your gameboard:

\n
<!-- nested container for gameboard -->\n<div class=\"board-container container\">\n  <!-- add gameboard id below -->\n  <div id=\"gameboard\" class=\"row\">\n\n    <!-- ... existing HTML for .gameboard square -->\n\n  </div>\n</div>
\n

With our new id, we can access our #gameboard using the DOM. Let's access our #gameboard element and print it in the JavaScript console so we can better understand what's going on.

\n

\n\n

Open your empty main.js file and add the following lines of code:

\n
const boardElement = document.getElementById('gameboard');\nconsole.log(boardElement);
\n

Refresh your web page and navigate to your console (opt–CMD–j). If you expand the element printed, you should see the following:

\n \"Gameboard\n

See how we used JavaScript document.getElementById function to access the DOM and print the #gameboard element in our HTML document?

Next, we'll want to manipulate the DOM by adding extra code for our gameboard squares. Let's start by modifying the code within our #gameboard to insert a simple paragraph <p> element.

\n

\n\n

In main.js, add the following code:

\n
const boardElement = document.getElementById('gameboard');\nboardElement.innerHTML = '<p>changing the DOM</p>'\nconsole.log(boardElement);
\n

It's important to note that our <p> element is a String as it's enclosed within a matching pair of single quotes '. When you change the DOM with JavaScript, your HTML must be written as a String.

\n

If you refresh the web page, you'll notice that our .board-square <div> has been replaced with a <p> element.

\n \"Changing\n

In addition, if you look in the JavaScript console, you'll see the DOM has been updated to the following:

\n \"Changing\n

We started by inserting a <p> element for example purposes. Now that we know how to change the DOM, we can move on to generating the HTML for the remaining squares of our gameboard.

"},{"id":"T0E6OlNlY3Rpb24tMzY3Mg==","title":"Generating a Single Square","htmlContent":"

We'll start off by trying to generate a single .board-square <div> using JavaScript. Let's give it a try.

\n

\n\n

Using what we've learned so far, use JavaScript to change the DOM so that the #gameboard element contains a single .board-square (with all of it's children elements).

\n
\n

\n\n

In main.js, we can use the following code:

\n
const boardElement = document.getElementById('gameboard');\n\nboardElement.innerHTML = `\n    <div class=\"col-3 board-square\">\n      <div class=\"face-container\">\n        <div class=\"facedown\"></div>\n        <div class=\"faceup\"></div>\n      </div>\n    </div>`;\n\nconsole.log(boardElement);
\n

It's important to note that we can use a back tick (`) to start and end a multi-line string. You can also use String concatenation and the newline \\n character to format and organize the HTML we're trying to insert into the DOM.

\n

If you refresh your browser again, you'll notice that our #gameboard contains a single .board-square <div>.

\n \"Single\n

Although the code is identical to our original index.html HTML, we modified the DOM and replaced the original .board-square HTML content with an exactly identical one. To better understand what's going on, let's delete the .board-square <div> in index.html.

\n

\n\n

Delete the existing .board-square <div> and it's children elements. When your done, your nested container should look like the following:

\n
<!-- nested container for gameboard -->\n<div class=\"board-container container\">\n  <div id=\"gameboard\" class=\"row\">\n\n    <!-- generate board squares dynamically here -->\n\n  </div>\n</div>
\n

Refresh the page, and you'll see that even with the .board-square HTML content in index.html removed, our code in main.js still generated a .board-square <div> element in our DOM.

Generating the Remaining Squares

After generating our first board-square, we'll need to generate our remaining 15 squares to finish building our gameboard's HTML content.

See if you can figure out the code to generate 15 more identical .board-square <div> elements, including their children elements.

\n

\n\n

In main.js, write JavaScript to generate a 4x4 grid of .board-square elements (16 total) with the following HTML content:

\n
<div class=\"col-3 board-square\">\n  <div class=\"face-container\">\n    <div class=\"facedown\"></div>\n    <div class=\"faceup\"></div>\n  </div>\n</div>
\n
\n

\n\n

To solve the challenge given, we can use a for-loop as follows:

\n
const numberOfSquares = 16;\nlet squaresHTML = '';\n\n// generate HTML for board squares\nfor (let i = 0; i < numberOfSquares; i++) {\n  squaresHTML += `\n    <div class=\"col-3 board-square\">\n      <div class=\"face-container\">\n        <div class=\"facedown\"></div>\n        <div class=\"faceup\"></div>\n      </div>\n    </div>`;\n}\n\n// insert squares HTML in DOM\nconst boardElement = document.getElementById('gameboard');\nboardElement.innerHTML = squaresHTML;
\n

After refreshing the page, you'll notice that our board has successfully been built programmatically using JavaScript.

\n \"Full\n

Before we move on, let's put the code we've written so far into a function to keep it a bit more organized.

\n

\n\n

In main.js, modify your code to the following:

\n
function generateHTMLForBoardSquares() {\n  const numberOfSquares = 16;\n  let squaresHTML = '';\n\n  // generate HTML for board squares\n  for (let i = 0; i < numberOfSquares; i++) {\n    squaresHTML +=\n      '<div class=\"col-3 board-square\">\\n' +\n      '<div class=\"face-container\">\\n' +\n      '<div class=\"facedown\"></div>\\n' +\n      '<div class=\"faceup\"></div>\\n' +\n      '</div>\\n' +\n      '</div>\\n';\n  }\n\n  // insert squares HTML in DOM\n  const boardElement = document.getElementById('gameboard');\n  boardElement.innerHTML = squaresHTML;\n}\n\ngenerateHTMLForBoardSquares();
\n

Note that we call our function generateHTMLForBoardSquares on the last line of main.js for our function to execute.

\n

Moving on, we'll work on turning each of our board squares into an array of GameSquare objects that we can use when implementing the logic for our game.

"},{"id":"T0E6OlNlY3Rpb24tMzY3Mw==","title":"Adding the GameSquare Object","htmlContent":"

Before we start building the game logic for concentration, we'll need to create objects that represent each board square. We'll do this by defining a new class named BoardSquare in main.js.

\n

\n\n

In main.js, create a new JavaScript class by adding the following to the top of your script:

\n
class BoardSquare {\n\n}\n\n// ... existing code
\n

Within our BoardSquare class definition, we'll need to add a constructor so we can create BoardSquare objects that represent each .board-square in our HTML document.

Some properties that we'll want to add and track in our BoardSquare class include:

Initially, each BoardSquare class will contain an element and a color.

\n

\n\n

In main.js, create a constructor that accepts an element and color as parameters:

\n
class BoardSquare {\n\n  constructor(element, color) {\n    this.element = element;\n    this.color = color;\n  }\n}
\n

The color parameter will be a String of a CSS class with a background-color set.

Let's go ahead and create 8 color classes in our style.css stylesheet.

\n

\n\n

In style.css, add the following to the bottom of your stylesheet:

\n
/* colors */\n\n.color-0 {\n  background-color: aqua;\n}\n\n.color-1 {\n  background-color: bisque;\n}\n\n.color-2 {\n  background-color: blue;\n}\n\n.color-3 {\n  background-color: blueviolet;\n}\n\n.color-4 {\n  background-color: brown;\n}\n\n.color-5 {\n  background-color: cadetblue;\n}\n\n.color-6 {\n  background-color: chartreuse;\n}\n\n.color-7 {\n  background-color: coral;\n}
\n

These colors will be used to set the faceup color when generating each .board-square element.

Using these CSS classes, we'll need to modify our BoardSquare class to set it's respective color class in the DOM.

Let's create a new function that sets the color of each BoardSquare DOM element.

\n

\n\n

In main.js, modify BoardSquare class definition to the following:

\n
class BoardSquare {\n\n  constructor(element, color) {\n    this.element = element;\n    this.setColor(color);\n  }\n\n  // 1\n  setColor(color) {\n    // 2\n    const faceUpElement = this.element.getElementsByClassName('faceup')[0];\n\n    // 3\n    this.color = color;\n    // 4\n    faceUpElement.classList.add(color);\n  }\n}
\n

Let's break down the code we added above:

\n\n
    \n
  1. Create a new function named setColor for some better organization and potential future reusability.
    2. \n
  2. Access the DOM element of the .faceup <div> for the respective .board-square.
    3. \n
  3. Set the BoardSquare object with the new color class.
    4. \n
  4. Add the CSS color class to the .faceup <div> DOM element to set the .board-square element's faceup color.
    5. \n
\n

Next, let's quickly add the following Boolean variables to our object. We'll be using these to implement the game logic for our BoardSquare in the next section.

\n

\n\n

In main.js, add a isFaceUp and isMatched boolean to your BoardSquare class:

\n
class BoardSquare {\n\n  constructor(element, color) {\n    this.element = element;\n    this.isFaceUp = false;\n    this.isMatched = false;\n    this.setColor(color);\n  }\n\n  // ... previous code\n}
\n

With our new BoardSquare class, we'll need to find a way to randomly generate matching pairs of colors for each BoardSquare. We'll implement that next.

"},{"id":"T0E6OlNlY3Rpb24tMzY3NA==","title":"Randomly Generating Color Pairs","htmlContent":"

To randomly generate matching color pairs, we'll first create an array of all colors and their matching color pairs.

\n

\n\n

In main.js, at the bottom of the file, add the following code:

\n
const colorPairs = [];\n\nfunction generateColorPairs() {\n  if (colorPairs.length > 0) {\n    return colorPairs;\n  } else {\n    // generates matching pair for each color\n    for (let i = 0; i < 8; i++) {\n      colorPairs.push('color-' + i);\n      colorPairs.push('color-' + i);\n    }\n\n    return colorPairs;\n  }\n}
\n

In the code above, we generate an array of matching pairs for each of our CSS color classes. Since concentration requires BoardSquare objects with matching faceup colors, we'll need to add two of each color to our array.

\n

Next, we'll add some code that randomly shuffles an array of elements based on the Fisher-Yates algorithm. This will be a helper function that helps us randomly shuffle our matching colors.

\n

\n\n

In main.js, add the following function to the bottom of your file:

\n
function shuffle(array) {\n  let currentIndex = array.length;\n  let temporaryValue, randomIndex;\n\n  // While there remain elements to shuffle...\n  while (0 !== currentIndex) {\n    // Pick a remaining element...\n    randomIndex = Math.floor(Math.random() * currentIndex);\n    currentIndex -= 1;\n\n    // And swap it with the current element.\n    temporaryValue = array[currentIndex];\n    array[currentIndex] = array[randomIndex];\n    array[randomIndex] = temporaryValue;\n  }\n\n  return array;\n}
\n

You don't need to understand the specifics of what's going on in this function. Just know that it takes an array as input and returns the same element with it's elements shuffled as output.

\n\n

If you're interested in learning more about the specifics of the Fisher-Yates algorithm, you can learn more details and even see a visualization by clicking here.

\n

Next, we'll use the generateColorPairs() and shuffle(array) functions we created to return an array of shuffled colors.

\n

\n\n

In main.js, create a function that returns a shuffled array of matching color pairs:

\n
function shuffleColors() {\n  const colorPairs = generateColorPairs()\n  return shuffle(colorPairs);\n}
\n

With our new color-shuffling functions, we can finally add a function that sets up our game so that we can begin writing our game logic.

"},{"id":"T0E6OlNlY3Rpb24tMzY3NQ==","title":"Implementing the Game Setup","htmlContent":"

So far, we have bits and pieces of the code that we'll need to initially set up our game. In this last step, we'll bring the code we've written together. We'll need to accomplish the following:

    \n
  1. Create and insert the HTML elements of each .board-square in the DOM
    2. \n
  2. Randomly shuffle and return 8 pairs of matching colors.
    3. \n
  3. Create an array of BoardSquare objects for each respective .board-square element
    4. \n

We've already completed step 1, however let's refactor our code into a function named gameSetup().

\n

\n\n

In main.js, move the function call of generateHTMLForBoardSquares() into a new function named gameSetup(). Make sure this code is at the bottom of your main.js file.

\n
function setupGame() {\n  generateHTMLForBoardSquares();\n}\n\nsetupGame(); // DO NOT ERASE THIS OR GAME WILL NOT RUN
\n

Next, we'll need to use our helper functions to generate an array of randomly shuffled color pairs.

\n

\n\n

In main.js, use the shuffleColors() method to create a constant of randomly shuffled color pairs:

\n
function setupGame() {\n  generateHTMLForBoardSquares();\n\n  const randomColorPairs = shuffleColors();\n}
\n

Finally, we'll need to create each BoardSquare object from each .board-square element in our DOM.

\n

\n\n

Create an array of BoardSquare objects using each .board-square element in the DOM:

\n
const boardSquares = [];\n\nfunction setupGame() {\n  generateHTMLForBoardSquares();\n\n  const randomColorPairs = shuffleColors();\n  // 1\n  const squareElements = document.getElementsByClassName(\"board-square\");\n\n  // 2\n  for (let i = 0; i < squareElements.length; i++) {\n    const element = squareElements[i];\n    const color = randomColorPairs[i];\n    // 3\n    const square = new BoardSquare(element, color)\n\n    // 4\n    boardSquares.push(square);\n  }\n}
\n

Breaking down the code step-by-step:

\n\n
    \n
  1. We use document.getElementsByClassName to retrieve an array of all the .board-square elements in our DOM. We'll need these in order to create each BoardSquare object.
    2. \n
  2. Using a for-loop, we loop through each .board-square element in our #gameboard to create it's respective BoardSquare object.
    3. \n
  3. Create a new BoardSquare object using the DOM elements and shuffled colors at the specified position i.
    4. \n
  4. Add the new BoardSquare object that was created into the boardSquares array.
    5. \n
\n

At this point, we've finished implementing the setup for our gameboard. It's still not functional, and we won't be able to play concentration until our game logic is implemented, but let's take a look at what we've built so far.

Refresh your landing page and take a look at your gameboard.

\n \"Full\n

If we want to verify the faceup colors are being shuffled and set for each of our .board-square elements, we can temporarily add the .flipped class to each .board-square <div> that we generate.

\n

\n\n

In main.js, modify your generateHTMLForBoardSquares() function by adding the .flipped class to the HTML code of each .board-square <div>:

\n
function generateHTMLForBoardSquares() {\n  const numberOfSquares = 16;\n  let squaresHTML = '';\n\n  for (let i = 0; i < numberOfSquares; i++) {\n    squaresHTML +=\n      // add .flipped class to <div> element\n      '<div class=\"col-3 board-square flipped\">\\n' +\n      '<div class=\"face-container\">\\n' +\n      '<div class=\"facedown\"></div>\\n' +\n      '<div class=\"faceup\"></div>\\n' +\n      '</div>\\n' +\n      '</div>\\n';\n  }\n\n  const boardElement = document.getElementById('gameboard');\n  boardElement.innerHTML = squaresHTML;\n}
\n

Don't forget you'll need to remove the .flipped class from your code later. This is just for illustrative purposes to show that our gameboard setup is working properly.

\n

When you're finished, refresh your web page and take a look:

\n \"Full\n

To make sure your colors are being shuffled correct, refresh the pages a couple times. The color of each square should be randomized each time.

\n \"Faceup\n

When you've verified that your gameboard is being setup properly, remove the .flipped class from your generateHTMLForBoardSquares() function in .main.js.

\n

\n\n

In main.js, remove the .flipped class from being set in generateHTMLForBoardSquares() function:

\n
function generateHTMLForBoardSquares() {\n  const numberOfSquares = 16;\n  let squaresHTML = '';\n\n  for (let i = 0; i < numberOfSquares; i++) {\n    squaresHTML +=\n      // remove .flipped class to <div> element\n      '<div class=\"col-3 board-square\">\\n' +\n      '<div class=\"face-container\">\\n' +\n      '<div class=\"facedown\"></div>\\n' +\n      '<div class=\"faceup\"></div>\\n' +\n      '</div>\\n' +\n      '</div>\\n';\n  }\n\n  const boardElement = document.getElementById('gameboard');\n  boardElement.innerHTML = squaresHTML;\n}
\n

When you're done, refreshing your browser will return you back to your 16 gray, facedown boardsquares.

"},{"id":"T0E6OlNlY3Rpb24tMzY3Ng==","title":"Moving On","htmlContent":"

In this section, we learned about the DOM and how to manipulate it by dynamically generating the squares for our gameboard. Coming up next, we'll start building out the game logic so that we can start playing concentration!

"}]},"next":{"id":"T0E6OlBhZ2UtMTA0Nw==","slug":"game-logic-91c=","title":"Game Logic"},"previous":{"id":"T0E6OlBhZ2UtMTA0Nw==","slug":"game-logic-91c=","title":"Game Logic"}},{"id":"T0E6OlBhZ2UtMTA0Nw==","title":"Game Logic","slug":"game-logic-91c=","sections":{"nodes":[{"id":"T0E6OlNlY3Rpb24tMzY3Nw==","title":"Game Logic","htmlContent":"

With our game board successfully setup, we'll move onto implementing the game logic. In other words, we'll start writing code so that the rules of the game are followed.

In this section, we'll need to implement JavaScript for the following:

"},{"id":"T0E6OlNlY3Rpb24tMzY3OA==","title":"Handling Square Click Events","htmlContent":"

We'll begin with monitoring and handling click events whenever a player clicks on a square. To do so, we'll use a method named addEventListener() to send a notification to your BoardSquare object whenever a click occurs.

\n

\n\n

In main.js, add the following line of code to your BoardSquare constructor:

\n
class BoardSquare {\n  constructor(element, color) {\n    this.element = element;\n\n    // 1\n    this.element.addEventListener(\"click\", this, false);\n\n    this.isFaceUp = false;\n    this.isMatched = false;\n    this.setColor(color);\n  }\n\n  // ... previous code\n}
\n

In the syntax above, we add an event listen to our .board-square DOM element so that whenever it's clicked, our BoardSquare object is sent a notification.

\n

Next, we'll add a special function in our BoardSquare class to handle the click notification that's sent.

\n

\n\n

In main.js, add the follow function within your BoardSquare class:

\n
class BoardSquare {\n\n  // ...\n\n  // 1\n  handleEvent(event) {\n    // 2\n    switch (event.type) {\n      case \"click\":\n        // 3\n        console.log(this.color + ' square was clicked');\n    }\n  }\n\n  // ...\n}
\n

Let's go through the steps above together:

\n\n
    \n
  1. We add a new method to our BoardSquare class definition named handleEvent().
    2. \n
  2. Check that the event that we're handling is a click event. If the event is not a click event, we don't handle it.
    3. \n
  3. Log to the JavaScript console that the game board square was clicked.
    4. \n
\n

Refresh your browser and click on a couple squares. Navigate to your JavaScript console in your DevTools window and verify that each game board square is handling click events.

"},{"id":"T0E6OlNlY3Rpb24tMzY3OQ==","title":"Game Logic","htmlContent":"

After handling the click event of our squares, we can move on to actually implementing the code that will allow us to play concentration. Let's go over the rules of what happens when a user clicks on a square.

Clicking on a Square

When a player clicks on a square, the following should happen:

    \n
  1. Check that the square isn't already face up or matched with its pair.\n\n
      \n
    1. If so, don't do anything.
      2. \n
    2. If not, flip the square face up and set it's isFaceUp property to true.
      3. \n
    \n
    2. \n
  2. Handle the game logic for when a square is flipped.
    3. \n

Let's breakdown step 3 further.

3. Handling Flipped Squares

When a square is flipped, the following should happen:

a. If the square is the first to be flipped face up, save a reference to it and do nothing else.\nb. If the square is the second to be flipped face up, check if it'sface upp color matches with the first square.\n c. If so, set the squares to matched and clear the reference of the first square.\n d. If not, flip both squares back to facedown and clear the reference to the first square.

We can start by implementing the logic for when a player clicks on a square.

Implementing Game Logic

\n

\n\n

In main.js, within the handleEvent method of your BoardSquare class definition, replace your console.log() with the following:

\n
handleEvent(event) {\n  switch (event.type) {\n    case \"click\":\n      // 1\n      if (this.isFaceUp || this.isMatched) {\n        // 2\n        return;\n      }\n\n      // 3\n      this.isFaceUp = true;\n      this.element.classList.add('flipped');\n\n      // 4\n      squareFlipped(this);\n  }\n}
\n

We follow our logic above and implement the following:

\n\n
    \n
  1. Check that both isFaceUp and isMatched are false.
    2. \n
  2. If either is true, return and do nothing else.
    3. \n
  3. If both are false, set isFaceUp to true and add .flipped to the .board-square DOM element.
    4. \n
  4. Call a function to handle the game logic for flipping a square. If you're wondering, we haven't implemented this yet.
    5. \n
\n

Next, we'll move on to adding the code to handle flipped squares. But before that, let's add some helper functions in our BoardSquare class so that we can easily:

\n

\n\n

In main.js, in your BoardSquare class, add the following methods:

\n
class BoardSquare {\n\n  // ...\n\n  reset() {\n    this.isFaceUp = false;\n    this.isMatched = false;\n    this.element.classList.remove('flipped');\n  }\n\n  matchFound() {\n    this.isFaceUp = true;\n    this.isMatched = true;\n  }\n\n  // ...\n}
\n

After adding our new methods to our BoardSquare class, we can move on to implementing the remaining game logic for concentration.

\n

\n\n

In main.js, at the bottom of your script, add the following code:

\n
// 1\nlet firstFaceupSquare = null;\n\nfunction squareFlipped(square) {\n  // 2\n  if (firstFaceupSquare === null) {\n    firstFaceupSquare = square;\n    return\n  }\n\n  // 3\n  if (firstFaceupSquare.color === square.color) {\n    // 4\n    firstFaceupSquare.matchFound();\n    square.matchFound();\n\n    firstFaceupSquare = null;\n  } else {\n    // 5\n    const a = firstFaceupSquare;\n    const b = square;\n\n    firstFaceupSquare = null;\n\n    setTimeout(function() {\n      a.reset();\n      b.reset();\n    }, 400);\n  }\n}
\n

Walking through the steps above:

\n\n
    \n
  1. First, we create a variable to hold a reference to the first faceup square. This will help us keep track of whether the square is the first or second square to be flipped.
    2. \n
  2. Check if the square is the first square to be flipped faceup. If it is, set a reference to it using the firstFaceupSquare variable and return from the function.
    3. \n
  3. If the square is the second square to be flipped, check if it's faceup color matches the first faceup square's color.
    4. \n
  4. If both faceup colors for each square is the same, a match is made. Set both BoardSquare objects to matched using the matchFound() function and clear the firstFaceupSquare variable so the player can keep playing.
    5. \n
  5. If the faceup colors aren't the same, reset each square to it's default (facedown) state.
    6. \n
\n

When you're finished, refresh your landing page, and start matching away. Your game should be fully working at this point!

"},{"id":"T0E6OlNlY3Rpb24tMzY4MA==","title":"Up Next","htmlContent":"

In this section, we broke down and implement the logic for our game of concentration. In the next section, we'll finish the implementation of our game by adding some final touchups to our UI.

"}]},"next":{"id":"T0E6OlBhZ2UtMTA0OA==","slug":"final-touch-ups","title":"Final Touch-Ups"},"previous":{"id":"T0E6OlBhZ2UtMTA0OA==","slug":"final-touch-ups","title":"Final Touch-Ups"}},{"id":"T0E6OlBhZ2UtMTA0OA==","title":"Final Touch-Ups","slug":"final-touch-ups","sections":{"nodes":[{"id":"T0E6OlNlY3Rpb24tMzY4MQ==","title":"Final Touch-Ups","htmlContent":"

In the last section, we finished coding the logic for our game of concentration. In this section, we'll finish up the final touches in our design by adding a title <h1> and a reset button.

When we're done, we'll want our game to match the following:

\n \"Game\n

Our section title <h1>, will give users a context what they're looking at.

The Reset button will allow users to reset the game so they can play again at any moment. It'll re-shuffle the colors of each gameboard square and clear all existing matches.

Let's start with the easier of the two: the section title.

"},{"id":"T0E6OlNlY3Rpb24tMzY4Mg==","title":"Adding a Section Title","htmlContent":"

At this point, you should be familiar with HTML elements and how to create a new <h1> element. Let's do that now by adding a new section title to our web page.

\n

\n\n

Add a section title <h1> element, right above the gameboard with the text Concentration. The text should be center aligned.

\n\n

\n \"Section\n

\n

When you're done, check your solution below.

\n

\n\n

Within your outer .container, add the following <h1> element just before your .board-container <div>.

\n
<body>\n  <div class=\"container\">\n    <div class=\"row\">\n      <div class=\"col-12\">\n\n        <!-- add new h1 below -->\n        <h1 class=\"text-center\">Concentration</h1>\n\n        <div class=\"board-container container\">\n\n          <!-- ... existing gameboard HTML -->\n\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- ... scripts -->\n\n</body>
\n

To center our new <h1> element, we add the .text-center Bootstrap class.

\n
"},{"id":"T0E6OlNlY3Rpb24tMzY4Mw==","title":"Adding a Reset Button","htmlContent":"

Next, we'll introduce a new HTML element: the <button>. We'll use a <button> to create a button that will be triggered to execute code in our main.js script whenever the user clicks on it.

Let's start with the HTML. We'll give it some of that built-in Bootstrap styling.

\n

\n\n

In index.html, add a Reset button right below the closing tag of your .board-container <div>:

\n
<body>\n  <div class=\"container\">\n    <div class=\"row\">\n      <div class=\"col-12\">\n        <h1 class=\"text-center\">Concentration</h1>\n\n        <div class=\"board-container container\">\n\n          <!-- ... existing gameboard HTML -->\n\n        </div>\n\n        <!-- add reset button below -->\n        <button id=\"reset-button\" class=\"btn btn-lg btn-primary btn-block\">reset</button>\n      </div>\n    </div>\n  </div>\n\n  <!-- ... scripts -->\n\n</body>
\n

We've give our <button> an id of #reset-button so that we can easily access it using the DOM in our JavaScript code. In addition, we've added some Bootstrap classes to give it some styling.

\n

To finish up, we'll need to add a bit more CSS for our #reset-button.

\n

\n\n

In style.css, add the following CSS rule so that your Reset button is the correct width and centered within your outer .container <div>.

\n
#reset-button {\n  margin: 15px auto 0;\n  width: 370px;\n}
\n

When your done, your UI should match the design. Refresh your web page and you should see the following:

\n \"Game\n

However, if you click on your Reset button, nothing happens. That's because we haven't added any code to happen when the user clicks the button. Let's implement that next.

Handling Button Click Events

To handle Click events from our <button> element, we'll need to add some additional code in our script file.

\n

\n\n

In main.js, add the following JavaScript code:

\n
// 1\nconst resetButton = document.getElementById(\"reset-button\");\n\n// 2\nresetButton.addEventListener('click', () => {\n  // 3\n  console.log('reset button clicked');\n});
\n

Breaking down the steps in the code above:

\n\n
    \n
  1. Get a reference to the DOM element using the #reset-button id.
    2. \n
  2. Add an event listener that monitors the element for click events.
    3. \n
  3. Log reset button clicked to the JavaScript console each time a click event occurs.
    4. \n
\n

Let's test this out.

\n

\n\n

To see if our Reset button is receiving and handling click events, do the following:

\n\n
    \n
  1. Refresh your web page.
    2. \n
  2. Open the JavaScript console in Chrome DevTools by clicking opt-CMD-j.
    3. \n
  3. Click on the Reset button and see if the log is printed in the console.
    4. \n
\n\n

\n \"Reset\n

\n

When you've confirmed that your Reset button is handling click events, we can move on to implementing the logic for resetting the game.

Reset Game Logic

Let's create a new function that will reset our concentration game.

\n

\n\n

In main.js, add the following code to the bottom of your script:

\n
function resetGame() {\n  // 1\n  firstFaceupSquare = null;\n\n  // 2\n  boardSquares.forEach((square) => {\n    square.reset()\n  });\n\n  // 3\n  setTimeout(() => {\n    // 4\n    const randomColorPairs = shuffleColors();\n\n    // 5\n    for (let i = 0; i < boardSquares.length; i++) {\n      const newColor = randomColorPairs[i];\n      const square = boardSquares[i];\n\n      square.setColor(newColor);\n    }\n  }, 500);\n}
\n

Walking through each step together:

\n\n
    \n
  1. Reset the firstFaceupSquare variable back to null.
    2. \n
  2. Use the reset() method of BoardSquare to set both isFaceUp and isMatched back to false, as well as setting each square back to facedown.
    3. \n
  3. Use the setTimeout() function to delay the execution of the code within setTimeout() by 500 milliseconds. We do this because calling the reset() on each BoardSquare object will trigger the .face-container animation transition property. By delaying the shuffling of colors by 500ms, we don't interrupt the flipping animation.
    4. \n
  4. Shuffle and randomize a new order for the color pairs.
    5. \n
  5. Set each BoardSquare object in our boardSquares array with a new color based on our new shuffled colors.
    6. \n
\n

Before we can move on, we'll need to add one additional line of code.

\n

\n\n

In main.js, inside your setColor() method of your BoardSquare class, add the following line of code:

\n
class BoardSquare {\n\n  setColor(color) {\n    const faceUpElement = this.element.getElementsByClassName('faceup')[0];\n\n    // remove the previous color if it exists\n    faceUpElement.classList.remove(this.color);\n\n    this.color = color;\n    faceUpElement.classList.add(color);\n  }\n}
\n

In the code above, we remove the previous color before setting a new color. We need to add this line of code since we're re-using the same BoardSquare objects when we reset our game.

\n

Last, we'll modify the event listener to call the resetGame() function instead of logging text to the console.

\n

\n\n

In main.js, modify your addEventListener() function to the following:

\n
resetButton.addEventListener('click', () => {\n  resetGame();\n});
\n

Now, whenever our Reset button is clicked, our concentration will be reset. Let's refresh our web page and test it out.

"},{"id":"T0E6OlNlY3Rpb24tMzY4NA==","title":"Wrapping Up","htmlContent":"

Nicee! We've implemented the last feature of our concentration game. Feel free to celebrate by spending endless amounts of time playing your new favorite matching game. In the last section, we'll review what we've learned and discuss where to go from here.

"}]},"next":{"id":"T0E6OlBhZ2UtMTA0OQ==","slug":"conclusion-amI=","title":"Conclusion"},"previous":{"id":"T0E6OlBhZ2UtMTA0OQ==","slug":"conclusion-amI=","title":"Conclusion"}},{"id":"T0E6OlBhZ2UtMTA0OQ==","title":"Conclusion","slug":"conclusion-amI=","sections":{"nodes":[{"id":"T0E6OlNlY3Rpb24tMzY4NQ==","title":"Conclusion","htmlContent":"

In this tutorial, we learned about client-side JavaScript and used our previous knowledge of HTML and CSS to build a game concentration.

\n \"Completed\n

Through the tutorial, we learned about many new concepts, especially in regards to using client-side JavaScript to build dynamic web pages. Along the way, you've picked up some new skills:

We've also go to review front-end basics:

Another web page built. You're well on your way to becoming an awesome full-stack developer (we'll still need to dive into back-end development which we'll do next).

Stop and take a moment to appreciate how far you've come!

Where To Go From Here?

In the previous tutorials, we've only focused on front-end development. In the upcoming tutorials, we'll move onto back-end development and learning about how to build full-stack web apps.

\n

\n\n

Keep in mind that as we move on from front-end development to back-end development, our focus will shift to more complex JavaScript logic and the NodeJS ecosystem. This means, in future tutorials, we won't cover as in-depth on HTML and CSS.

\n\n

If you ever feel like you need a refresher, refer back to this and the previous tutorials!

\n
"}]},"next":null,"previous":null}]}},"page":{"id":"T0E6OlBhZ2UtMTA0OQ==","title":"Conclusion","slug":"conclusion-amI=","sections":{"nodes":[{"id":"T0E6OlNlY3Rpb24tMzY4NQ==","title":"Conclusion","htmlContent":"

In this tutorial, we learned about client-side JavaScript and used our previous knowledge of HTML and CSS to build a game concentration.

\n \"Completed\n

Through the tutorial, we learned about many new concepts, especially in regards to using client-side JavaScript to build dynamic web pages. Along the way, you've picked up some new skills:

We've also go to review front-end basics:

Another web page built. You're well on your way to becoming an awesome full-stack developer (we'll still need to dive into back-end development which we'll do next).

Stop and take a moment to appreciate how far you've come!

Where To Go From Here?

In the previous tutorials, we've only focused on front-end development. In the upcoming tutorials, we'll move onto back-end development and learning about how to build full-stack web apps.

\n

\n\n

Keep in mind that as we move on from front-end development to back-end development, our focus will shift to more complex JavaScript logic and the NodeJS ecosystem. This means, in future tutorials, we won't cover as in-depth on HTML and CSS.

\n\n

If you ever feel like you need a refresher, refer back to this and the previous tutorials!

\n
"}]},"next":null,"previous":null}}},"staticQueryHashes":[]}