input        = document.getElementById("rot13-input")
output       = document.getElementById("rot13-output")
shift_range  = document.getElementById("rot13-shift")
shift_output = document.getElementById("rot13-shift-output")

const letters_low = [
    "a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m",
    "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z"
]

const letters_up = letters_low.map(c => c.toUpperCase())

function rotate(text, shift) {
    return text.split("").map(c => {
        if (/[a-zA-Z]/.test(c)) {
            letters = /[a-z]/.test(c) ? letters_low : letters_up
            return letters[(letters.indexOf(c) + shift) % 26]
        }
        return c
    }).join("")
}

function update() {
    output.value = rotate(input.value, Number(shift_range.value))
    shift_output.textContent = shift_range.value
}

input.addEventListener("keyup", update)
shift_range.addEventListener("input", update)

update()