https://github.com/aroan-v/etch-a-sketch

A simple sketch pad project
https://github.com/aroan-v/etch-a-sketch

Last synced: about 2 months ago
JSON representation

A simple sketch pad project

• Host: GitHub
• URL: https://github.com/aroan-v/etch-a-sketch
• Owner: aroan-v
• Created: 2023-08-26T06:32:26.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2023-11-16T13:26:26.000Z (about 1 year ago)
• Last Synced: 2024-03-29T15:30:11.647Z (10 months ago)
• Language: JavaScript
• Homepage: https://aroan-v.github.io/Etch-A-Sketch/
• Size: 208 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Etch-A-Sketch

Welcome to the Pixel Art Creator, a web-based tool that lets you unleash your creativity through pixel art! This project combines the power of HTML, CSS, and JavaScript to provide an interactive canvas where you can paint, shade, erase, and experiment with various colors and effects.

## Features

- Dynamic Grid: The canvas is dynamically generated based on the specified grid size.

- Color Palette: Choose your colors from a palette that includes hex codes and RGBA values, giving you precise control over the hues and opacities.

- Brush Modes: Select from different brush modes, including shading, erasing, rainbow mode, and more.

- Toggle Borders: Customize the appearance of your canvas by toggling grid borders on or off, providing a clean or structured look to your pixel art.

- Random Hex Code Generator: Experiment with the rainbow mode, which generates random hex codes for each tile.

- Default to Brush Mode: Enjoy a seamless user experience as the tool defaults to Brush mode, ensuring a smooth start to your creative journey.

- One-Button Active at a Time: Enhance your workflow with the ability to activate only one button at a time, streamlining your focus and interaction with the canvas.

- Smooth Interaction: The tool supports smooth interaction, allowing you to seamlessly paint and edit by clicking, dragging, and releasing the mouse.

## Limitations

- When using the shading mode, if the tile's color doesn't match the current color, the opacity will reset to zero and gradually build up from there.

- Shading mode will reset the opacity to zero for any tile previously colored by the Brush mode.

- Changing the grid size will result in the loss of all progress made on the canvas.

## Applications Used

- Visual Studio Code

- Figma

- Git and GitHub

- codepen.io

- Third party code

## Other explored concepts through research

- Generation of DIVs through CSS Grids

- Application of Data attributes

- CSS Designs, specifically the CSS grid and the toggling of classes

- Usage of rem versus px

- Usage of in-built javascript methods and functions like setTimeout()

## Author

aroan-v

## Credits

All credit goes to The Odin Project for assisting me on this journey.