Yesterday, I was challenged by a potential employer (fingers crossed) to share a few JS classes I’m proud of. I had a lot of fun writing this up, and I figured I would share it with y’all, as well.

Below, you will find code samples from my React app, OurCal, which is deployed on Heroku, here. I chose this project because it was originally written in vanilla JS before I refactored it, and I thought it would be interesting to show how the classes evolved.

The vanilla JS Block class creates the 25x25 pixel grid, or block. The constructor accepts the block’s name and an array of pixels. To create the individual Pixel objects, the constructor calls the createPixels method, which loops through the pixels array and calls on the Pixel class for each element. This method returns the newly-created Pixel objects as an array to be sent to the back end.

The vanilla JS Pixel class is a simple constructor. It accepts four arguments, the x and y coordinates, the background color, and the color_variable representing the pen used to select the pixel.

After converting OurCal to a React app, the classes get a bit more complex (and fun).

The React CompleteBlock class displays a fully-colored block. It takes the block’s name and block data as props. The createBlock and createColumns methods work in tandem to populate a grid with individual Pixel objects. On componentDidMount(), the pixels are then filled with the appropriate background colors, using the colorPixels method.

The React Pixel class creates the individual pixels, based on the block’s location, which is passed in through props. If the location is Template (the editable block), a click handler is attached to the pixel. The handleClick method toggles the pixel’s className (and corresponding background color). Pixels in the Template location are also added to the Redux store through componentDidMount.

Bug Alert!

The current Heroku deployment contains a bug dealing with the toggled background colors.

I am aware of it and have addressed the problem in the code. I’m working on deploying the fix, hopefully, later today.