<!DOCTYPE html>

<html>

<head>

<title>Word Sentiment</title>

function setData() {

var canvas = document.getElementById("myCanvas");

canvas.width = 640;

canvas.height = 480;

var c = canvas.getContext("2d");

var data;

var x = document.getElementById("input").elements[0].value;

var inputArray = x.split(" ");

console.log(inputArray);

console.log(inputArray.join("+"));

var orgData = inputArray.join("+");

var rest = new XMLHttpRequest();

rest.addEventListener("load", whenLoaded);

rest.open("GET", "https://twinword-sentiment-analysis.p.mashape.com/analyze/?text="+orgData);

rest.setRequestHeader("X-Mashape-Key", "T2cmVJDuJPmshCHII7kAL3Rpxb8cp1XgEIljsnOEXnnnJS4DdY");

rest.setRequestHeader("Accept", "application/json");

rest.send();

console.log(rest);

function whenLoaded(e){

data = JSON.parse(rest.responseText);

console.log(data.score);

c.font = "30px Arial";

c.fillText(data.score,10,50);

var tone = data.score;

if(tone==0){

c.fillStyle = "grey";

c.fillText("Neutral Tone",10,100);

}

else if (tone>0){

c.fillStyle = "green";

c.fillText("Postive Tone",10,100);

}

else{

c.fillStyle = "red";

c.fillText("Negative Tone",10,100);

}

</script>

</head>

<body>

<textarea rows="4" cols="50" name="phrase" form="input">Enter text here...</textarea>

</form>

<button onclick="setData()">Find your sentiment</button>

</body>

</html>