diff --git a/Projects/Border-Radius-Previewer.md b/Projects/Border-Radius-Previewer.md new file mode 100644 index 00000000..2e925045 --- /dev/null +++ b/Projects/Border-Radius-Previewer.md @@ -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) diff --git a/README.md b/README.md index 725f60d9..bca41fd8 100644 --- a/README.md +++ b/README.md @@ -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 |