My Top Insights on Etch-a-sketch on the Odin project
It is quite daunting when you see a project like etch-a-sketch as a beginner programmer. It is especially confusing when writing the first line of code to get yourself familiar with the problem at hand. The magic begins to unravel when you start breaking down the problem you have to the smallest indivisible sub-parts to such an extent a 5-year-old could make sense of what you’re trying to solve.
So what did I actually learn from this project? or let me say which kinds of problems I encountered in the course of trying to create this project on my own without copying and pasting the coding from somewhere else.
Some of the things I may write down may not be so much of a problem to most people but I believe there is a segment of people who may struggle a bit when it comes to coding and may feel they’re dumb or not smart enough to write any better code. To these people, I would like you to understand you’re not alone, and for what it's worth, congratulations for pushing hard for what you believe in. There are countless many people out there who may not dare to embark on the adventure you’re on now.
I started creating the grid boxes with javascript but the boxes were not showing up as I would expect also I was wondering how to break the flow of the boxes when they reach the stipulated number of columns. To be honest, I struggled with this a bit before having a work around it. From my little experience, I think it is a good strategy to experiment with a sample dataset by doing the process manually after which you try to code it up in javascript. This way you familiarize yourself with the flow of your ideal solution.
Initially, I was creating the styling with javascript which resulted in a bloated code so In my opinion, if it is not really necessary to do the styling with javascript it would be a great idea to have the styling in a different file and add the styles to the elements with javascript as and when necessary.
I also came across the problem where I was using a forEach loop on HTML collection which doesn’t work. I sidestepped this issue with a for Loop. I was still not satisfied so I asked in the Odin project forum and it was there I got the idea to convert the HTML collection into an array before looping over it. This speaks of how important it is to have a community whiles you’re learning how to code. I had already spent too much valuable time thinking about the problem that I could have easily solved if I had asked in the right place.
Finally, as part of the requirement of the project, I was supposed to use a prompt method to request the user to input the number of grid boxes to create. I realized the prompt executed before the clearing could be done. It was actually weird for me upon first encountering this. I searched around and I realized I could attack this problem with the set timeout function.
I am sure there are more elegant ways to solve the above-mentioned problems and would much appreciate your ideas or critiques on this piece.
These are my top insights on the project after finishing the project. I still believe, there is more I can do on this project so I hope to come back to it and add more functionalities to it.
kindly follow this link to play with this project and let me know your feedback. https://owuracoder.github.io/Etch-a-Sketch/
