After scratching my head a bit over this project, I managed to finish it!

The project in the JavaScript/jQuery section of the Odin Project asks the students to create a sketchpad/Etch-A-Sketch, using JavaScript/jQuery. You need to create a grid (using jQuery/JavaScript, not just html), and when you hover over the squares on the grid they should change colour, so that you leave a trail where your mouse has been, like the way you create lines on an Etch-A-Sketch. There should be a button to clear the grid, as well as one which lets the user change the amount of squares in the grid.

Check out my version here, or see the js file here.

I mostly used jQuery for this project, and I tried to use it as much as I could to generate the grid, including the styling. This definitely wasn’t the most efficient way to make the grid, but one of the goals of the project was to use JavaScript or jQuery for as much as possible.

This was one of the first times that I really worked to make something cross-browser-compatible. In my previous post I wrote about having problems with Firefox rounding up decimal places. Since the size of the squares changed when the user changed the number of squares in the grid, this quickly became a problem: squares were rounded up from 7.8125px wide to 8px, and squares which no longer fit on a single line inside of the 500px wide container were pushed onto the next line.

Originally, I had used jQuery to generate the total number of squares required for the grid, and used the dimensions of the container to arrange the squares into a square shape. The total area size of the grid wasn’t meant to change at all, but there appeared to me to be no way I could change the way browsers rounded decimals, so I ended up not using a width property on the container so that it could expand if the number of pixels was rounded up. Strictly speaking, this means that the total size of the grid does change, but given my [apparent lack of] options, I thought that this was the best way forward.

The problem made me recall an article I’d read recently on designing for responsive and cross-browser support. The author said that the goal wasn’t to make a website or element look exactly the same in every browser, but to make it function the way that it should. I took this to mean that instead of fighting Firefox to try to fit everything inside 500px, I should use the 500px dimension to calculate the size that each square should be, and then adjust my layout so that it can conform to the output.

I really enjoyed this project; there were a few challenges involved, so I really felt as though I’d accomplished something when I’d finished. I’m tempted to look out for similar ones, or I may just make this again, this time making it as efficient as I can. I’d love to hear from anyone who’s done this project, or something like it.