JSFiddle - React, Tailwind, and code Playground

by charlescarver

HTML

<html>
<head>
<title>
    </title>

 
</head>
<body>

<input id="ori" type="text" />
<button onclick="translate()">Translate</button>
<div id="trans">j</div>

From: <select id="select1">
<option value="en">En</option>
<option value="fr">Fr</option>
</select>

To: <select id="select2">
<option value="en">En</option>
<option value="fr">Fr</option>
    <option value="it">it</option>
</select>

</body>
</html>

JavaScript

function translate() {
        document.getElementById('trans').innerHTML="&nbsp;";
        var text= document.getElementById('ori').value;
        window.mycallback = function(response) {
        document.getElementById('trans').innerHTML=response;
        }

        var languageFrom = document.getElementById("select1").value;
        var languageTo = document.getElementById("select2").value;  
        var s = document.createElement("script");
        s.src = "http://api.microsofttranslator.com/V2/Ajax.svc/Translate?oncomplete=mycallback&appId=8B841CA7C1A03443682C52AD07B7775A7BD5B3AA&from=" + languageFrom + "&to=" + languageTo + "&text=" + text;
        document.getElementsByTagName("head")[0].appendChild(s);
    }