Skip to content

i4pg/etch-a-sketch

Repository files navigation

etch-a-sketch

Browser version of something between a sketchpad and an Etch-A-Sketch.

Demo

You can try it online here.

Features

  • Mobile-first Responsive Design
  • Using DRY principle
  • Eyes friendly colors
  • Modern fonts
  • Dropdown menu has different grid sizes

Showcase

Wireframe

NOTE: For now I decided to not go with dark/light mode feature

ScreenShots

Getting Started

Usage

You can try it online here.

Installation

To run this program locally, you can clone the repository to your local machine using the following command:

git clone https://github.com/i4pg/etch-a-sketch.git

Then open the index.html file in your web browser to start playing the game.

To-do

  • Support Canvas
  • Support download
  • Wireframe
  • UI
  • dropdown
  • grid options
  • sketch button
  • page title
  • Create 16x16 grid of square divs
    • Create it dynamically using JS
    • put it all in a .container
    • make it appear as grid vs. One on each line
    • No margin, padding
  • Setup :hover effect
    • CSS class or JS ?
  • Make button for choosing grid size
    • Replace the old grid
    • All in one container -fixed space-
    • Max = 100
    • JS fun when button clicked
    • prompt
  • debugging
    • 64x64 works?
  • Each pass through change it to a completely random RGB value. Then each pass just add another 10% of black to it so that only after 10 passes is the square completely black.

Contributing

Contributions to this project are welcome. To contribute, follow these steps:

  1. Fork this repository.

  2. Create a new branch with your changes:

    git checkout -b my-new-branch

  3. Make your changes and commit them:

    git commit -am 'Add some feature'

  4. Push your changes to your forked repository:

    git push origin my-new-branch

  5. Create a pull request on this repository.

License

This project is licensed under the MIT License. See the LICENSE file for details.