Dynamic Interactive JavaScript DOM memory Game 

The objective of the memory game is to find a matching square.  Turn over one set of squares on each turn.  If a match is found the square will stay turned over, the game continues until all the matches are found.  

This exercise is designed to explore more of what can be done with JavaScript, and how to apply game logic to achieve desired goals with the code.   The project will also demonstrate how to create a dynamic grid using code, and CSS grid.  The game should work the same regardless of the size and number of squares.

Exercise :

1. Setup the HTML to create several classes that can be applied to the page elements that will be created with JavaScript.   Set the main game board to use the display property of the grid and be able to apply CSS Grid to this element.  You can use the below HTML as a starting file to skip the creation of the HTML and CSS and adjust and customize as needed.
2. Setup the default game values, grid size, the arr for the possible contents, and a global game object that can hold score, total, game and flip array, timer and the game pause action.
3. Calculate the total of squares needed, add a condition to ensure that there is enough content in the arr to build the page elements with values.
4. Add an event listener document.addEventListener(‘DOMContentLoaded’, makeGrid); that gets invoked once the page loads.  It should invoke a function makeGrid()
5. Loop through the total number of items to be placed on the grid, add page elements and an event listener when the element is clicked to flipBox() function.  This function will be used as the elements on the page are clicked.  
6. Create an element making function called maker(), which will create the different elements, append the new element to a parent, add a class and add content into the element.  This will save a lot of repeat coding.  Add a class of box to each new element.
7. For the main game container set a property for the grid template columns, which will create the Grid Structure for the page.  style.setProperty(`grid-template-columns`, `repeat(${grid.y},1fr)`)  
8. Create a function to add the items to the newly created page elements.  Within the function add a temporary empty array, that can be used to duplicate the values and create a new array of all the items in the game.  Randomly sort the main array of items,  then loop through the total needed in a for loop, adding the one set of items into the temp array.
9. Using concat, duplicate the array and add it to the main game object array.  Then randomize the order of that new array.
10. Using querySelectorAll select all the elements with a class of box.  Loop through the elements, add a front and back element into the box class element.  Also add to the box class element the value of the text content on the front side, and the value of false for found.  These are new properties added to the parent element which can then be selected and used in the game logic.  Add to the front the text content from the array, and add classes to both front and back of front and back.
11. Create a function to handle the clicks on the box elements.   Within the function select the parent which should be the box element as the click event target should be the child element nested within.  
12. Add a condition to check if the element has a class of active, active should be added to each item as its flipped over, this can be used to avoid a duplicate flip of the item.  Also check for the game pause, as the pause can be used to stop the game play once 2 items are flipped over and need to flip back.
13. If the item is not flipped, then add the class of active to the parent with box class.   Add the parent box element into the game flip array for already flipped squares.  Check the length of the flipped squares, if there are 2 then create a function to checkCards() for a match.  
14. In the checkCards() function, pause the gameplay.  Loop through the flipped cards and check if they match.   If they do not match flipp the cards back. If there is a match then keep the flipped cards on the front, and clear the game.flip array.  Update the score of found items.  
15. If found to match check for the game over, if it’s over then end the game with a message to the player.
16. If no match is found then flip the cards back over to the back side, use the setTimeout() to create a pause so the player can observe the results.  When the cards flip back, continue the game play.
17. The game play will continue until all the matches are found.  There are several ways to accomplish the above objectives, as well the below code is designed so that you can use it to customize the game logic.  Try it out and make updates to the parameters to see and change how the game plays.