Added new project: Drawing App

pull/30/head
Florin Pop 7 years ago
parent 38d561a35b
commit 6438d0be2e

@ -0,0 +1,27 @@
# Drawing App
**Tier:** 2-Intermediate
Create digital artwork on a canvas on the web to share online and also export as images.
## User Stories
- [ ] User can draw in a `canvas` using the mouse
- [ ] User can change the color
- [ ] User can change the size of the tool
- [ ] User can press a button to clear the `canvas`
## Bonus features
- [ ] User can save the artwork as an image (`.png`, `.jpg`, etc format)
- [ ] User can draw different shapes (`rectangle`, `circle`, `star`, etc)
- [ ] User can share the artwork on social media
## Useful links and resources
- [Drawing Application using p5js](https://www.florin-pop.com/blog/2019/04/drawing-app-built-with-p5js/)
## Example projects
- [Drawing App by Florin Pop](https://codepen.io/FlorinPop17/full/VNYyZQ)
- [Drawing App by t0mm4rx](https://codepen.io/t0mm4rx/full/dLowvZ)

@ -42,9 +42,9 @@ required to complete them.
| [Christmas Lights](./Projects/Christmas-Lights-App.md) | Simulate a string of Christmas lights | 1-Beginner | | [Christmas Lights](./Projects/Christmas-Lights-App.md) | Simulate a string of Christmas lights | 1-Beginner |
| [Cause Effect App](./Projects/Cause-Effect-App.md) | Click list item to display item details | 1-Beginner | | [Cause Effect App](./Projects/Cause-Effect-App.md) | Click list item to display item details | 1-Beginner |
| [Color Cycle](./Projects/Color-Cycle-App.md) | Cycle a color value through incremental changes | 1-Beginner | | [Color Cycle](./Projects/Color-Cycle-App.md) | Cycle a color value through incremental changes | 1-Beginner |
| [CSV2JSON App](./Projects/CSV2JSON-App.md) | CSV to JSON converter | 1-Beginner | | [CSV2JSON App](./Projects/CSV2JSON-App.md) | CSV to JSON converter | 1-Beginner |
| [Flip Image](./Projects/Flip-Image-App.md) | Change the orientation of images across two axes | 1-Beginner | | [Flip Image](./Projects/Flip-Image-App.md) | Change the orientation of images across two axes | 1-Beginner |
| [JSON2CSV App](./Projects/JSON2CSV-App.md) | JSON to CSV converter | 1-Beginner | | [JSON2CSV App](./Projects/JSON2CSV-App.md) | JSON to CSV converter | 1-Beginner |
| [Lorem Ipsum Generator](./Projects/Lorem-Ipsum-Generator.md) | Generate lorem ipsum placeholder text | 1-Beginner | | [Lorem Ipsum Generator](./Projects/Lorem-Ipsum-Generator.md) | Generate lorem ipsum placeholder text | 1-Beginner |
| [Notes App](./Projects/Notes-App.md) | Create and online note pad | 1-Beginner | | [Notes App](./Projects/Notes-App.md) | Create and online note pad | 1-Beginner |
| [Pomodoro Clock](./Projects/Pomodoro-Clock.md) | Task timer to aid personal productivity | 1-Beginner | | [Pomodoro Clock](./Projects/Pomodoro-Clock.md) | Task timer to aid personal productivity | 1-Beginner |
@ -60,11 +60,12 @@ required to complete them.
| ------------------------------------------------------------------ | -------------------------------------------------- | -------------- | | ------------------------------------------------------------------ | -------------------------------------------------- | -------------- |
| [Book Finder App](./Projects/Book-Finder-App.md) | Search for books by multiple criteria | 2-Intermediate | | [Book Finder App](./Projects/Book-Finder-App.md) | Search for books by multiple criteria | 2-Intermediate |
| [Card Memory Game](./Projects/Card-Memory-Game.md) | Memorize and match hidden images | 2-Intermediate | | [Card Memory Game](./Projects/Card-Memory-Game.md) | Memorize and match hidden images | 2-Intermediate |
| [Drawing App](./Projects/Drawing-App.md) | Create digital artwork on the web | 2-Intermediate |
| [Flashcards App](./Projects/FlashCards-App.md) | Review and test your knowledge through Flash Cards | 2-Intermediate | | [Flashcards App](./Projects/FlashCards-App.md) | Review and test your knowledge through Flash Cards | 2-Intermediate |
| [HighStriker Game](./Projects/HighStriker-Game.md) | Highstriker strongman carnival game | 2-Intermediate | | [HighStriker Game](./Projects/HighStriker-Game.md) | Highstriker strongman carnival game | 2-Intermediate |
| [Markdown Previewer](./Projects/Markdown-Previewer.md) | Preview text formatted in GitHub flavored markdown | 2-Intermediate | | [Markdown Previewer](./Projects/Markdown-Previewer.md) | Preview text formatted in GitHub flavored markdown | 2-Intermediate |
| [Markdown Table Generator](./Projects/Markdown-Table-Generator.md) | Convert a table into Markdown-formatted text | 2-Intermediate | | [Markdown Table Generator](./Projects/Markdown-Table-Generator.md) | Convert a table into Markdown-formatted text | 2-Intermediate |
| [Regular Expression Helper](./Projects/RegExp-Helper-App.md) | Test Regular Expressions | 2-Intermediate | | [Regular Expression Helper](./Projects/RegExp-Helper-App.md) | Test Regular Expressions | 2-Intermediate |
| [Sports Bracket Generator](./Projects/Sports-Bracket-Generator.md) | Generate a sports bracket diagram | 2-Intermediate | | [Sports Bracket Generator](./Projects/Sports-Bracket-Generator.md) | Generate a sports bracket diagram | 2-Intermediate |
| [String Art](./Projects/String-Art.md) | An animation of moving, colored strings | 2-Intermediate | | [String Art](./Projects/String-Art.md) | An animation of moving, colored strings | 2-Intermediate |
| [Timezone Slackbot](./Projects/Timezone-Slackbot.md) | Display Team Timezones | 2-Intermediate | | [Timezone Slackbot](./Projects/Timezone-Slackbot.md) | Display Team Timezones | 2-Intermediate |

Loading…
Cancel
Save