Oppgave 6A

Resultat

Dere skal lage en "kidnappingsbrevgenerator". Brukeren skal kunne skrive inn en tekst og generere et kidnappingsbrev av denne teksten. Det er da her tenkt att dere skal erstatte bokstaven i teksten med ett bilde av den samme bokstaven

Koden

JavaScript

                
window.onload = ready;

function ready() {
    var input = document.getElementById("o6-input");
    var output = document.getElementById("o6-output");
    var interval = null;
    input.addEventListener("input", function() {
        if (interval !== null) {
            clearTimeout(interval);
        }

        interval = setTimeout(function () {
            showText(input.value, output);
        }, 150); // En liten delay så vi ikke spammer fuksjonen
    });

    showText(input.value, output); // Kjør på oppstart
}

// Gjør om teksten til bilder, og legger de i output.
function showText(content, outputElement) {
    var tmpHTML = "";

    // Tar alle karakterer i teksten og putter de i array
    content.split("").forEach(function(char) {
        if (char.match(/[^\ws]/gi)) {
            switch(char) {
                case " ":
                    char = "space";
                    break;
                case "\n":
                    tmpHTML += "<br>";
                    return;
                case "æ":
                    char = "ae";
                    break;
                case "ø":
                    char = "oe";
                    break;
                case "å":
                    char = "aa";
                    break;
                case ".":
                    char = "dot";
                    break;
                case ",":
                    char = "comma";
                    break;
                case ":":
                    char = "colon";
                    break;
                case "#":
                    char = "hash";
                    break;
                case "!":
                    char = "exclamation";
                    break;
                case "?":
                    char = "question";
                    break;
                case "-":
                    char = "dash";
                    break;
                case "_":
                    char = "underscore";
                    break;
                case "*":
                    char = "star";
                    break;
                case "(":
                    char = "parentheses_open";
                    break;
                case ")":
                    char = "parentheses_close";
                    break;
                case "[":
                    char = "bracket_open";
                    break;
                case "]":
                    char = "bracket_close";
                    break;
                case "{":
                    char = "curly_bracket_open";
                    break;
                case "}":
                    char = "curly_bracket_close";
                    break;
                case "\"":
                    char = "quote_open";
                    break;
                case "\'":
                    char = "quote_open";
                    break;
                default:
                    char = "not-supported";
                    break;
            }
        }

        tmpHTML += "<img src=\"oppgave-6-materiale/" + char + ".jpg\">";
    });

    outputElement.innerHTML = tmpHTML;
}
                
            

HTML

                
<div class="bg-image" style="background-image: url(bg.jpg);">
    <div id="o6-output" class="space-v-large"></div>
</div>
<div class="row input-field">
    <textarea id="o6-input" rows="5" autofocus>Oppgave 6A</textarea>
</div>