Hope everyone had a great time over the holidays! Mine were busy but amazing, so I didn’t get as much coding practice as I would have liked.

I found jQuery a lot easier to pick up than JavaScript, but after completing the section on jQuery (which included a Codecademy and a Code School course, as well as some videos,) I went back and found that I understood more of the JavaScript than I had previously.

I’ve finished the jQuery section of the Odin Project, and am now working on the project; building an Etch-a-Sketch/sketchpad with JavaScript/jQuery. I think it’s a great project- I have fond memories of playing with an Etch-a-Sketch, so I’m really excited to make it work! …that being said, I thought I was doing something really clever and now I’ve started running into problems with it.

The project requires that you create a grid, made up of <div>’s, using JavaScript or jQuery [I’ve been using jQuery for the most part so far.] When you hover over a div it should change color, so moving across the grid creates a line, like when you use an Etch-a-Sketch. There should be two clickable buttons, one which clears the screen [I’d love to be able to make an app like this where you could actually shake your tablet to clear the screen!], and another which lets you change the number of squares in the grid, without actually changing the size of the gird.

I made a container to hold my grid a set size [500px- bit enough that you’d be able to draw something on it!], and used jQuery to generate <div>’s. Because the number of <div>’s generated could be changed, I couldn’t use a set size, so I set both the height and width to ((grid area)/(number of squares)). I though this should work fine, and it did until I made the mistake of checking it in another browser… while Chrome is perfectly happy with a value with four decimal places, IE will only use two decimal places, and Firefox doesn’t appear to use any decimals at all and have rounded the size up to the next whole number! Changing the size by even a fraction of a pixel reduces the number of squares I can have on one line, so instead of having a grid that is 64 x 64, it becomes 63 x 65 (and a couple square floating at the bottom.) I’ve looked into it and it seems to be something that developers and designer just have to work with, so I’m going to take a tea break, and then come back to the project fresh!

I’d love to hear of any similar projects anyone may have made!