I made an interactive Tic-Tac-Toe game without using React or any CSS frameworks because, sometimes, companies have applicant portfolio-requirement “implement something non-trivial without use of any frameworks”.
Here are some tips for how I built this:
(1) The board squares are just div’s which have onclick callback functions.
setClickHandler(clickHandler, config) {
this._element.onclick = ({ target }) => clickHandler(config);
}
(2) First I implemented the clickable board and, once that was completed, then I added functions that check whether the game is over and whether anyone has won or if it is a tie.
(3) I implemented everything in one big function before refactoring to break the code up into classes for easier maintainability through better encapsulation.
I am happy for feedback; especially (1) on my style of JS because remember I am still new to best practices in this language – making it work and making it work using best practices are different. and (2) on the site’s responsiveness. I did make the board stretch and grow, on browser resize, yet I think I could have done more with media queries to reconfigure the design more optimally for mobile.