etch-a-sketch

Introduction

The main objective of this project is to create a sketch-pad and allow users to draw on it (mostly for pixel art) and provide various features that the user can use to sketch.

Implementations

• A simple Webpage.
• Grids are generated using Flexbox and DOM Manipulation Concepts.
• Ability to change the grid-size (16x16 upto 64x64) by the User.
• Ability to sketch/draw on the sketch pad using a default-color (black).
• Ability to sketch/draw on the sketch-pad using random-rgb-variations which uses Math.random() and Math.floor() to generate random rgb-numbers.
• Ability to clear the sketch pad whenever the User wants to.
• Misc : DOM Manipulation Concepts and Flexbox Concepts have been implemented highly in this project.

Concept Map

This is a concept-map for the logic behind generating grids based on User's input and by default as well.

Features To Implement In the Future

• Slider Control - to change grid-size based on the user's input on the slider.
• Eraser Tool - to clear specific parts/ parts of the sketch-pad
• Color Picker Tool - to allow user to select specific colors to sketch, based on his/her preference.

DOM Element Properties and Methods Used

• querySelector
• addEventListner
• elemet.innerHTML
• element.classList.add
• element.appendChild

Disclaimer

• This project is not supported on mobile, it wasn't meant to make it responsive across platforms. The main objective of this project was to implement DOM Manipulation Properties and Methods as well as Flexbox Concepts, and NOT to make it responsive!
• The fonts used in this project is Summer 22 Wide Pixel by Suolahti Type from https://www.fontspace.com/

Known Issues/Bugs

• Certain grid-sizes (mostly odd such as 37x37) may alter the grid for some reason, this could due to be the browser rendering values/web-page differently (just an assumption) This issue only arises in FireFox, it works perfectly fine in Chrome.