What I Learned Building Rock Paper Scissors in JavaScript
This weekend I decided to change up my coding routine and worked through a FreeCodeCamp walkthrough of building a simple Rock Paper Scissors app in JavaScript. My motivation in going through this tutorial was to brush up on some of my JS knowledge that I haven’t used in a few weeks, but I ended up learning a new CSS skill in this project that I hadn’t encountered before.
The beginning stages of building Rock Paper Scissors involve creating icons to represent each one of the choices in the game, and then adding event listeners to each of those icons in order to register the user’s choice in each round.
These event listeners are going to be the basis for the rest of the gameplay logic, but they also come in handy for later in the project when I styled each icon to represent whether the user has won or lost the round. In the GIF below you can see that the icon of the user’s choice lights up around the edges with either a red or green glow.
The functions that register whether a user has won or lost against their computer opponent are also triggering this glow effect, which is created using CSS styling. I was really excited to learn about how to achieve this effect once I realized it was using a property of HTML DOM elements that I had not encountered before. DOM elements have a property called ‘classList’ which allows you to access the CSS styling classes associated with a given element.
In order to create the fading in and out glow effect, I used the classList property in the ‘win’, ‘lose’, and ‘draw’ functions:
The first time that I used the classList property is on line 31 in the image above. I am selecting the div element containing the icon that the user has clicked on in order to add a class to that element temporarily. In order to do so, I had to go into my styles.css file and create a new class each for red, green, and gray borders around each icon.
The next step was to utilize the classList property to access which classes were styling each icon button. In their beginning states, none of the icons have any borders around them because they haven’t been selected yet. But I also didn’t want the border to stay on each icon longer than a second, because the game doesn’t end after one round. I was able to select the user choice div, access the classes styling that div using classList, and then using the ‘.add’ method to add a glow class to this div. To take care of removing the glow after about a second, I was able to combine the setTimeout function to specify a period of time along with the classList property to remove a class, similar to the way that I added the class on the line above.
One of my favorite parts about coding along with a tutorial is seeing how creatively something can be accomplished, and I really enjoyed learning how to create an effect that looks interactive, but is really just utilizing the ways that we can manipulate the DOM using CSS.
