Scribd
Upload
3 views

js notes on Random selector

Js basic to advance

Uploaded by

Tahir Khan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
3 views

js notes on Random selector

Js basic to advance

Uploaded by

Tahir Khan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

document.getElementById → used to selecting elements from the DOM (HTML) by their IDs.

tagsEL → EL refers to list of things a particular heading

Focus() → This line sets the focus on the textarea element, meaning the user can immediately start

typing in the input box when the page loads.

textarea.addEventListener('keyup', (e) => { ... })

Adds an event listener to the textarea that listens for the keyup event (when a key is released
after being pressed)

createTags(e.target.value)

his function turns the comma-separated input into tags (like labels or pills shown on the
screen)

if(e.key === 'Enter') { ... }

after 10 milliseconds, the value inside the textarea is cleared. As given in block

randomSelect()

After pressing Enter, this function is called.

Something like does random select as functions says


const tags = input.split(',')

Splits the input string into an array of substrings, using the comma (,) as a delimiter.

For example, "apple, banana , orange" → ["apple", " banana ", " orange"]

filter(tag => tag.trim() !== '')

Removes any empty or whitespace-only entries.

tag.trim() removes spaces from both ends of each tag.

So "apple, , banana" → "apple", "banana" (empty entry removed)

map(tag => tag.trim())

Trims the whitespace from each tag.

So " banana " becomes "banana"

tagsEl.innerHTML = ' '

Clears any previously created tags from the container tagsEl

Ensures we’re not just stacking new tags on top of old ones.

tags.forEach(tag => { ... })

Creates a new <span> element for the tag.

Adds the class tag

Sets its inner text to the tag value.

Appends it to tagsEl the container for all tags.


pickRandomTag() →

returns a randomly chosen tag


element from the DOM.

highlightTag(tag) →

visually highlights a tag (adds a CSS


class)

unHighlightTag(tag) →

removes the highlight

const times = 30

Sets how many times the tags will be rapidly highlighted or unhighlighted.

the effect will last for 30 * 100ms = 3 seconds.

const interval = setInterval(() => { ... }, 100)

• This sets up a repeating action every 100 milliseconds.

setTimeout(() => { ... }, times * 100)

After 3 seconds this block

Stops the interval (clearInterval(interval)).

Waits 100ms, then:

Picks one final random tag.

Highlights it (without unhighlighting it), making it the


Picks a random tag selected result.
Highlights karta

Removes the highlight after 100ms


This uses document.querySelectorAll() to grab all elements in the DOM that have the class .tag

The result is a NodeList (like an array of elements)

Math.random() generates a random number between 0 (inclusive) and 1 (exclusive).

Multiply by tags.length to scale that number to the range of valid indexes in the tags list.

Math.floor() rounds it down to the nearest whole number (so you get a valid index).

The final result is one random tag element from the list.

You might also like