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
Technologies:
Tools:
☑️
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
-
How to take user input and use it to dynamically manipulate the DOM with JavaScript
-
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
-
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.