JSFiddle - React, Tailwind, and code Playground

by johnkpaul

HTML

<a href="#" class="up">Thumbs Up</a>
<a href="#" class="down">Thumbs down</a>
<canvas width="400" height="200" id="myCanvas" style="border:1px solid black;">

JavaScript

var data = [
    {feeling:.5},
    {feeling:.5},
    {feeling:.5},
    {feeling:.5},
    {feeling:.5},
    {feeling:.5},
    {feeling:.5},
    {feeling:.5},
    {feeling:.5},
    {feeling:.5},
    {feeling:.5},
    {feeling:.5},
    {feeling:.5},
    {feeling:.5},
    {feeling:.5},
    {feeling:.5},
    {feeling:.5},
    {feeling:.5},
    {feeling:.5},
    {feeling:.5},
    {feeling:.5},
    {feeling:.5},
    {feeling:.5},
    {feeling:.5},
    {feeling:.5}
]

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

var height = canvas.height;
var width = canvas.width;


function redraw(){
    canvas.width = canvas.width;
    
    for(var i=0,len=data.length; i<len;i++){
    var datum = data[i];
        if(i == 0){
context.moveTo(0, height*(1-datum.feeling));            
        }else{
    context.lineTo(((width/len)*i), height*(1-datum.feeling));
        }
    context.lineWidth = 1;
    // line color
    context.strokeStyle = "green";
    context.stroke();
    }
}

setInterval(function(){
    var newFeeling = data[data.length-1].feeling;
    data.splice(0,1);
    data.push({feeling:newFeeling});
    redraw();
},500);

$("a").click(function(e){
    e.preventDefault();
    if($(event.target).hasClass("up")){
        var old = data.splice(0,1)[0];
        data.push({feeling: data[data.length-1].feeling + .1});
    }else{
        var old = data.splice(0,1)[0];
        data.push({feeling: data[data.length-1].feeling - .1});
    }
})