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
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).
CompleteBlock class displays a fully-colored block. It takes the block’s
block data as props. The
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
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
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.