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] 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)