From d6f58d759e660f92933fe579305dca1c878dc2ca Mon Sep 17 00:00:00 2001 From: Khairunnisa <53510222+khairnsaa@users.noreply.github.com> Date: Tue, 10 Oct 2023 09:38:49 +0700 Subject: [PATCH 1/2] feat: create wheel spinner project guide --- Projects/1-Beginner/Wheel-Spinner.md | 32 ++++++++++++++++++++++++++++ 1 file changed, 32 insertions(+) create mode 100644 Projects/1-Beginner/Wheel-Spinner.md diff --git a/Projects/1-Beginner/Wheel-Spinner.md b/Projects/1-Beginner/Wheel-Spinner.md new file mode 100644 index 00000000..079e9eaa --- /dev/null +++ b/Projects/1-Beginner/Wheel-Spinner.md @@ -0,0 +1,32 @@ +# Wheel Spinner + +**Tier:** 1-Beginner + + Wheel spinners will help you to make random decisions, such as choosing a restaurant to eat at, deciding who goes first in a game, or picking a random item from a list + + +## User Stories + +- [ ] User can add multiple value to the wheel +- [ ] User can click the wheel to spin it +- [ ] User can display the pop up to show the selected value of the wheel + +## Bonus features + +- [ ] User can add sound when the wheel is spinning +- [ ] User can remove the value after being selected + +## Useful links and resources + +To create wheel spinner ofcourse you need 2 main thing. animation, and rotate transformation. so maybe you could deep dive into this resource to help you build this project + +- [MDN Transform Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotate) +- [CSS Rotate Property by W3Schools](https://www.w3schools.com/cssref/css_pr_rotate.php) +- [CSS Animation W3Schools](https://www.w3schools.com/css/css3_animations.asp) +- [CSS Tricks Animation](https://css-tricks.com/almanac/properties/a/animation/) + + +## Example projects + +[wheel of names](https://wheelofnames.com/) +[The Wheel of Lunch by Pat McKenna](https://codepen.io/blimpage/pen/jEWPeV) From e4bc84f6ada24cafde0a43a6d28aafda2492237b Mon Sep 17 00:00:00 2001 From: Khairunnisa <53510222+khairnsaa@users.noreply.github.com> Date: Tue, 10 Oct 2023 09:41:02 +0700 Subject: [PATCH 2/2] add wheel spinner project to readme --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 2d209743..7cbac253 100644 --- a/README.md +++ b/README.md @@ -75,6 +75,7 @@ required to complete them. | [Stopwatch App](./Projects/1-Beginner/Stopwatch-App.md) | Count time spent on activities | 1-Beginner | | [TrueOrFalse](./Projects/1-Beginner/True-or-False-App.md) | Identify the result of a conditional comparison | 1-Beginner | | [Vigenere Cipher](./Projects/1-Beginner/Vigenere-Cipher.md) | Encrypt text using the Vigenere Cypher | 1-Beginner | +| [Wheel Spinner](./Projects/1-Beginner/Wheel-Spinner.md) | Determine Random Decision | 1-Beginner | | [Wind Chill](./Projects/1-Beginner/Windchill-App.md) | Calculate the windchill factor from an actual temperature | 1-Beginner | | [Word Frequency](./Projects/1-Beginner/Word-Frequency-App.md) | Calculate word frequency in a block of text | 1-Beginner | | [Weather App](./Projects/1-Beginner/Weather-App.md) | Get the temperature, weather condition of a city. | 1-Beginner |