DOM manipulation using JavaScript

18Jun 2018 by Nic

memory gameDOM Manipulation Using JavaScript

The theme for the last couple weeks has been DOM manipulation using JavaScript as I’ve worked on finishing up the Memory Game project. A big piece of the memory game project is using DOM methods to change HTML elements and updating the elements to reflect actions taken in the game. Examples would be the timer starting and stopping, move counter increasing by one each time two cards were opened and the star rating decreasing based on total moves made.

Event listeners

Event listeners are methods that wait for a particular action to occur before they fire. For the Memory Game project, event listeners are primarily set up in response to card click events. An example would be clicking a card which in turn kicks off code to add/remove a class from that card. When the class is added/removed the card will appear differently based on the style in the stylesheet (css). The cards have three distinct states. Unselected (not flipped), selected (flipped upright), and matched (flipped and matching another card.) The addEventListener() method is added to the Memory Game cards to “listen” for a click. Once clicked a card will change color to show to the user it has flipped upright to show it has been selected. If two cards are selected and they match, they change color to indicate they have been matched.

An event listener is also used for the reset/restart button to listen for a click event and restart the game if clicked.

What I learned

I don’t know what I don’t know

Until I need to figure it out. I learned that I still have a lot to learn about DOM manipulation using JavaScript and really DOM manipulation as well as JavaScript in general. The memory game project was a lot of trial and error for me. At any given moment during the project I either felt super happy because I figured something out or super lame because I broke key functionality and had to start over. This project was a great way for me to place a glaring spotlight on gaps of knowledge.

Keep ’em separated (in functions that is)

I struggled most with getting the game reset functionality to work without borking the game.  For an entire weekend I would tweak a feature to get it working and it would break something else. The main issues I ran into was my click event listener wasn’t working as expected and my timer wouldn’t reset after restarting my game.  Once I started putting key functionality in separate functions and then calling them from the newGame() function that helped considerably.

Console.log() is your friend

My  troubleshooting process involved putting a bunch of console.log(‘im in this functionName now’) functions to view on the console and know where my code was at any given moment. I’d toss in relevant variables I wanted to keep track of to display on the console so I could be certain my click, move and timer counters were working as intended. It also made it very apparent when my click event listener wasn’t triggering as expected.  Don’t be afraid to use console.log() with reckless abandon. Just be sure you are using good descriptive text so you know what you’re displaying on the console. 

Break it out…Get it all out and start breaking out

Yikes that The Rocket Summer song is terribad sorry.  I suppose it gets the point across.  Anyway…another area I really had to noodle on was the order of everything and making sure the functionality in the game was being declared and called in the right places. Otherwise I would run into issues because functions were trying to call things that weren’t declared yet. What would have made this easier is doing a better job up front breaking out the flow of the code before I jumped in and started writing the code. 

I am learning the good, bad and ugly about my coding style. I like to jump in and get something done as a starting point then build around the piece I started. This doesn’t always work if I don’t give careful thought up front on how the program should be laid out.

Here’s a link to my memory game project and all its glory.

Plan for this upcoming week:

The next topic I will be working on will be accessibility. The below will take ~5 hours.

  • Accessibility
  • Focus
  • Semantic HTML
  • Navigating Content
  • ARIA
  • Style (CSS Styling for accessible design)

Summary of current progress:

  1. Web Foundations (HTML, CSS, Responsive design…) (100% complete)
  2. Web Programming with JavaScript (JavaScript, git, version control, DOM..) (100% complete)
  3. Exploring JS – Object, Tools and Testing (Accessibility, testing, optimization) (6% complete)
  4. Front-End Applications
  5. Building with React
  6. Extracurricular (jQuery, security) (25% complete)
  7. Job Search Strategies (Career)
  8. Networking (Career)
  9. Front-End Interview Practice (Career)