Proof-of-concept: QWERTY Shift Cipher

index.mjs

var keyboard = "qwertyuiop|asdfghjkl|zxcvbnm".split("|") // The grand-old QWERTY keyboard we all love and h8...
var editor = document.querySelector("textarea") // Of couse you'll need some HTML skeleton with a textarea...
var preview = document.querySelector("pre") // ... a pre...
var key = document.querySelector("input") // and a numeric input (e.g. input:number or input:range)
var refreshPreview = function(){
    let out = ""
    for(let char of editor.value){
        if(!char.match(/[a-zA-Z]/)){
            out += char 
            continue
        }

        let uppercase = char.match(/[A-Z]/)
        
        if(uppercase)
            char = char.toLowerCase()
        
        let letterRow = ""
        for(let row of keyboard){
            if(row.includes(char)){
                letterRow = row
                break
            }
        }

        if(letterRow == ""){ 
            // Due to the previous code, I don't see any case where this could logically happen but... as a preventive measure...
            out += "?"
            continue
        }
        let idx = letterRow.indexOf(char)

        idx = (idx+key.valueAsNumber+letterRow.length) % (letterRow.length)
        char = letterRow[idx]
        if(uppercase) char = char.toUpperCase()
        out += char

    }
    preview.innerText = out
}
editor.addEventListener("change", refreshPreview)
editor.addEventListener("keyup", refreshPreview)
key.addEventListener("change", refreshPreview)