Rock-Paper-Scissors JS Project

Posted by Roberto Livi on July 26, 2020

Working on this project really made me grow as a developer. There were so many obstacles to overcome, but with preserverance, I was able to get through eventually. It was great to put everything I had learned throughout the Javascript module into one project. This project taught me just how powerful Javascript can be. By running a rails api, creating objects from the frontend, and being able to manipulate the DOM, you can definitely create something really special. Since this is my first Javascript project, I didn’t want my idea to be too complicated. I decided to make a Rock-Paper-Scissors game against the computer and create a leaderboard based on how many times you were able to win in a row.

Gathering the data and knowing how to call them was very crucial when working on this project. I was debugging constantly and testing out code in the console before applying them to my files. Throughout my experience at Flatiron, I have noticed that the better I am at debugging and getting to the root of the problem, the more efficient I can be by not spending too much time not knowing what the next step is.

The beginning:

I started out the project by creating HTML Elements. I filled out the page with all the elements that I needed to get a good visual. This helped me a lot to pick my spots and organize myself throughout the project.

The middle:

In the middle of the project, I had to manipulate the DOM based on the data that I was receiving from my rails api. In order to do this, I needed to store users. I would store users to my rails api and with that information, I can manipulate the DOM by fetching the data from the API.

The end:

This was the hardest part for me. To have the leaderboard sorted based on the highest score. I overthinked it but once I knew what needed to be done, it all became clear. I gathered all users with their individual score in one url, fetched that data, sorted it based on highest score, and then iterated through the spots on the leaderboard with information from the name and score of the user.

Overall, I felt quite good about this project. Very excited to do more in order to get more comfortable with DOM manipulation and Javascript in general.