javascript-code

Letter Focus

Letter Focus Code

^{**create pop up with extra info on filter() and findIndex()} ^{**make a dropCode like dropTopic so each code example can collapse... great job keep going,
you're doing great with implementing the new letterFocus incrementation !!😎}

Chat Question: does filter() work the same as findIndex()?
ChatGPT said: Awesome question filter is similar to findIndex, but with one big difference in what it returns.
✅ Both:

* Take a callback function that checks a condition.
* Go through the array element by element.
* Use the callback to test each item.

🔍 Difference: Method Returns findIndex The index of the first matching item filter A new array of all matching items


    const as = document.querySelectorAll('a')
    let asTxtArr = [...as]
    let lastPressedLetter = "";
    let iLetter = 0;
    function updateAsTxtArr(){
        asTxtArr = Array.from(document.querySelectorAll('a'))
    }
    addEventListener('keydown', e => {
        let letter = e.key.toLowerCase()
        let letteredAs = asTxtArr.filter((el) => el.innerText.toLowerCase().startsWith(letter))
        let activeEl = document.activeElement // current focused element
        let activeIndex = [...asTxtArr].indexOf(activeEl)
        if(letter != lastPressedLetter){
            let closestIndex = letteredAs.findIndex((el) => asTxtArr.indexOf(el) > activeIndex)
            iLetter = closestIndex !== -1 ? closestIndex : 0
        } else {
            iLetter = (letteredAs.indexOf(activeEl) + 1) % letteredAs.length
        }
        if(e.shiftKey){
            iLetter = (letteredAs.indexOf(activeEl) - 1 + letteredAs.length)  % letteredAs.length
        }
        if(letteredAs[iLetter]){
            letteredAs[iLetter].focus()
        }
        lastPressedLetter = letter
    })

Incrementing / Decrements Letter Focus

    // This page has really good letter focus cycle
    if(letter == 'c' && !e.metaKey){
        if(!e.shiftKey){
        copyCodes[iCopyCodes].focus()
        iCopyCodes = (iCopyCodes + 1) % copyCodes.length
        } else{
            iCopyCodes = (iCopyCodes - 1 + copyCodes.length) % copyCodes.length
        }
        copyCodes[iCopyCodes].focus()
        console.log(iLetter)
    }

CamelCase

    function toCamelCase(str) {
        return str
        .toLowerCase()
        .replace(/[^a-zA-Z0-9]+(.)/g, (match, chr) => chr.toUpperCase());
    }

Drop

2

    // This page has really good letter focus cycle
    if(letter == 'c' && !e.metaKey){
        if(!e.shiftKey){
        copyCodes[iCopyCodes].focus()
        iCopyCodes = (iCopyCodes + 1) % copyCodes.length
        } else{
            iCopyCodes = (iCopyCodes - 1 + copyCodes.length) % copyCodes.length
        }
        copyCodes[iCopyCodes].focus()
        console.log(iLetter)
    }

CamelCase function

    function toCamelCase(str) {
        return str
        .toLowerCase()
        .replace(/[^a-zA-Z0-9]+(.)/g, (match, chr) => chr.toUpperCase());
    }

Drop downs