Skip to content

JadBizri/etch-a-sketch

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

18 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Etch-A-Sketch

Introduction

The Etch-a-Sketch Webpage is a simple drawing application built using HTML, CSS, and JavaScript. It emulates the classic Etch-a-Sketch toy, allowing users to draw on a grid by moving their cursor. It's a fun and interactive way to create doodles, patterns, and drawings right in your web browser!

Features

  • Dynamic Grid: Users can set the size of the drawing grid to create detailed or larger artworks.
  • Drawing: Simply hover the mouse over the grid to draw lines and shapes.
  • Clear Canvas: Easily clear the entire grid to start a new drawing.
  • Random Color Generator: Draw with randomly generated colors.
  • Rainbow Color Generator: Draw with the 7 unique colors of the rainbow, all showing up in the same order everytime!

Demo

A live demo of the Etch-a-Sketch Webpage is available at https://jadbizri.github.io/etch-a-sketch/.

Usage

To use the Etch-a-Sketch Webpage locally, follow these steps:

  • Clone this repository to your local machine.
  • Open the index.html file in your web browser.
  • Adjust the grid size using the provided input (e.g., slider) to set the desired resolution.
  • Move your mouse cursor over the grid area to draw.
  • To start a new drawing, click the "Clear" button to reset the canvas.

! May not work without a live server !

Technologies

The Etch-a-Sketch Webpage is built using the following technologies:

  • HTML: Markup structure for the webpage.
  • CSS: Styles and layout for the grid and buttons.
  • JavaScript: Interactivity and drawing logic.

Releases

No releases published

Packages

No packages published