buondevid / etch-a-sketch

A simple Etch-a-Sketch app to unleash your imagination!

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Etch-a-Sketch πŸ–ŠοΈ

App Canvas

App Heart drawing

App Menu


This tool was created using only HTML, CSS and Vanilla JS.

This project is part of The Odin Project's curriculum to become a Full Stack Developer!

The style is pretty basic but functional, I aimed to make it look clean.

πŸ”— Live preview: here

πŸ“– Repo: here

Stack & Tools

  • HTML
  • CSS
  • JS
  • VS Code
  • Git & GitHub + Mac Terminal
  • ESLint + npm to manage the project, and enforce JS syntax and style

What I learned

  • Improved Javascript fundamentals:
    • Digged deepeer into HTML5collections, nodelists, arrays.
    • Deepened knoweledge about Event listeners and how to nest them (and reset them).
    • Used string manipulation to darken incrementally the color of cells when hovering: a lot of meditation for that!!
    • Learned how cleaner and simpler are Event delegations instead of looping (tho, it wasn't usable in my project)
    • Improved by ability to look into documentation and search with on spot questions (and answers)
  • Mastered configuration of ESLint + Prettier (the latter, I chose not to use in the end).
  • Started using npm to initialize project.
  • Deepened Git knowledge about revert, reset, stash, working directory, and VScode interface about them: very useful in times of debugging. πŸ˜„

What could be improved

  • I wish to improve my knowledge in responsiveness and correct usage of length units to achieve that (vw, rem, em)

Author

πŸ—Ώ buondevid --> GitHub

About

A simple Etch-a-Sketch app to unleash your imagination!


Languages

Language:JavaScript 63.5%Language:CSS 25.2%Language:HTML 11.3%