Oppgave 5 C

Lag en webside der brukeren kan skrive inn en tekst, og så få ut en oversikt over hvor mange ganger de ulike ordene i teksten forekommer. (Tips: Dette vil kreve en assosiativ array, ettersom dere ikke på forhånd vet hvilket utvalg med elementer som finnes). Lag også en statistikk over f.eks de ti mest hyppige ordene, lengste og korteste ord osv. Bruk et liggende søylediagram for å presentere statistikken.

Resultat

Forekomster:

Lengste:

Koreste:

Koden

JavaScript

                
window.onload = ready;

function ready() {
    var input = document.getElementById("o5-input");
    var statsAmount = document.getElementById("o5-stats-amount");

    doIt(input, statsAmount.value);
    input.addEventListener("input", function() {doIt(input, statsAmount.value)});
    statsAmount.addEventListener("change", function() {doIt(input, statsAmount.value)});
}

function doIt(input, statsAmount) {
    var specialChars = /[,.:;/\\\[\]\(\)?!"'#¤%&=`^*~´|\-_]/g;
    var allWords = /[^\s]+/g;
    var stats = getStats(input.value.replace(specialChars, "").match(allWords));
    var words = stats.list;
    stats = stats.stats;

    displayStats(words, stats, statsAmount);
}

function getStats(wordsArray) {
    var wordsList = {};
    var wordsStats = {
        mostFreq: {word: "", count: 0, length: 0},
        longest:  {word: "", count: 0, length: 0},
        shortest: {word: "", count: 0, length: Infinity}
    };

    // Loop gjennom alle ordene og tell hvor mange forkomster det er av hvert ord
    wordsArray.forEach(function(value, index){
        var word = value.toLowerCase();

        // Legger til ordet i en liste
        if (wordsList[word]) {
            wordsList[word] += 1;
        } else {
            wordsList[word] = 1;
        }

        var wordCount = wordsList[word];

        // Finner ordet det er flest forekomster av
        if (wordCount > wordsStats.mostFreq.count) {
            wordsStats.mostFreq.count = wordCount;
            wordsStats.mostFreq.word = word;
            wordsStats.mostFreq.length = word.length;
        }

        // Finner det lengste ordet
        if (word.length > wordsStats.longest.length) {
            wordsStats.longest.count = wordCount;
            wordsStats.longest.word = word;
            wordsStats.longest.length = word.length;
        }

        // Finner det korteste ordet
        if (word.length < wordsStats.shortest.length) {
            wordsStats.shortest.count = wordCount;
            wordsStats.shortest.word = word;
            wordsStats.shortest.length = word.length;
        }
    });

    return {list: wordsList, stats: wordsStats};
}

function displayStats(wordsList, wordsStats, statsAmount) {
    var list = document.getElementById("o5-most-freq");
    list.innerHTML = ""; // Tøm listen først

    // Loop gjennom den nye listen. Legg til i egen liste
    Object.keys(wordsList).sort(function(a, b) {
        return (wordsList[b] - wordsList[a]); // Sorterer elementene i en synkende rekkefølge etter verdi
    }).forEach(function(word) {
        if (list.childNodes.length < statsAmount) {
            var tmpChild = document.createElement("li")
            tmpChild.appendChild(document.createTextNode(wordsList[word] + ": " + word));

            tmpChild.style.backgroundColor = "rgb(" + Math.floor(255/wordsStats.mostFreq.count*wordsList[word]) + ", 50, 50)";
            tmpChild.style.width = list.offsetWidth/wordsStats.mostFreq.count*wordsList[word] + "px";
            list.appendChild(tmpChild);
        }
    });

    list = document.getElementById("o5-longest");
    list.innerHTML = ""; // Tøm listen først

    // Loop gjennom den nye listen. Legg til de lengste i egen liste
    Object.keys(wordsList).sort(function(a, b) {
        return (b.length - a.length); // Sorterer elementene i en synkende rekkefølge etter lengde
    }).forEach(function(word) {
        if (list.childNodes.length < statsAmount) {
            var tmpChild = document.createElement("li")
            tmpChild.appendChild(document.createTextNode(word.length + ": " + word));

            tmpChild.style.backgroundColor = "rgb(" + Math.floor(255/wordsStats.longest.length*word.length) + ", 50, 50)";
            tmpChild.style.width = list.offsetWidth/wordsStats.longest.length*word.length + "px";
            list.appendChild(tmpChild);
        }
    });

    list = document.getElementById("o5-shortest");
    list.innerHTML = ""; // Tøm listen først

    // Loop gjennom den nye listen. Legg til de lengste i egen liste
    Object.keys(wordsList).sort(function(a, b) {
        return (a.length - b.length); // Sorterer elementene i en stigende rekkefølge etter lengde
    }).forEach(function(word) {
        if (list.childNodes.length < statsAmount) {
            var tmpChild = document.createElement("li")
            tmpChild.appendChild(document.createTextNode(word.length + ": " + word));

            tmpChild.style.backgroundColor = "rgb(" + Math.floor(255/wordsStats.longest.length*word.length) + ", 50, 50)";
            tmpChild.style.width = list.offsetWidth/wordsStats.longest.length*word.length + "px";
            list.appendChild(tmpChild);
        }
    });
}

HTML

                
<div class="row input-field">
    <textarea id="o5-input" rows="8" class="col s12" placeholder="Skriv litt tekst"></textarea>
</div>
<div class="row input-field">
    <label for="o5-stats-amount" class="col s2 m1"><i class="icon-business-chart-1"></i></label>
    <input id="o5-stats-amount" class="col s10 m11" type="number" value="10" placeholder="Antall ord i statistikk">
</div>
<div class="row">
    <h3>Forekomster:</h3>
    <ul id="o5-most-freq" class="o5-stats-list"></ul>
</div>
<div class="row">
    <h3>Lengste:</h3>
    <ul id="o5-longest" class="o5-stats-list"></ul>
</div>
<div class="row">
    <h3>Koreste:</h3>
    <ul id="o5-shortest" class="o5-stats-list"></ul>
</div>