This webpage is an online Etch-A-Sketch. Users can draw on the sketchpad using the mouse. They can change the size of the pad and the color of the "brush". There is also a button to clear all the sketching if users want to start over.
CLICK HERE TO VIEW THE PROJECT
-
► 17.3%
-
► 31.6%
-
► 51.1%
To get this project started, I broke everything down to smaller chunks. I had a Google doc with an ordered, step-by-step list of what I want to accomplish to bring this online Etch-A-Sketch to life.
First, I'd need to build the grid. Then moved on to the CHANGE SIZE button. Next was the CLEAR GRID button and finished off with the COLOR PICKER for the "brush".
The grid is the foundation of this program because without it, I can't build other features for the sketchpad. I actually got stuck at this step for many days. But with a little persistence and TONS of Googling, I cracked the code.
With this project, I also took the opportunity to learn more about Git and versions control. For each feature of the program, I had a dedicate Git branch so I could write the code for it. I then merged to the main branch once I finished. I also had a backup branch just in case I messed something up along the way.
I got a chance to brush up on my CSS as well. I learned a few new concepts throughout the project. Things like pseudo classes such as :first-child and :last-child. I also worked hard to improve my Flexbox skills.
- You have to fork this repo first. Github has a their own step-by-step guide with pictures to follow along.
- Note: You have the option of changing the name of your forked repo.
- And to have all the files locally on your computer, open Terminal -> change the current directory to the directory you want to put this forked repo. Then, enter the command line below:
git clone https://github.com/[your-username]/etch_a_sketch.git
- Note: If you change the name of your forked repo, replace 'etch_a_sketch.git' with '[your-forked-repo-name].git'. Github will automatically do this for you when you copy the link.
- Finally, change to your new forked repo directory.
cd etch_a_sketch
or
cd [your-forked-repo-name]
Please feel free to reach out if you need any help with this repo. 👉🏼 [email protected]