https://github.com/haminimi/etch-a-sketch

Etch A Sketch is a mechanical drawing toy and here we are building a browser version of something between a sketchpad and an Etch-A-Sketch.
https://github.com/haminimi/etch-a-sketch

css drawing etch-a-sketch frontend javascript pixel-art theodinproject webdevelopment

Last synced: about 2 months ago
JSON representation

Etch A Sketch is a mechanical drawing toy and here we are building a browser version of something between a sketchpad and an Etch-A-Sketch.

• Host: GitHub
• URL: https://github.com/haminimi/etch-a-sketch
• Owner: Haminimi
• Created: 2023-08-03T20:00:47.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-05-28T10:36:34.000Z (7 months ago)
• Last Synced: 2024-05-29T02:16:19.255Z (7 months ago)
• Topics: css, drawing, etch-a-sketch, frontend, javascript, pixel-art, theodinproject, webdevelopment
• Language: CSS
• Homepage: https://haminimi.github.io/etch-a-sketch/
• Size: 43.9 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Etch a Sketch - drawing app

![Screenshot of the Etch a Sketch app.](/screenshot.png)

## Description

Etch A Sketch is a mechanical drawing toy and here we are building a browser version of something between a sketchpad and an Etch-A-Sketch. This project is a part of [The Odin Project](https://www.theodinproject.com/dashboard)'s [curriculum](https://www.theodinproject.com/lessons/foundations-etch-a-sketch). The Odin Project provides a high quality web development education maintained by an open source community.

## [Live Preview](https://haminimi.github.io/etch-a-sketch/)

## Features

- **Adjustable Grid Size**: Customize the grid using a slider, with sizes ranging from 1x1 to 99x99

- **Color and Rainbow Modes**: Choose any color using a color picker or enable the dynamic rainbow mode

- **Eraser Mode**: Easily correct or modify your drawings with the eraser

**To Do:**

- **Save and Download**: Save your artwork as an image file and download it

- **Responsive Design**: Upgrade the existing responsive design to enable the equal quality of a drawing experience both on desktop and mobile devices

## Tech

**The project is built with:**

- HTML

- Vanilla JavaScript

- Vanilla CSS

**Tools:**

- VS Code

- Git

## Covered Topics

**This section mentions the main topics covered during project work and prior lessons**

- DOM manipulation

## Credits

Code is partially influenced by [Michał Osman](https://github.com/michalosman)'s [implementation](https://github.com/michalosman/etch-a-sketch) of the project.

## Happy coding!