$\textcolor{red}{\textsf{Compact Caesar Cipher}}$

=======================================================================================

GUI Python3 (Jupyter Notebook)

import ipywidgets
def r_string(s,k): return(''.join([ chr(97+(ord(c)-97+k)%26) for c in s ]))
def F():
    import ipywidgets as widgets
    from ipywidgets import HBox, VBox
    import numpy as np
    import matplotlib.pyplot as plt
    from IPython.display import display
    %matplotlib inline
    @widgets.interact
    def f(BOX=widgets.Text(value='abcdefghijklmnopqrstuvwxyz', disabled=False),k=range(0,26)):
        plain_text = BOX
        print(r_string(BOX,k))
F()

• implementation

def r_string(s,k): return(''.join([ chr(97+(ord(c)-97+k)%26) for c in s ]))

#https://github.com/jupyter-widgets/ipywidgets/issues/1775
import ipywidgets as widgets

out = widgets.Output()
def on_value_change(change):
    with out:
        #print("here ",change['new'])
        k=change['new']
        print(r_string("abc",k))
slider = widgets.IntSlider(min=1, max=26, step=1, continuous_update=True)
play = widgets.Play(min=1, interval=50)

slider.observe(on_value_change, 'value')
widgets.jslink((play, 'value'), (slider, 'value'))
widgets.VBox([play, slider, out])

=======================================================================================

JavaScript (js)

• implementation

function rot(s,i) {return s.replace(/[a-zA-Z]/g, function (c) {  return String.fromCharCode((c <= 'Z' ? 90 : 122) >= (c = c.charCodeAt(0) + i) ? c : c - 26); });}

=======================================================================================