Etch-a-sketch

I did this assignment while I was studying to become Fullstack web developer on the oding project, and the important concept that I marked for doing this assignment was planning and writing your plan on white board or paper to perform what you are asked to do what ever the question is it either very simple or very difficult.
Actually the assignment was as following, Create a webpage with a 16x16 grid of square divs.
Create the divs using JavaScript. Don’t try making them by hand with copy and pasting in your HTML file!
It’s best to put your grid squares inside another “container” div (which can go directly in your HTML).
You need make the divs appear as a grid (versus just one on each line). This is a perfect opportunity to apply what you have learned about flexbox.
Be careful with borders and margins, as they can adjust the size of the squares!
“OMG, why isn’t my grid being created???”
Did you link your CSS stylesheet?
Open your browser’s developer tools.
Check if there are any errors in the JavaScript console.
Check your “elements” pane to see if the elements have actually shown up but are somehow hidden.
Go willy-nilly and add console.log statements in your JavaScript to see if it’s actually being loaded.
Set up a “hover” effect so that the grid divs change color when your mouse passes over them, leaving a (pixelated) trail through your grid like a pen would.
Hint: “Hovering” is what happens when your mouse enters a div and ends when your mouse leaves it. You can set up event listeners for either of those events as a starting point.
There are multiple ways to change the color of the divs, including:
adding a new class to the div.
changing the div’s background color using JavaScript.
Add a button to the top of the screen that will send the user a popup asking for the number of squares per side for the new grid. Once entered, the existing grid should be removed and a new grid should be generated in the same total space as before (e.g. 960px wide) so that you’ve got a new sketch pad. Tip: Set the limit for the user input to a maximum of 100. A larger number of squares results in more computer resources being used, potentially causing delays, freezing, or crashing that we want to prevent.
Research button tags in HTML and how you can make a JavaScript function run when one is clicked.
Also check out prompts.
You should be able to enter 64 and have a brand new 64x64 grid pop up without changing the total amount of pixels used.
Push your project to GitHub!
Extra Credit
Instead of just changing the color of a square from black to white (for example), have each pass through with the mouse change it to a completely random RGB value. Then try having each pass just add another 10% of black to it so that only after 10 passes is the square completely black.
So th first thing I did was trying to solve it by coding and eventually got my self in confusion and then I decided to think about and try to make a solution for it on paper by designing a diagram ,after that the first thing did was completing the UI and the started developing the code for the sketch.1 I developed the default sketching color and grid size which are black and 16*16.
2 I developed a code for resetting the board with the default value.
3 I developed a code for eraser.
4 I developed a code for rainbow mode.
5 I developed a code for the grid size.
so this all and the image above is the diagram I used to solve the problem.
and the link for the project is: https://yidnekachewtefera.github.io/Etch-a-sketch/
Thank You!!!!

Comments

[Oksana.Kolisnyk.22y.0]

Wow, a great description of the TOP Etch-a-Sketch with the
pre-defined steps and diagram.
It was interesting to read the topic as I practiced it too.

I'd like to share it too
my Live Demo Code
my GitHub Code

Thanks for the post😊