From The Odin Project's curriculum
First create a web-page with a 16x16 grid of square divs; the divs should be made in javascript, no html and they should be inside another div (this I can do in html). Once the grid is all set up, make a hover animation that changes color to the divs when you hover with your mouse on them, the changed color have to remain even after the mouse moved away from the div. Last but not least, put a button that erase the board and asks the user to input the number of squares per side the new grid should be (the space occupied should be the same - 960px). Bonus: make the color change to a completely random rgb value instead of gradations of black.
By the end of this project I should have learned:
- How to create and remove elements in the DOM with js
- How to style elements with js
- How to make and use buttons
- How to use the Random() module to pick random colors