When Angular and React were first released, I remember how everyone was excited at how JavaScript was redefining what it meant to build an interactive lightweight website. People were also interested in which one would win outright... I mean... they are both basically the same... right?
Ah, flexbox. Where do I start. OK, so flexbox is a CSS layout option that was added as part of CSS 3. It gives us the ability to layout elements on a page in ways that were only possible using ugly JavaScript hacks previously. This is a good thing.
There's been a movement for some time now surrounding decoupling the front-end of websites in order to increase responsiveness and ease of development. It's an interesting idea and I can certainly see the benefits.
There are all sorts of different types of software testing and arguments as to which ones are the best, but I think the most important thing is that you are doing some sort of testing.
I think we're quite lucky in our industry. Software development is still a relatively young field and we just happen to be alive in a time when it is thriving.
When someone wins, highlight the three squares that caused the win.
In order to check which three squares caused the win, I edited the calculateWinner() helper function to return an object containing the winning line, in addition to the winning shape (which it already does).
Add a toggle button that lets you sort the moves in either ascending or descending order.
In order to toggle the move sort direction, we need to create a variable to track whether we're currently sorting in ascending or descending order. Adding another property to the Game component's...
Rewrite Board to use two loops to make the squares instead of hardcoding them.
We can rewrite the board using nested loops. We'll use one loop to create three individual squares and another one to take these squares and wrap them in a div. We'll do this last bit three times......
Bold the currently-selected item in the move list.
In order to add this improvement, we need to compare two variables, the currently displayed step number (tracked via the stepNumber property in the Game component's state) and each moves individual step number. We can access this...