<!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>