futhark2

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>ᚠᚢᚦᚨᚱᚲ</title>
        <style>
                #text {
                        display: block;
                        width: 100%;
                        height: 100%;
                        border: none;
                        font-size: 18pt;
                }

                #cheat {
                        border: 1px dashed darkred;
                        position: relative;
                        border-radius: 2em;
                        padding: 2em;
                        width:30em;
                        margin-top: -30em;
                        margin-left: auto;
                        margin-right: auto;
                        display: none;
                        background-color: white;
                }

                #show {
                        border: 1px solid darkblue;
                        background-color: lightgray;
                        border-radius: 5px;
                        text-align: center;
                        margin-left: auto;
                        margin-right: auto;
                        width: 5em;
                        cursor: default;
                }

                #show:active {
                        background-color: darkgray;
                }

                table {
                        margin-left:auto;
                        margin-right:auto;
                        border-spacing: 1em;
                }

                table em {
                        color: darkred;
                        font-weight: bold;
                        font-style: normal;
                }

                #x {
                        display: block;
                        float: right;
                        cursor: default;
                }

        </style>
</head>
<body>
        <textarea id="text" rows="20" placeholder="Type your ᚠᚢᚦᚨᚱᚲ here..."></textarea><br/>
        <div id='show' onclick="reveal()">show cheatsheet</div>
    <div id="cheat">
                <span id='x' onclick="document.getElementById('cheat').style.display = 'none'; document.getElementById('text').focus();">[&times;]</span>
                <table>
                        <thead>
                                <th>Keystroke</th>
                                <th>Rune</th>
                                <th>Pronunciation</th>
                        </thead>
                        <tr>
                                <td>a</td>
                                <td>ᚨ</td>
                                <td><em>aw</em>ning, c<em>a</em>ll, or l<em>aw</em></td>
                        </tr>

                        <tr>
                                <td>b</td>
                                <td>ᛒ</td>
                                <td><em>b</em>irch</td>
                        </tr>

                        <tr>
                                <td>c, k, q</td>
                                <td>ᚲ</td>
                                <td><em>k</em>i<em>ck</em> or <em>c</em>ane</td>
                        </tr>

                        <tr>
                                <td>d</td>
                                <td>ᛞ</td>
                                <td><em>d</em>og or voiced th as in <em>th</em>e</td>
                        </tr>

                        <tr>
                                <td>e</td>
                                <td>ᛖ</td>
                                <td>d<em>ay</em> or n<em>eigh</em>bor</td>
                        </tr>

                        <tr>
                                <td>f</td>
                                <td>ᚠ</td>
                                <td><em>f</em>ire</td>
                        </tr>

                        <tr>
                                <td>g</td>
                                <td>ᚷ</td>
                                <td><em>g</em>ift or <em>y</em>es</td>
                        </tr>

                        <tr>
                                <td>h</td>
                                <td>ᚺ</td>
                                <td><em>h</em>ail</td>
                        </tr>

                        <tr>
                                <td>H</td>
                                <td>ᚻ</td>
                                <td><em>h</em>ail</td>
                        </tr>

                        <tr>
                                <td>i</td>
                                <td>ᛁ</td>
                                <td>sl<em>ee</em>p</td>
                        </tr>

                        <tr>
                                <td>I</td>
                                <td>ᛇ</td>
                                <td>pr<em>i</em>de or p<em>i</em>ck</td>
                        </tr>

                        <tr>
                                <td>j</td>
                                <td>ᛃ</td>
                                <td><em>j</em>aw or <em>y</em>ear</td>
                        </tr>

                        <tr>
                                <td>l</td>
                                <td>ᛚ</td>
                                <td><em>l</em>ife</td>
                        </tr>

                        <tr>
                                <td>m</td>
                                <td>ᛗ</td>
                                <td><em>m</em>an</td>
                        </tr>

                        <tr>
                                <td>n</td>
                                <td>ᚾ</td>
                                <td><em>n</em>eed</td>
                        </tr>

                        <tr>
                                <td>N</td>
                                <td>ᛝ</td>
                                <td>si<em>ng</em></td>
                        </tr>

                        <tr>
                                <td>o</td>
                                <td>ᛟ</td>
                                <td><em>oa</em>th</td>
                        </tr>

                        <tr>
                                <td>p</td>
                                <td>ᛈ</td>
                                <td><em>p</em>oem</td>
                        </tr>

                        <tr>
                                <td>r</td>
                                <td>ᚱ</td>
                                <td><em>r</em>ide</td>
                        </tr>

                        <tr>
                                <td>s</td>
                                <td>ᛊ</td>
                                <td><em>s</em>un</td>
                        </tr>

                        <tr>
                                <td>S</td>
                                <td>ᛋ</td>
                                <td><em>s</em>un</td>
                        </tr>

                        <tr>
                                <td>t</td>
                                <td>ᚦ</td>
                                <td>unvoiced th as in <em>th</em>orn</td>
                        </tr>

                        <tr>
                                <td>T</td>
                                <td>ᛏ</td>
                                <td><em>t</em>ime</td>
                        </tr>

                        <tr>
                                <td>u</td>
                                <td>ᚢ</td>
                                <td>b<em>oo</em>ze or b<em>oo</em>k</td>
                        </tr>

                        <tr>
                                <td>w</td>
                                <td>ᚹ</td>
                                <td><em>w</em>arm</td>
                        </tr>

                        <tr>
                                <td>z</td>
                                <td>ᛉ</td>
                                <td>snee<em>z</em>e or snee<em>r</em></td>
                        </tr>
                </table>
        </div>
        <script>

                //set up cheatsheet show/hide behavior
                var reveal = function() {
                        document.getElementById('cheat').style.display = 'block';
                        document.getElementById('cheat').focus();
                }

                window.addEventListener("keydown",function(e) {
                        document.getElementById('cheat').style.display = 'none';
                        document.getElementById('text').focus()
                        });

                //create keymap
                var futhark = {
                    a: 'ᚨ',
                    b: 'ᛒ',
                    c: 'ᚲ',
                    d: 'ᛞ',
                    e: 'ᛖ',
                    f: 'ᚠ',
                    g: 'ᚷ',
                    h: 'ᚺ',
                    i: 'ᛁ',
                    j: 'ᛃ',
                    k: 'ᚲ',
                    l: 'ᛚ',
                    m: 'ᛗ',
                    n: 'ᚾ',
                    o: 'ᛟ',
                    p: 'ᛈ',
                    q: 'ᚲ',
                    r: 'ᚱ',
                    s: 'ᛊ',
                    t: 'ᚦ',
                    u: 'ᚢ',
                    v: 'v',
                    w: 'ᚹ',
                    x: 'x',
                    y: 'ᛇ',
                    z: 'ᛉ',
                    A: 'A',
                    B: 'B',
                    C: 'C',
                    D: 'D',
                    E: 'E',
                    F: 'F',
                    G: 'G',
                    H: 'ᚻ',
                    I: 'ᛇ',
                    J: 'J',
                    K: 'K',
                    L: 'L',
                    M: 'M',
                    N: 'ᛝ',
                    O: 'O',
                    P: 'P',
                    Q: 'Q',
                    R: 'R',
                    S: 'ᛋ',
                    T: 'ᛏ',
                    U: 'U',
                    V: 'V',
                    W: 'W',
                    X: 'X',
                    Y: 'Y',
                    Z: 'Z'
                }

                //futhark transliterator
                var transliterate = function() {
                        var str = document.getElementById('text').value.split('');
                        for(var i = 0; i<str.length; i++) {
                                str[i] = str[i].match(/^[a-zA-Z]+$/)? futhark[str[i]] : str[i];
                        }
                        document.getElementById('text').value = str.join('');
                }

                //add event listener to transliterate keystrokes from text area
                document.getElementById('text').addEventListener('input',function() {transliterate();});
        </script>
</body>
</html>