JSFiddle - React, Tailwind, and code Playground

by blineberry

HTML

<h1>Sesquipedalizr</h1>

<textarea id="source">Your text goes here.</textarea>
<button id="button">Sesquipedalize me!</button>
<textarea id="target"></textarea>

CSS

textarea {
    display: block;
    width: 99%;
    height: 300px;
}
button {
    margin-bottom: 2em;
}

JavaScript

function getWords(text) {
    return text.split(' ');
}

$('#button').click(function () {
    $('#target').empty().append('Sesquipedalized text will update here! If it never updates, then either none of your words are recognized as having synonyms or my daily API limit has been reached.');
    
    var words = getWords($('#source').val());
    var word;

    for (var i = 0; i < words.length; i++) {
        word = words[i].match(/^[A-Za-z]+/);
        if (word) {
            console.log(word[0]);

            $.ajax({
                'url': 'http://words.bighugelabs.com/api/2/3f6d5e4a6e8a981e1606c4ec2cd69826/' + word + '/json',
                    'dataType': 'jsonp',
                    'success': createCallback(i, words, word)
            });
        }
    }
});

function createCallback(i, words, word) {
    return function (json) {

        var synonyms = [];
        var synonym = '';

        for (var languageType in json) {
            console.log(languageType);
            if (json.hasOwnProperty(languageType) && json[languageType].hasOwnProperty('syn')) {
                synonyms = synonyms.concat(json[languageType].syn);
            }
        }
        for (var j = 0; j < synonyms.length; j++) {
            if (synonyms[j].length > synonym.length) {
                synonym = synonyms[j];
            }
        }

        words[i] = words[i].replace(word[0], synonym);

        $('#target').val(words.join(' '));
    }
}