All solutions

Any Feedback Appreciated

I found it challenging to code the clever CPU move set. To get it working, I went with a brute force approach where the CPU checks rows, cols, and diagonals for moves to make, opponent's moves to block, and win requirements. I am curious if there is a more optimized way to do this.

One of the challenges I faced arose from the fact that i was changing the display property of divs using javascript. This was overwriting my CSS styles since javascript inserts styles inline. To get around this, I refactored my code so that the javascript would simply toggle a ".visible" class. The properties of this class I manipulated in my CSS.

One thing I'm insure of is how to best organize my CSS file, I will be looking into best practices on how this is done, but would love some feedback too.

All feedback welcome, thank you.

to center the grid container in the desktop view, I made it's parent, the body, into a flexbox container and used justify content & align items. Is this good practice ?

I found it challenging to overlap the images provided (the orange cube, the person at the screen, and the shadow) but with some research I found a nice way of doing it using CSS Grid. This also gave me substantial practice using CSS grid and next time i need to overlap images for a layout I will keep grid in mind.

I found it challenging to wrap my head around how mix-blend-mode works, it's something I definitely need more practice using. I also feel I could use more practice with the pseudoelements ::before and ::after.

There was really only one point that gave me confusion in this project. When switching to desktop view, my flexbox container changed from column to row as expected. However, I had to restrict the heights for both elements instead of setting the height for the flexbox container. Setting the height for the flexbox container didn't seem to do anything and I don't know why.

@media (min-width: 700px) {

    .wrapper {
        flex-direction: row;
        max-width: 37.5rem;
        align-items: center;
    }

    .img-pane {
        flex-basis: 50%;
        height: 28.125rem;
    }

    .right-pane {
        flex-basis: 50%;
        height: 28.125rem;
        border-radius: 0 0.625rem 0.625rem 0;
    }

writing height: 28.125rem in .wrapper did nothing and because the wrapper was oversized, i had to use align-items: center to center the children.

Some challenges I came across involved finding out how to validate the email address. Some research on stack overflow helped me come across a handy regular expression to take care of this.

Another challenge came when I tried to change the background of the input box to a reddish hue. Interestingly, using .style.backgroundColor made it so the color only flashed for a moment but using .style.background seemed to work as intended. I'm not sure why.

This was my first use of scss in my code so I'm sure I did not take full advantage of it's features. I would love to know different ways I could have made my .scss file cleaner or more DRY using some of scss's additional functionality.

Also, this was my first time using javascript in a project. I am mostly happy with the results although one thing I would change for the future would be making it so once a number is selected (background orange), the hover effects no longer apply to it.

the biggest challenge i faced in this project had to do with the large image in the upper right side, and how it continues off of the page. the issue i was running into was that it was either creating a horizontal scroll bar or if i declared the content wrapper as overflow:hidden, too much of it was being cut off. I eventually found a way to make it work by declaring the html element to have overflow-x: hidden but i would love to hear if there's a better way to do it.

I found it a little bit tricky to style the cards in a way that the white of the summary card extends past it's edge and seemingly behind the results card. To create this effect i made the summary card 2x the length of the results card and placed it behind the results card using z-index. I also had to reduce it to 1x the length of the results card when switching to mobile view. I found grid very helpful in easily changing the rows and cols when i got to this point.

Feedback is very welcome and appreciated. I'm new to html & css, and some things I"m not sure of include:

-organizational structure of html code and css classes. Was I right to place the content on the page in a content wrapper ?

• fairly certain I could use some clarity on unit usage on elements and their parents / children (em, rem, %, vw, vh, etc)