JSFiddle - React, Tailwind, and code Playground

by Brock Whittaker

HTML

<input type='text' id='answer'></input>
<br />
<span>The question: <span class='question'></span></span>
<br />
<span class='input'></span>

CSS

input {
    width: 500px;
    height: 40px;
    background-color: rgba(20, 20, 20, 0.4);
    border: none;
    outline: none;
    font-family: Helvetica Neue, sans-serif;
    font-weight: 100;
    color: white;
    transition: all 1s ease;
    text-align: center;
    font-size: 16pt;
}
input:hover {
    color: orange;
    background-color: rgba(20, 20, 20, 0.7);
}
body {
    font-family: Helvetica Neue, Sans-Serif;
    font-weight: 100;
    font-size: 12pt;
    text-align: left;
}

JavaScript

obj = {};

function lowerCaseString(string) {
    obj[string] = obj[string].replace(/\.|\?|"|'|,/g, "");
    obj[string + 'fixed'] = obj[string].toLowerCase();
}

function splitString(string) {
    obj[string] = obj[string].split(" ");
}

function removeArticles(string) {
    for (x = 0; x < obj[string].length; x++) {
        if (/^(the|and|or|by|with|a|over|for|was|went|did|i|a|is|to|for|this|too|way|its|of)$/g.test(obj[string][x])) {
            obj[string][x] = '';
        }
    }
}

function ridEmptyElements(string) {
    obj[string].sort();
    obj[string].reverse();
    counter = 0;
    for (x = 0; x < obj[string].length; x++) {
        if (obj[string][x].length === 0) {
            counter++;
        }
    }
    for (x = 0; x < counter; x++) {
        obj[string].pop();
    }
}

function numberImportantWords(string) {
    obj.details = {};
    obj.details[string] = {};
    obj.details[string].length = obj[string].length;
}

function checkMatchingWords(key, answer) {
    matches = 0;
    for (x = 0; x < obj[key].length; x++) {
        if (obj[key].indexOf(obj[answer][x]) > -1) {
            matches++;
        }
    }
}

function formatAnswer(key) {
    obj.phrase = key.toLowerCase();
    name = 'phrase';
    lowerCaseString(name);
    splitString(name + 'fixed');
    removeArticles(name + 'fixed');
    ridEmptyElements(name + 'fixed');
    numberImportantWords(name + 'fixed');
}

function addQuestion(question) {
    obj.question = question;
}

function liveAnswerCheck(target_div) {
    $(".question").html(obj.question);
    $(target_div).on("input", function () {
        obj.answer = $("#answer").val();
        lowerCaseString('answer');
        splitString('answerfixed');
        removeArticles('answerfixed');
        ridEmptyElements('answerfixed');
        checkMatchingWords('phrase', 'answerfixed');
        $(".input").html((matches / obj.details.phrasefixed.length * 100).toPrecision(4) + " Matched");
    });
}


theAnswer = "The mitochondria is the...