JSFiddle - React, Tailwind, and code Playground

by velthune

HTML

<p>
    <span>Move the mouse over the div.</span>
    <span>&nbsp;</span>
  </p>
<div id="dash"> <div/>
 <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>  
    <canvas  id="paint" style="border: 5px solid black;" width="350" height="350"></canvas>
    <div id="clickme">
  Click here
</div>
<img id="book" src="http://www.direttanews.it/wp-content/uploads/copertina-newsweek.jpg" alt="" width="100" height="123" />
    
    <div id="culo">ciao</div>

JavaScript

$('#book').ready(function() {
    console.log("ready");
 $('#book').hide();
});

      var c=document.getElementById("culo");
      var $c = $(c);
    $c.text('asd');
$c.css({position: 'absolute', top: 0});
      console.log(c.innerHTML, $c.text());    
$c.animate({top: 100, left:100}, 1000);        

var displayed = false;

$('#clickme').click(function() {
    console.log("copertina");
    if(!displayed) {
        $('#book').delay(1000);
        $('#book').slideDown('slow', function() {
        // Animation complete.
      });
    } else {
        $('#book').slideUp('slow', function() {
        // Animation complete.
      });
    }
    displayed = !displayed;
});

$("#paint").mousemove(function(e){
      var pageCoords = "( " + e.pageX + ", " + e.pageY + " )";
      var clientCoords = "( " + e.clientX + ", " + e.clientY + " )";
      $("span:first").text("( e.pageX, e.pageY ) : " + pageCoords);
      $("span:last").text("( e.clientX, e.clientY ) : " + clientCoords);
      var c=document.getElementById("paint");
      var ctx=c.getContext("2d");
      ctx.fillStyle="#000000";
      ctx.fillRect(0,0,350,350);           
      ctx.fillStyle="#FF0000";
      ctx.fillRect(e.pageX,e.pageY,20,20);
       
    });