Self-Taught Developer Journal, Day 44: TOP Building Rock Paper Scissors UI

Today…

We are revisiting the Odin Project Rock Paper Scissors Assignment and now building a UI (User Interface). I’m excited to create a UI for the first time.

After setting up git branch for the UI changes, I walkthrough the instructions laid out …

Today…

We are revisiting the Odin Project Rock Paper Scissors Assignment and now building a UI (User Interface). I’m excited to create a UI for the first time.

After setting up git branch for the UI changes, I walkthrough the instructions laid out in the assignment.

The first step was to remove the logic to play exactly five rounds of the game.

The next step was to create three buttons, one for each selection (rock, paper, or scissors). Then add an event listener to the buttons that call my playRound function with the correct playerSelection every time a button is clicked.

I am trying to use the BEM methodology so I am keeping that in mind as I am naming things. I created the buttons in HTML and gave them each a class.

Buttons

In my JavaScript, I used the querySelector to select the buttons by their class. Then added an eventListener to each node to listen for an “click” event and passed in the playRound function.

addEventListener

For now, I am console logging the event to see what is returned, but I am getting an error in console that I am trying to resolve.

Error

I Googled the error and looked through this stackoverflow post. I realized I forgot to put the include the defer keyword in my script tag to load the file after the HTML is parsed.

That fixed the error and the event is now logging to the console.

Event Log



Resources

The Odin Project
Revisiting Rock Paper Scissors


Print Share Comment Cite Upload Translate
APA
Jennifer Tieu | Sciencx (2024-03-28T23:54:28+00:00) » Self-Taught Developer Journal, Day 44: TOP Building Rock Paper Scissors UI. Retrieved from https://www.scien.cx/2022/01/20/self-taught-developer-journal-day-44-top-building-rock-paper-scissors-ui/.
MLA
" » Self-Taught Developer Journal, Day 44: TOP Building Rock Paper Scissors UI." Jennifer Tieu | Sciencx - Thursday January 20, 2022, https://www.scien.cx/2022/01/20/self-taught-developer-journal-day-44-top-building-rock-paper-scissors-ui/
HARVARD
Jennifer Tieu | Sciencx Thursday January 20, 2022 » Self-Taught Developer Journal, Day 44: TOP Building Rock Paper Scissors UI., viewed 2024-03-28T23:54:28+00:00,<https://www.scien.cx/2022/01/20/self-taught-developer-journal-day-44-top-building-rock-paper-scissors-ui/>
VANCOUVER
Jennifer Tieu | Sciencx - » Self-Taught Developer Journal, Day 44: TOP Building Rock Paper Scissors UI. [Internet]. [Accessed 2024-03-28T23:54:28+00:00]. Available from: https://www.scien.cx/2022/01/20/self-taught-developer-journal-day-44-top-building-rock-paper-scissors-ui/
CHICAGO
" » Self-Taught Developer Journal, Day 44: TOP Building Rock Paper Scissors UI." Jennifer Tieu | Sciencx - Accessed 2024-03-28T23:54:28+00:00. https://www.scien.cx/2022/01/20/self-taught-developer-journal-day-44-top-building-rock-paper-scissors-ui/
IEEE
" » Self-Taught Developer Journal, Day 44: TOP Building Rock Paper Scissors UI." Jennifer Tieu | Sciencx [Online]. Available: https://www.scien.cx/2022/01/20/self-taught-developer-journal-day-44-top-building-rock-paper-scissors-ui/. [Accessed: 2024-03-28T23:54:28+00:00]
rf:citation
» Self-Taught Developer Journal, Day 44: TOP Building Rock Paper Scissors UI | Jennifer Tieu | Sciencx | https://www.scien.cx/2022/01/20/self-taught-developer-journal-day-44-top-building-rock-paper-scissors-ui/ | 2024-03-28T23:54:28+00:00
https://github.com/addpipe/simple-recorderjs-demo