A Etch-A-Sketch tool, part of the The Odin Project - Fullstack Development Course
View Demo
·
Report Bug
·
Request Feature
Table of Contents
This project consists of an assessment for the Odin Project, to improve Javascript DOM manipulation skills and master CSS styling.
In this project, Javascript was used to create the main function for the drawing with onmouseover and onmouse down event listener. Also, others event listeners such as onchange and onclick was used combined with CSS to delivery a better user experience.
To get a local copy up and running follow these simple example steps.
- Clone the repo
git clone https://github.com/Pedro-Ribas-Moreira/odin-etch-a-sketch
- Run in localhost with a live server
Go live
To start drawing you have to hover the mouse with the left button pressed in the canvas area.
- Colors selections: Tools to set the pen and background colors.
- Eraser: Tool that will paint back the section to the background color,
- Rainbow: Tool, that will draw using the colors of the rainbow.
- The Lighten and Shading: tools to manipulate the brightness of the colors in the canvas.
- Gride Size: Will change the number of rows and columns
- Toggle Grid Line: remove and add the grid borders
- Clear: reset the canvas for a fresh start.
Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.
If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature
) - Commit your Changes (
git commit -m 'Add some AmazingFeature'
) - Push to the Branch (
git push origin feature/AmazingFeature
) - Open a Pull Request
Pedro Moreira - [email protected]
Project Link: https://github.com/Pedro-Ribas-Moreira/odin-etch-a-sketch