etch-a-sketch

Etch-a-sketch project for the odin project.

• create 16x16 grid of squares with javascript X

  • create function that creates a square div X
  • create loop that runs required amount of times(tiles)^2 to create grid X
  • set flex values to ensure consistent sizing X

• create hover effect that changes color of square when you hover over it

  • create eventlistener for hover tag X //ended up being mouseover
  • make function to run on this to either add class or change background-color X
  • bonus: change color each time a tile gets passed and add value to darkness
  • Design bonus: add listtener for which direction tile is getting entered from and use to aniimate knob / transform

• add button to clear grid and query amount of squares in new grid X

  • Max 100
  • Create box on top for number to be added to maintain ease of use X
  • delete current divs on click and create new amount based on number entered X
  • animate container div with sand shake sound

• Design ideas

• add border around with appropriate color with title

• add shake to button for reset

• add spinning knobs that rotate based on mouse direction

  • https://codepen.io/azedo/pen/nywlc

• add floating clouds

credits:

• Bonheur Royale font by Robert Leuschke;
• Dymaxion Script font by Nick's Fonts;
• Merkurius font by omaikraf;