<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Word Sentiment</title>
<link rel="stylesheet" href="main.css">
<style>#myCanvas { border:1px none #000;}</style>
<script>
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>
<form id="input" action="/action_page.php">
<textarea rows="4" cols="50" name="phrase" form="input">Enter text here...</textarea>
</form>
<button onclick="setData()">Find your sentiment</button>
<p id="data"></p>
<canvas id="myCanvas"></canvas>
</body>
</html>