DEV Community

Jennifer Tieu
Jennifer Tieu

Posted on

Self-Taught Developer Journal, Day 60: TOP Building Rock Paper Scissors UI cont.

Today...

I finished redoing my layout. First, I commented out my original HTML code up to the grid-container class so I could experiment with using CSS grid. I created some temporary divs to make a 3x3 again to test the grid layout

3x3

grid-container code

Once I got the grid set up how I wanted it, I uncommented and removed the parent elements I used to group my original classes. Now I have 9 block level classes which equated to my 3x3 grid container instead of redundant groupings.

Updated Code

When I was messing with the mobile view, I got frustrated because grid container not responding to its parent flex container sizing. I wasn't able to figure it out and plan to revisit it at a later time.

Next, I used images for my rock, paper, and scissors buttons I got for free from Pixabay. I added the Orbitron font from Google Fonts to my file and used it to style my text.

Rock Paper Scissors UI

I am almost done with the UI. I just need to do a few more style edits and also have the game use the images when a selection is made.

Resources

The Odin Project
Revisiting Rock Paper Scissors
https://pixabay.com/images/search/rock-paper-scissors/

Discussion (0)