Merge pull request #5147 from SanskarSinghiit/main

Adds Random Choice Picker game 🕹️
kunjgit · Aug 10, 2024 · 260979e · 260979e
2 parents 2b1d1e2 + cdd0d2d
commit 260979e
Show file tree

Hide file tree

Showing 9 changed files with 187 additions and 2 deletions.
diff --git a/Games/Random_Choice_Picker/README.md b/Games/Random_Choice_Picker/README.md
@@ -0,0 +1,30 @@
+# Random Choice Picker
+
+**Description 📃**  
+Random Choice Picker is a simple yet fun web-based game designed to help you make decisions. Enter your choices into a textarea, and with a click of a button, the game will randomly select one of them. Perfect for picking random items or making decisions in an engaging way!
+
+**Functionalities 🎮**  
+- **Input Choices:** Enter your options in a textarea, separated by commas.
+- **Shuffle Button:** Press the ENTER key to shuffle the choices and randomly select one.
+- **Result Display:** Shows the randomly selected choice.
+- **Reset Option:** Clear inputs and results to start fresh.
+- **Responsive Design:** Works well on various devices.
+- **Customizable Styles:** Personalize the game’s appearance.
+
+**How to Play? 🕹️**  
+- **Start:** Open the game in your browser.
+- **Input:** Enter your choices in the textarea, separated by commas.
+- **Pick:** Press ENTER key to get a random selection.
+
+**Screenshots 📸**  
+
+![Gameplay Screenshot](https://github.com/SanskarSinghiit/GameZone/blob/main/Games/Random_Choice_Picker/assets/preview.png)
+
+**Getting Started 🚀**  
+To get started with the Random Choice Picker, clone the repository and open the `index.html` file in your browser.
+
+**Installation 🛠️**  
+No installation required—just open the HTML file in your web browser.
+
+---
+
diff --git a/Games/Random_Choice_Picker/assets/preview.png b/Games/Random_Choice_Picker/assets/preview.png
diff --git a/Games/Random_Choice_Picker/assets/random__choice_picker.webm b/Games/Random_Choice_Picker/assets/random__choice_picker.webm
diff --git a/Games/Random_Choice_Picker/index.html b/Games/Random_Choice_Picker/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="style.css" />
+    <title>Random Choice Picker</title>
+  </head>
+  <body>
+    <div class="container">
+      <h3>Enter all of the choices divided by a comma (','). <br> Press enter when you're done</h3>
+      <textarea placeholder="Enter choices here..." id="textarea"></textarea>
+
+      <div id="tags"></div>
+    </div>
+
+    <script src="script.js"></script>
+  </body>
+</html>
diff --git a/Games/Random_Choice_Picker/script.js b/Games/Random_Choice_Picker/script.js
@@ -0,0 +1,69 @@
+const tagsEl = document.getElementById('tags')
+const textarea = document.getElementById('textarea')
+
+textarea.focus()
+
+textarea.addEventListener('keyup', (e) => {
+    createTags(e.target.value)
+
+    if(e.key === 'Enter') {
+        setTimeout(() => {
+            e.target.value = ''
+        }, 10)
+
+        randomSelect()
+    }
+})
+
+function createTags(input) {
+    const tags = input.split(',').filter(tag => tag.trim() !== '').map(tag => tag.trim())
+
+    tagsEl.innerHTML = ''
+
+    tags.forEach(tag => {
+        const tagEl = document.createElement('span')
+        tagEl.classList.add('tag')
+        tagEl.innerText = tag
+        tagsEl.appendChild(tagEl)
+    })
+}
+
+function randomSelect() {
+    const times = 30
+
+    const interval = setInterval(() => {
+        const randomTag = pickRandomTag()
+
+	if (randomTag !== undefined) {
+        highlightTag(randomTag)
+
+        setTimeout(() => {
+            unHighlightTag(randomTag)
+        }, 100)
+	}
+    }, 100);
+
+    setTimeout(() => {
+        clearInterval(interval)
+
+        setTimeout(() => {
+            const randomTag = pickRandomTag()
+
+            highlightTag(randomTag)
+        }, 100)
+
+    }, times * 100)
+}
+
+function pickRandomTag() {
+    const tags = document.querySelectorAll('.tag')
+    return tags[Math.floor(Math.random() * tags.length)]
+}
+
+function highlightTag(tag) {
+    tag.classList.add('highlight')
+}
+
+function unHighlightTag(tag) {
+    tag.classList.remove('highlight')
+}
diff --git a/Games/Random_Choice_Picker/style.css b/Games/Random_Choice_Picker/style.css
@@ -0,0 +1,56 @@
+@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  background-color: #2b88f0;
+  font-family: 'Muli', sans-serif;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+  overflow: hidden;
+  margin: 0;
+}
+
+h3 {
+  color: #fff;
+  margin: 10px 0 20px;
+  text-align: center;
+}
+
+.container {
+  width: 500px;
+}
+
+textarea {
+  border: none;
+  display: block;
+  width: 100%;
+  height: 100px;
+  font-family: inherit;
+  padding: 10px;
+  margin: 0 0 20px;
+  font-size: 16px;
+}
+
+textarea:focus {
+  outline: none;
+}
+
+.tag {
+  background-color: #f0932b;
+  color: #fff;
+  border-radius: 50px;
+  padding: 10px 20px;
+  margin: 0 5px 10px 0;
+  font-size: 14px;
+  display: inline-block;
+}
+
+.tag.highlight {
+  background-color: #273c75;
+}
diff --git a/README.md b/README.md
@@ -459,6 +459,7 @@ Terms and conditions for use, reproduction and distribution are under the [Apach
 | [Gravity_Drops](https://github.com/kunjgit/GameZone/tree/main/Games/Gravity_Drops) | 
 | [Sky_Lift_Dash](https://github.com/kunjgit/GameZone/tree/main/Games/Sky_Lift_Dash) |
 | [Block_Vault](https://github.com/kunjgit/GameZone/tree/main/Games/Block_Vault) |
+| [Random_Choice_Picker](https://github.com/kunjgit/GameZone/tree/main/Games/Random_Choice_Picker) |
 
 </center>
 <br>

diff --git a/assets/images/Random_Choice_Picker.png b/assets/images/Random_Choice_Picker.png
diff --git a/assets/js/gamesData.json b/assets/js/gamesData.json
@@ -3228,15 +3228,25 @@
     "gameUrl": "Block_Vault",
     "thumbnailUrl": "Block_Vault.png"
  },
-  "644":{
+
+
+  "645":{
     "gameTitle" : "Harry Potter Wizard Quiz",
     "gameUrl": "Harry_Potter_Wizard_Quiz/start.html",
     "thumbnailUrl": "Harry_Potter_Wizard_Quiz.png"
  }
-  "643":{
+
+  "646":{
     "gameTitle" : "Droop Dash Game",
     "gameUrl": "Drop_Dash_Game",
     "thumbnailUrl": "Drop_Dash_Game.png"
 
+ },
+  "647":{
+    "gameTitle" : "Random Choice Picker",
+    "gameUrl": "Random_Choice_Picker",
+    "thumbnailUrl": "Drop_Dash_Game.png"
+
+
  }
 }