JSFiddle - React, Tailwind, and code Playground

by Ulrich Bangert

HTML

<select id="translation"></select>
<div id="source" contentEditable="true">xxx</div>
<div id="output">

</div>

CSS

#output div {
  border: 1px solid black;
  display: inline-block;
  vertical-align: top;
  text-align: center;
}

JavaScript

function getTranslation(phr, callback) {
            var params = {
                from: "deu",
                dest: "eng",
                format: "json",
                phrase: phr,
                pretty: "true"
            };
            $.ajax({
                url: "https://glosbe.com/gapi/translate",
                method: "GET",
                dataType: "jsonp",
                data: params,
                success: function (output) {
                    callback(output);
                }
            });
         }
$("#translation").on("change", function() {
    var transl = $(this).data("transl");
    console.log(transl);
    transl.text($(this).val());
});

source.addEventListener("input", function() {
    var words = $(this).text().split(" ");
    output.innerHTML = "";
    words.forEach(function(word, idx) {
        cword = $("<div><span class='word'>" + word + "</span><br><span class='transl' contentEditable></span></div>");
        $("#output").append(cword);
        var transl = cword.find("span").eq(1);
        getTranslation(word, function(output) {
            transl.text(output.tuc[0].phrase.text);
        });
    });
    $(".word").on("click", function() {
                 var word = $(this);
                 getTranslation($(this).text(), function(output) {
                    console.log(output);
                    output.tuc.forEach(function (item, idx) {
                        if (item.phrase) {
                            console.log(item.phrase.text);
                            $("#translation").append("<option>" + item.phrase.text + "</option>");
                        }
                    });
                    $("#translation").data("transl", word.nextAll(".transl"))
                    .trigger("change");
                });
    });
});