Vanilla javascript drawing grid

#javascript #css #html #beginners

Hello, I want to share a project I have been working on for the last few weeks.

This project has been developed as a final work as part of the Bootcamp given by GeeksHubs in UrbalabGandía.

It has been created with HTML5, CSS3 and vanilla Javascript ES6.

It consists of a drawing grid that allows you to drag colour cubes of different sizes and create simple compositions. It's been really fun to take on this challenge and I've learned a lot.

The program starts by generating a grid across the full height and width of the screen, and then creates four new squares within each square. As each "outer" square is generated, it is assigned a unique id and a class called 'SquareStyle'. Each element is a flex container with the wrap property. Meanwhile, inside each one, four divs are generated with a unique id and assigned the class 'innerSquares', with the property width and height with relative values of 50% and a border of 0.1px.

This is a short piece of code that shows how the grid is generated

Once the grid has been created and styled, it is displayed like this.

The main function of the program is to draw on the grid by dragging the colour from the left side to the desired grid position. The main requirement of the project was to use the drag functions of the mouse.

The programme allows you to change the drawing area by clicking on the desired brush button. You can switch between sizes while drawing.

The way I have used to implement the functionality of drawing on the grid is as follows.

When calling the drop event, the following information is transferred to a function called paintSurroundings: class of the element, origin and x/y coordinates of the element on which the drop is made together with the global variable of sideSquare. Manually, I have created a nested array with the coordinates of the elements to which I need to transfer the class of the origin element. That class refers to the colour of each one. Using the .map() method I iterate over the elements in the array while: first removing the class referring to the colour it might already have and then adding the class of the source element to the element that matches those coordinates.

With the onclick event of the brush buttons, I modify the global variable square side. This way I can modify the size of the area to be painted without jeopardising the grid, since at the beginning of the code the variable sideSquare has been defined as undefined. A default const variable is generated and passed to the functions as an argument.

The program allows to switch between dark/ligth mode:

Here is a link to the project repository:

https://github.com/Iminguet/cuadriculaDibujo

This post was copied from an entry I added to my linkedin.
It's a rookie job but I'm proud of the perspective of what I've learned in the last few months and the vision of what I can learn next.

Thanks for reading.
Praise the sun [T]/ *