JSFiddle - React, Tailwind, and code Playground

by globefire

HTML

<!DOCTYPE html>
<html>
<body id="body" onmousedown="save(event);" onmouseup="sav(event)">


<p><strong>Click anywhere and drag pointer towards right</strong></p>

<p id="demo"></p>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<script>
var x,y;

function save(event) {
	x = event.pageX;
    /* document.getElementById("demo").innerHTML = x; */
    /* console.log(x) */;
}
function sav(event) {
	var y = event.pageX;
    document.getElementById("demo").innerHTML = "left point = " + x + " " + "/right point = " + y + "<br>" + "Difference b/w them = " + (y-x);
    if(y-x >= 3){
    	document.getElementById("body").style.backgroundColor = "red";
    }
    else{
    	document.getElementById("body").style.backgroundColor = "white";
    }
}
</script>

</body>
</html>