Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

@corbincargil/etch-a-sketch

corbincargil228ISC1.0.2

A simple etch a sketch implementation

web-component, etch-a-sketch, drawing, pixel-art

readme

etch-a-sketch

Description:

This etch-a-sketch project is a simple sketching interface that allows the user to make pixel art by clicking and dragging their mouse through the grid. The grid can be reset and the number of rows & columns on the grid adjusted as well. The primary goal of this project was to practice using advanced DOM manipulation to make an interactive web page.

This project was a part of The Odin Project curriculum.

Live Preview:

Use this link to access a live demo of the sketching interface: https://corbincargil.github.io/etch-a-sketch/

Features:

  • Draw in differenct colors
  • Change the size of the grid from 2x2 all the way up to 100x100
  • Eraser for those pesky mistakes (still fixing some minor bugs)
  • Reset button that clears the slate entirely

image

Lessons Learned:

  • Advanced DOM manipulation to make the webpage interactive
    • Use of event listeners for creating an interactive UI
    • Combining event listeners to create the click and drag effect
    • Changing the attributes of nodes such as adding/removing classes and id's
    • Adding and removing nodes using JS
  • The importanct of reviewing code I've written and cleaning/refactoring it to make it more readable and more efficient
  • Use of guard clauses in functions
  • CSS variables for changing the grid size and CSS styling for the user interface
  • Continued practice with Git & GitHub for version control

Technologies Used:

  • HTML, CSS, JavaScript
  • Git & GitHub
  • Chrome dev. tools
  • MacOS Terminal
  • VS Code
  • Lots of Googling