https://github.com/porobertdev/etch-a-sketch
React version of 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 porobertdev react sketch theodinproject typescript
Last synced: 2 months ago
JSON representation
React version of 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: canva
- Last Pushed: 2025-02-01T18:29:43.000Z (3 months ago)
- Last Synced: 2025-02-01T19:28:52.924Z (3 months ago)
- Topics: 100daysofcode, css, etch-a-sketch, html, javascript, js, porobertdev, react, sketch, theodinproject, typescript
- Language: TypeScript
- Homepage: https://draw.porobert.dev
- Size: 362 KB
- Stars: 0
- Watchers: 2
- Forks: 1
- 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 based on mouse up/down event
- 2 color modes: using Color Picker, and brush to wipe
- two or more users can draw in real-time
- reset
- share drawing by copying to clipboard
## Technologies used
- HTML5
- CSS3
- JavaScript
- React
- ExpressJS
- WebSockets
## 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