diff --git a/random-choice-picker/index.html b/random-choice-picker/index.html
new file mode 100644
index 0000000..830f22a
--- /dev/null
+++ b/random-choice-picker/index.html
@@ -0,0 +1,19 @@
+
+
+
+
+
+
+ Random Choice Picker
+
+
+
+
Enter all of the choices divided by a comma (',').
Press enter when you're done
+
+
+
+
+
+
+
+
diff --git a/random-choice-picker/script.js b/random-choice-picker/script.js
new file mode 100644
index 0000000..443f3ed
--- /dev/null
+++ 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')
+}
\ No newline at end of file
diff --git a/random-choice-picker/style.css b/random-choice-picker/style.css
new file mode 100644
index 0000000..bf8e63b
--- /dev/null
+++ 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;
+}