Random choice picker

joemay96 · Oct 20, 2020 · 19e93d6 · 19e93d6
1 parent d82e901
commit 19e93d6
Show file tree

Hide file tree

Showing 3 changed files with 138 additions and 0 deletions.
diff --git a/random-choice-picker/index.html b/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/random-choice-picker/script.js b/random-choice-picker/script.js
@@ -0,0 +1,67 @@
+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()
+
+ 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/random-choice-picker/style.css b/random-choice-picker/style.css
@@ -0,0 +1,52 @@
+@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;
+}
+
+.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;
+}