You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
70 lines
1.4 KiB
70 lines
1.4 KiB
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')
|
|
}
|