added project Border-radius-previewer

pull/24/head
Florin Pop 6 years ago
parent 23133abd9d
commit 7632964de8

@ -0,0 +1,26 @@
# Border-radius Previewer
**Tier:** 1-Beginner
The border-radius property can have multiple values changed. Preview how the shape looks while changing these values.
## User Stories
- [ ] User can see a box which has a `border-radius` property applied to it
- [ ] User can change the 4 `border-radius` values that are applied to the box (top-left, top-right, bottom-left, bottom-right)
- [ ] User can copy the resulting CSS to the clipboard
## Bonus features
- [ ] User can change all 8 possible values of the border-radius in order to create a complex shape
## Useful links and resources
- [CSS3 Borders](https://www.w3schools.com/css/css3_borders.asp)
- [Copy to Clipboard](https://www.w3schools.com/howto/howto_js_copy_clipboard.asp)
## Example projects
- [9elements Fancy Border Radius](https://9elements.github.io/fancy-border-radius/)
- [Border Radius](https://border-radius.com/)
- [CSS Gradient Border](https://codepen.io/thebabydino/pen/zbqPVd)

@ -39,6 +39,7 @@ required to complete them.
| Name | Description | Tier |
| ---------------------------------------------------------------------- | --------------------------------------------------------- | ---------- |
| [Bin2Dec](./Projects/Bin2Dec-App.md) | Binary-to-Decimal number converter | 1-Beginner |
| [Border Radius Previewer](./Projects/Border-Radius-Previewer.md) | Preview how CSS3 border-radius values affect an element | 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 |
| [Color Cycle](./Projects/Color-Cycle-App.md) | Cycle a color value through incremental changes | 1-Beginner |

Loading…
Cancel
Save