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

About Assignment from The Odin Project: https://www.theodinproject.com/lessons/foundations-etch-a-sketch
https://github.com/porobertdev/etch-a-sketch

100daysofcode css etch-a-sketch html javascript js theodinproject

Last synced: about 2 months ago
JSON representation

About Assignment from The Odin Project: https://www.theodinproject.com/lessons/foundations-etch-a-sketch

• Host: GitHub
• URL: https://github.com/porobertdev/etch-a-sketch
• Owner: porobertdev
• Created: 2023-08-18T18:38:43.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2023-08-23T05:24:35.000Z (over 1 year ago)
• Last Synced: 2023-08-23T06:53:30.344Z (over 1 year ago)
• Topics: 100daysofcode, css, etch-a-sketch, html, javascript, js, theodinproject
• Language: JavaScript
• Homepage:
• Size: 187 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

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



## About

This project is part of [TheOdinProject](https://www.theodinproject.com/https://github.com/TheOdinProject) curriculum. The project's lesson can be found [here](https://www.theodinproject.com/lessons/foundations-etch-a-sketchhttps:/).

I've made a [Figma mockup](https://www.figma.com/file/PhgrsZfWZ0czfXj2xqhL0K/Etch-a-Sketch-%40TheOdinProject?type=design&node-id=0%3A1&mode=design&t=9mEftXM4Mq5QeMWr-1) that I used as a starting point. Apart from the title, the website is pretty much identic with the mockup.

## Features

* draw by hovering the mouse on the grid

* 3 color modes: using Color Picker, random RGB and brush to wipe

* resize the grid by scrolling up/down with the mouse

* reset

* share drawing by copying to clipboard

## Technologies used

* HTML5

* CSS3

* JavaScript

## Libraries used

* [**alwan**](https://github.com/SofianChouaib/alwan) for the Color Picker

* [**html2canvas**](https://github.com/niklasvh/html2canvas) to save the drawing as screenshot

## Tools used

* git

* Figma

## Credits

I changed the original color of some of the icons.

* **UI-Eric weibo** for the [reset](https://www.veryicon.com/icons/miscellaneous/jt2/reset-filter.html?p=2https:/) icon

* **siby-_- weibo** for the [brush](https://www.veryicon.com/icons/beauty-fashion/cosmetic-icon-4/brush-43.htmlhttps:/) icon

* **Saori1994** for the [favicon](https://www.veryicon.com/icons/education-technology/study-2/draw-13.htmlhttps:/)

* **zuozuo** for the [share](https://www.veryicon.com/icons/commerce-shopping/mobile-taobao-icon-library/share-134.htmlhttps:/) and [color/RGB](https://www.veryicon.com/icons/commerce-shopping/alibaba-international-station-icon-library/color-9.htmlhttps:/) icon

* [**SofianChouaib**](https://github.com/SofianChouaib) for the Color Picker

* [**niklasvh**](https://github.com/niklasvh) for the screenshot library