codeuino / codeuino/codebadge-backend
Add padding feature to pencil and shape tool to codebadge project
- 主要言語
- Vue
- スター
- 15
- フォーク
- 23
- PR マージ指標
- 30日以内にマージされた PR はありません
説明
### **What you will need to know?**
HTML, CSS and JavaScript
### **Add padding feature to pencil and shape tool to codebadge project**
You need to add a padding feature to pencil and shape tool to our codebadge illustrator. If the task of integration of shape and pencil tool task is completed, you can work on this task.
### **Step by step**
- Setup Codebadge project by following installation steps in the readme.
- Check if canvas task is completed or not. If not first proceed with canvas task.
- Once mentioned task is done you can proceed with this task.
- You need to draw shapes with padding on click. You can use vanilla javascript or [p5.js]() for doing this.
- You need to take input of padding from the user.
- padding shall work at onchange event rather than load.
### **Expected Outcome**
At the route /newbadge, the padding with shape and pencil tool must be added which can be available for various colour fills with user input padding.
### **Resources & References (Where to Start)**
You can go through [HTML Canvas tutorial](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial) and edit its code. You can refer this website for sample [The Marauders Canvas](http://the-marauders-canvas.herokuapp.com/). Commit your code on [Codebadge development branch](https://github.com/codeuino/Codebadge).You can go through [HTML Canvas tutorial](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial) and edit its code. Refer this for the [sample code](https://github.com/ayushnagar123/draw/tree/master).
### **Extras**
Just follow the readme whenever you are stuck. Visit [Codeuino's Website](https://discord.gg/CNStUqX) in case of any doubts.
コントリビューションガイド
このリポジトリのコントリビューションガイドは索引されていません
調査の方向性
Start by following the README setup and checking the /newbadge route and the status of the canvas, shape, and pencil tool work. Read the HTML Canvas tutorial and existing drawing implementation, then determine how padding input should update on change rather than load. Done means users can enter padding and draw padded shapes and pencil marks with different fills at /newbadge.
索引モデルが issue の本文から書いたものです。
評価
- 技術スタック
- css, html, javascript
- 領域
- design, frontend, web-dev
- issue の種類
- 機能追加
- 難易度
- 4/5
- 見積もり時間
- 3〜5日
- 活発さ
- 停滞
- 明瞭さ
- おおむね明確
- 初心者へのやさしさ
- 35/100