Introduction

There is no greater feeling than accomplishing something that has given you a lot of grief. Can you imagine what it would feel like to climb a mountain when you finally reach the top? For those of you who have done such things, that feeling is the biggest rush ever. You've overcome many obstacles in your path to get there and you get the dopamine rush that releases all the built up tensions that once hindered you but now intoxicates you with a joyous relief. I had such a moment this week, and I'm about to tell you all about it!

The Buildup

In my journey to complete The Odin Project, I'm currently working on the Etch A Sketch project (Etch A Sketch). Prior to starting this project, I had a preconceived notion that it was a very tough project that would take me a month or more to finish. I was hesitant to start for fear of failing. It just felt like it was more than I could handle at the time so I procrastinated until my university semester was over and I had no more excuses. I dove straight in and got to work.

The Work

The first thing I did was decided to create the GUI. I had visions of this being a showpiece one day for my portfolio. Until that idea was shot down by several of my peers in the Discord Community for TOP (Discord). I dove in and had what I think is a beautiful design going within eight or so hours. which you can see below:

With the GUI mostly done (I had to make a few adjustments along the way but it was 98% completed), I was ready to begin "the hard stuff". I immediately set out to get the grid going and I struggled with that. I struggled a lot. I was trying to implement a two-dimensional grid with a single loop and I'm sad to admit, but it took me several hours to figure that out. Once I put the second loop in there, it was a thing of beauty and let me tell you, I was overwhelmed with joy that I had finally achieved success. My grid had come to life and I could see all the various cells that I would one day soon be coloring in with my mouse. Proud of my work, I took the rest of the day off but not before lining out my work for the next day.

TOP doesn't require a grid toggle button/checkbox to toggle the grid on and off but I just had to have one. I was intent on having a grid toggle because I liked the idea of feeling like you're drawing on paper instead of graph paper! I learned a LOT about the Document Object Model (DOM) and parent and child relationships in this seemingly insignificant task of setting a measly little checkbox to toggle a class name from .grid to .noGrid. This really wasn't a difficult task, after looking back at it, but I looked at the logic all wrong and went about it from the wrong angle and spent about 10 hours too many on something that took 5 minutes to code.

Lessons Learned

Let me tell you something, when you are really struggling with something, and you eventually succeed, THAT my friends is the moment you learn the most. Once the realization of what your mistakes were sinks in, and then you contrast that with what is working and how it works, you gain the most from your period of struggle. I had difficulty understanding the difference between classList and className. Now, I don't think I'll ever forget that classList has methods that you can use to add and remove, toggle, and replace class names that are previously defined with className

I initially shied away from using the DOM as much as possible and it wasn't even intentional. I just had this instinct to try and handle things without looking at the DOM and I learned real quick that the DOM makes things much much easier to deal with. Who knew you could access all the elements of a parent with parentNode.children? The answer to that is obviously those that study the DOM and how it works, but I learn by doing and I learned a lot by the end of my experience in dealing with the grid, and the grid borders.

Conclusion

I am having a BLAST with Etch A Sketch despite the myriad of issues I'm creating for myself. I'm knocking things out one button/checkbox/slider at a time and it won't be long and this project will be in the rearview mirror. It will forever be ingrained in memory just how much this project is building on my knowledge of programming concepts. I can feel how much I've improved from 3 months ago when my journey first began. I'm excited and can't wait to keep pressing forward. Tonight, I'll begin the draw functionality and begin hooking up the colors to the "paint brush". It should be fun. After each and every minor victory, I can't help but be elated about my progress and what I've achieved, from where I started, to where I am now. I'm doing this. Until the next one...be good!

Photo by Jason Hogan on Unsplash