/The-Odin-Project---Etch-a-Sketch

I created a drawing app for the web with a modern GUI using vanilla JavaScript, HTML, and CSS.

Primary LanguageJavaScript

The Odin Project---Etch-a-Sketch

Instructions

https://www.theodinproject.com/lessons/foundations-etch-a-sketch

Purpose

To build a browser version of a cross between MS Paint and an Etch-A-Sketch.

Preview

image

Technologies:

  • JavaScript icons8-javascript
  • HTML icons8-html-5-20
  • CSS icons8-css3

Tools:

  • Git icons8-git
  • Github icons8-github

Outcome ☑️

I created a drawing app for the web with a modern GUI using vanilla JavaScript, HTML, and CSS.

Website Link
GitHub demo https://jaredbradley243.github.io/The-Odin-Project---Etch-a-Sketch/

Summary

What I learned

  1. How to take user input and use it to dynamically manipulate the DOM with JavaScript

  2. How to combine multiple event listeners with boolean logic to listen for custom user behavior, such as passing over an element while pressing and holding a mouse button

  3. Continued to improve my JavaScript DOM manipulation skills after being introduced to the topic with the JavaScript Drum Kit and further exploring the topic with Rock, Paper, Scissors

Customizations

To challenge myself I added multiple features beyond what was required in the exercise, including:

  • Fill Tool
  • Eraser Mode
  • Click-and-Drag functionality
  • Clear Button
  • Border Selector
  • Grid Resizing via Input Range Object

What could be improved

  • I would like to add an eraser size selector to improve the user experience with the eraser tool.
  • I would like to extend the application to mobile devices, as currently it requires a mouse to interact with.