From 19e93d6840c12447d791d8c2d4e1155b82bdd9bc Mon Sep 17 00:00:00 2001 From: Brad Traversy Date: Tue, 20 Oct 2020 14:56:22 -0400 Subject: [PATCH] Random choice picker --- random-choice-picker/index.html | 19 ++++++++++ random-choice-picker/script.js | 67 +++++++++++++++++++++++++++++++++ random-choice-picker/style.css | 52 +++++++++++++++++++++++++ 3 files changed, 138 insertions(+) create mode 100644 random-choice-picker/index.html create mode 100644 random-choice-picker/script.js create mode 100644 random-choice-picker/style.css 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; +}