robinverona

const azertyKeys = ['a', 'z', 'e', 'r', 't', 'y', 'u', 'i', 'o', 'p', 'q', 's', 'd', 'f', 'g', 'h', 'j', 'k', 'l', 'm', 'w', 'x', 'c', 'v', 'b', 'n']
const abcdKeys = ['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 textarea = document.getElementById('textarea') // just add example textarea in html file

azertyKeys.forEach((key, index) => {
    textarea.addEventListener('keydown', e => {
        if (e.key === key) {
            e.preventDefault();
            textarea.value += abcdKeys[index]
        }

robinverona

/* This snippet NEED HSL values to work correctly */
/* Sass variables with HSL values */
$orange: hsl(30, 91, 58, 1);
$blue: hsl(229, 100, 65, 1);
$purple: hsl(251, 54, 49, 1);
$black: hsl(0, 0, 0, 1);
$white: hsl(0, 0, 100, 1);

/* Utilities variables to pass to function */
$bg-color: $purple;