jvsoarez/project-pixels-art

Project made in the Trybe course. Module 1 (web development fundamentals) - block 5: JS - DOM, events and web storage

Project Pixels Art

Block 05 Project: JavaScript - DOM, Events and Web Storage

👋 Hello, guys! This is a pixel art project, where we can paint pixels with the selected color, expand the frame size, clear a pixel or the entire frame, among other functions. In this project i practice the use of the conventional commits to version control.

📍 Here I use HTML, pure CSS and JavaScript for pratice the skills:

• DOM manipulation.
• JavaScript manipulation
• Use CSS properties
• Write HTML tags

📖 The project requirements were:

1. Add to page the title "Paleta de Cores" ✔️
2. Add to page a palette that contains four different colors ✔️
3. Add black color as the first color in the palette ✔️
4. Add a pixel board to the page, with 25 pixels ✔️
5. Make each pixel board element have 40 pixels wide, 40 pixels high, and enclosed by a 1-pixel black border ✔️
6. Set black color as initial color. When loading the page, the black color must already be selected to paint the pixels ✔️
7. Clicking on one of the colors in the palette selects it and uses it to fill the pixels in the board ✔️
8. Clicking on a pixel within the frame after selecting a color from the palette causes the pixel to be filled with the selected color ✔️
9. Create a button that, when clicked, clears the board by filling the color of all its pixels with white ✔️
10. Make the pixel board have its user defined size ✔️
11. Limit the minimum and maximum board size ✔️
12. Make the palette colors randomly generated when the page loads ✔️

🔗 Deploy here

🙏🏽 Thanks for viewing this repository!