-Oliver, Claire, Yiming

Using Developer Tools

  • We went to the page with the RPS game —> (https://pages.opencodingsociety.com/rock-paper-scissor/) and accessed the developer tools by right clicking and pressing “Inspect”

RPS console screenshot

  • Once this is open, you can go to console and play around a bit

    • Example: Type in playRPS(“paper”)

    • The result should come out like this (Image of the console after you type in a command)

!!! The console allows you to test and edit things on the page, and see the changes right away. You can try this out by typing in these commands

  • rock.setBorder(‘4px solid purple’);

    • This command allows you to change the border. You can increase ↑ or decrease ↓ the thickness of the border by changing the number right before px, and you can also change the color EX: solid yellow

  • paper.rotate(15);

    • This command lets you rotate ↺ the paper and you can play around with this one by changing the number

  • scissors.setWidth(150);

    • This command allows you to change the size of the scissors on the page.

You could also try changing the background using this!

  • document.body.style.background = ‘#222’

    • (we tried things out and explored with this, found out that you can use all different kinds of color codes EX: #F4C2C2)

Before

(image of the before)

After

(image of the after)