{"_id":"@corbincargil/etch-a-sketch","_rev":"3-432207c6b89fec4cf99efc9e1d858a45","name":"@corbincargil/etch-a-sketch","dist-tags":{"latest":"1.0.2"},"versions":{"1.0.0":{"name":"@corbincargil/etch-a-sketch","version":"1.0.0","keywords":["web-component","etch-a-sketch","drawing","pixel-art"],"author":{"name":"Corbin Cargil"},"license":"ISC","_id":"@corbincargil/etch-a-sketch@1.0.0","maintainers":[{"name":"corbincargil","email":"corbin.cargil@gmail.com"}],"homepage":"https://github.com/corbincargil/etch-a-sketch#readme","bugs":{"url":"https://github.com/corbincargil/etch-a-sketch/issues"},"dist":{"shasum":"edf56bcd67f9768146dbe23db8c435624b998a6b","tarball":"https://registry.npmjs.org/@corbincargil/etch-a-sketch/-/etch-a-sketch-1.0.0.tgz","fileCount":15,"integrity":"sha512-OnwvkBvmcD8LTQQpd9DR9vAq/DgyvAP56ECex0GOlYmPVOinG2auEufdHUGWsw8on7CdDq64BC4TDoAPVIfcdw==","signatures":[{"sig":"MEYCIQD9hT2lS2Go8qUgJJyNKeV7eseuP3DCM9U3tRZOnPrRrgIhANOWs9/jBaAmB4Zb5spFn7MCarvAMn6g8hvkCPQFc/oJ","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":632155},"main":"etch-a-sketch.js","type":"commonjs","gitHead":"fb718e12f2c64b3014ea1dc85406e6df460b6f26","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"_npmUser":{"name":"corbincargil","actor":{"name":"corbincargil","type":"user","email":"corbin.cargil@gmail.com"},"email":"corbin.cargil@gmail.com"},"repository":{"url":"git+https://github.com/corbincargil/etch-a-sketch.git","type":"git"},"_npmVersion":"11.4.1","description":"A simple etch a sketch implementation","directories":{},"_nodeVersion":"22.12.0","_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/etch-a-sketch_1.0.0_1751430899820_0.8979932657469303","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@corbincargil/etch-a-sketch","version":"1.0.1","keywords":["web-component","etch-a-sketch","drawing","pixel-art"],"author":{"name":"Corbin Cargil"},"license":"ISC","_id":"@corbincargil/etch-a-sketch@1.0.1","maintainers":[{"name":"corbincargil","email":"corbin.cargil@gmail.com"}],"homepage":"https://github.com/corbincargil/etch-a-sketch#readme","bugs":{"url":"https://github.com/corbincargil/etch-a-sketch/issues"},"dist":{"shasum":"fabdca356f75336327bab9827659016f07a275da","tarball":"https://registry.npmjs.org/@corbincargil/etch-a-sketch/-/etch-a-sketch-1.0.1.tgz","fileCount":15,"integrity":"sha512-nr5n/tmtrAXT0vUEVYquZM8EdJ/px5mspxYsYre+72TM+s1VJ+d9hmzKNduTxoO0O9+Q9bfvUJT5i8Cf6FMUfg==","signatures":[{"sig":"MEQCIBEQuWF2bVupHfWWrDFR4BlJlOcuminLAm9zp+kJ/T3jAiAmr19cKlp9M0DvgKWldKwRKY3xXgP19xXYgLL2Iqqbvw==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":632155},"main":"etch-a-sketch.js","type":"commonjs","gitHead":"1726da3c4d0f3b4f2f0e60d7cb559260c3add533","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"_npmUser":{"name":"corbincargil","actor":{"name":"corbincargil","type":"user","email":"corbin.cargil@gmail.com"},"email":"corbin.cargil@gmail.com"},"repository":{"url":"git+https://github.com/corbincargil/etch-a-sketch.git","type":"git"},"_npmVersion":"11.4.1","description":"A simple etch a sketch implementation","directories":{},"_nodeVersion":"22.12.0","_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/etch-a-sketch_1.0.1_1751431080053_0.8454196202244977","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"@corbincargil/etch-a-sketch","version":"1.0.2","description":"A simple etch a sketch implementation","keywords":["web-component","etch-a-sketch","drawing","pixel-art"],"homepage":"https://github.com/corbincargil/etch-a-sketch#readme","bugs":{"url":"https://github.com/corbincargil/etch-a-sketch/issues"},"repository":{"type":"git","url":"git+https://github.com/corbincargil/etch-a-sketch.git"},"license":"ISC","author":{"name":"Corbin Cargil"},"type":"commonjs","main":"etch-a-sketch.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"_id":"@corbincargil/etch-a-sketch@1.0.2","gitHead":"10b1378b8b12ce16d3704788fd7df0912ee2159a","_nodeVersion":"22.12.0","_npmVersion":"11.4.1","dist":{"integrity":"sha512-Z5gaFQD8LFEMQQbRRFuGDKH+NhVWFaUcm8MhJ+dFmZzzZ3tv8d15+CFWY3lzK3SsLSLeRaS9Nv9oRXQPe6/fIQ==","shasum":"96f85d468cd8428af57a03f2e778a054f098747b","tarball":"https://registry.npmjs.org/@corbincargil/etch-a-sketch/-/etch-a-sketch-1.0.2.tgz","fileCount":15,"unpackedSize":640068,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIFztSq+9wLpKNa9PoQKrP0rgs3IhjYmqNzbIjmGpAdmCAiBMbKwQZtW6bP+T8Od5hiNEEk1ez4Z8Cf03fU1dYOq7gw=="}]},"_npmUser":{"name":"corbincargil","email":"corbin.cargil@gmail.com","actor":{"name":"corbincargil","email":"corbin.cargil@gmail.com","type":"user"}},"directories":{},"maintainers":[{"name":"corbincargil","email":"corbin.cargil@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/etch-a-sketch_1.0.2_1751436254691_0.005934683972328658"},"_hasShrinkwrap":false}},"time":{"created":"2025-07-02T04:34:59.743Z","modified":"2025-07-02T06:04:15.041Z","1.0.0":"2025-07-02T04:34:59.987Z","1.0.1":"2025-07-02T04:38:00.285Z","1.0.2":"2025-07-02T06:04:14.872Z"},"bugs":{"url":"https://github.com/corbincargil/etch-a-sketch/issues"},"author":{"name":"Corbin Cargil"},"license":"ISC","homepage":"https://github.com/corbincargil/etch-a-sketch#readme","keywords":["web-component","etch-a-sketch","drawing","pixel-art"],"repository":{"type":"git","url":"git+https://github.com/corbincargil/etch-a-sketch.git"},"description":"A simple etch a sketch implementation","maintainers":[{"name":"corbincargil","email":"corbin.cargil@gmail.com"}],"readme":"# etch-a-sketch\n\n## Description:\n\nThis 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.\n\nThis project was a part of The Odin Project curriculum. \n\n## Live Preview: \n\nUse this link to access a live demo of the sketching interface: https://corbincargil.github.io/etch-a-sketch/\n\n## Features: \n\n* Draw in differenct colors\n* Change the size of the grid from 2x2 all the way up to 100x100\n* Eraser for those pesky mistakes (still fixing some minor bugs)\n* Reset button that clears the slate entirely\n\n![image](https://user-images.githubusercontent.com/100732012/163267896-4c2f242c-330e-4b88-8a4e-bb6e3b22a2ab.png)\n\n\n## Lessons Learned:\n\n* Advanced DOM manipulation to make the webpage interactive\n  * Use of event listeners for creating an interactive UI\n  * Combining event listeners to create the click and drag effect\n  * Changing the attributes of nodes such as adding/removing classes and id's\n  * Adding and removing nodes using JS\n* The importanct of reviewing code I've written and cleaning/refactoring it to make it more readable and more efficient\n* Use of guard clauses in functions\n* CSS variables for changing the grid size and CSS styling for the user interface\n* Continued practice with Git & GitHub for version control \n\n## Technologies Used:\n\n* HTML, CSS, JavaScript\n* Git & GitHub\n* Chrome dev. tools\n* MacOS Terminal\n* VS Code\n* Lots of Googling\n","readmeFilename":"README.md"}