diff --git a/Source-Code/ChoicePicker/index.html b/Source-Code/ChoicePicker/index.html new file mode 100644 index 0000000..50c69db --- /dev/null +++ b/Source-Code/ChoicePicker/index.html @@ -0,0 +1,24 @@ + + + + + + + Document + + +
+

Enter all of the choices divided by a comma (','). +
Press enter when you're done

+ +
+ +
+ Choice 1 + Choice 2 + Choice 3 +
+ + + + \ No newline at end of file diff --git a/Source-Code/ChoicePicker/script.js b/Source-Code/ChoicePicker/script.js new file mode 100644 index 0000000..a5d62d9 --- /dev/null +++ b/Source-Code/ChoicePicker/script.js @@ -0,0 +1,60 @@ +const tagsEl = document.getElementById('tags'); +const textarea = document.getElementById('textarea'); + +textarea.focus(); + +const 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); + }); +}; + +const pickRandomTag = () => { + const tags = document.querySelectorAll('.tag'); + return tags[Math.floor(Math.random() * tags.length)]; +}; + +const highlightTag = (tag) => { + tag.classList.add('highlight'); +}; + +const unHighlightTag = (tag) => { + tag.classList.remove('highlight'); +}; + +const 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); +}; + +textarea.addEventListener('keyup', (e) => { + createTags(e.target.value); + if (e.key === 'Enter') { + setTimeout(() => { + e.target.value = ''; + }, 10); + randomSelect(); + } +}); \ No newline at end of file diff --git a/Source-Code/ChoicePicker/style.css b/Source-Code/ChoicePicker/style.css new file mode 100644 index 0000000..ad607c3 --- /dev/null +++ b/Source-Code/ChoicePicker/style.css @@ -0,0 +1,50 @@ +* { + box-sizing: border-box; +} + +body { + background-color: blueviolet; + font-family: 'Roboto', sans-serif; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + height: 100vh; + overflow: hidden; + margin: 0; +} + +h3 { + color: white; + margin: 10px 0 20px; + text-align: center; +} + +.container { + width: 500px; +} + +textarea { + border: none; + display: block; + width: 100%; + height: 100px; + font-family: inherit; + padding: 10px; + font-size: 16px; + margin: 0 0 20px; +} + +.tag { + background-color: #f0932b; + color: white; + border-radius: 50px; + padding: 10px 20px; + margin: 0 5px 10px 0; + font-size: 14px; + display: inline-block; +} + +.tag.highlight { + background-color: plum; +}