Upgrading the Simple 4x4 Grid with JavaScript

Re-making the Original

One of the flaws of the last method was that it involved a lot of copy-pasting and wasn’t scalable easily. This means that if you wanted an 8x8 instead you would have to go back in and copy-paste a bunch of times again and everyone knows that if you need to copy-paste a lot, there is a way to automate it.


Inline styling

Coming back to Inline Styling, my reasoning for using it in this project is to access a variable I made:

Event Listeners

Another big reason to make the boxes in Javascript is to add Event Listeners.

New Game Modes

The game is currently in a very early stage, in which only the base game is finished with a few features, however, I plan on making a lot of different game modes. Having access to variables such as gridSize will make doing that much faster and easier, and a lot less likely to break or have bugs.


Now you know how to more efficiently make the same 4x4 grid and add A LOT of new features and other things to it. This upgrade made my project possible and a lot quicker than it would have if I didn’t take the time to make the grid more efficient. If this blog is confusing, start with the previous one that explains what it is we are making at the simplest level and then come back to this one which will make things significantly better. I also encourage you to look up and make functions and other tools that can take advantage of this method, and the power of Javascript. I do think the method of the last blog has its place, as it is easy for anyone to understand, which makes for a great learning experience, but also it doesn’t use Javascript which means someone making a site in only HTML and CSS can use that method and understand it before moving on to Javascript.



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store