https://github.com/nguyenm-giau/etch-a-sketch

An interactive Etch-a-Sketch web app built with HTML, CSS, and JavaScript.
https://github.com/nguyenm-giau/etch-a-sketch

css etch-a-sketch html javascript

Last synced: about 1 month ago
JSON representation

An interactive Etch-a-Sketch web app built with HTML, CSS, and JavaScript.

• Host: GitHub
• URL: https://github.com/nguyenm-giau/etch-a-sketch
• Owner: nguyenm-giau
• Created: 2024-09-04T13:44:36.000Z (4 months ago)
• Default Branch: main
• Last Pushed: 2024-09-19T13:35:37.000Z (4 months ago)
• Last Synced: 2024-11-15T13:28:24.336Z (about 2 months ago)
• Topics: css, etch-a-sketch, html, javascript
• Language: JavaScript
• Homepage: https://nguyenm-giau.github.io/Etch-a-Sketch/
• Size: 37.1 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Etch-a-Sketch Project

[English](./README.md) | [Tiếng Việt](./README_vi.md)

---

## English

## Screenshots

![Project Screenshot](https://imgur.com/dib4cUy.png)

## Table of Contents

- [About the Project](#about-the-project)

- [Features](#features)

- [Built With](#built-with)

- [Getting Started](#Getting-Started)

- [Icons](#icons)

## About the Project

This Etch-a-Sketch web app is built using HTML, CSS, and JavaScript. It allows users to draw on a customizable grid using various modes, such as color picker, random color, and eraser.

## Features

- **Interactive Drawing:** Draw by clicking and holding the mouse over the grid.

- **Adjustable Grid Size:** Customize your grid, with a minimum size of 2x2.

- **Color Picker:** Select custom colors for drawing.

- **Random Color Mode:** Automatically choose random colors for each cell.

- **Darken Mode:** Gradually darken cell colors with each stroke.

- **Eraser Tool:** Remove colors from cells.

- **Clear Grid:** Remove all colors while keeping the grid size intact.

- **Toggle Grid Lines:** Show or hide grid lines.

- **Reset Functionality:** Reset the grid and all settings to their defaults.

## Built With

- **HTML**

- **CSS**

- **JavaScript**

## Getting Started

You can view the live demo [here](https://nguyenm-giau.github.io/Etch-a-Sketch/).

To run the project locally, follow these steps:

1. Clone the repository:

   ```bash

   git clone https://github.com/Gbalas855/Etch-a-Sketch

   ```

2. Open the `index.html` file in your preferred web browser.

## Icons

Icons used in this project are from [Icons8](https://icons8.com).