JSFiddle - React, Tailwind, and code Playground

by ChaseWest

HTML

<div id="box"></div>

CSS

#box{
 position: absolute;
 bottom: 10px;
 left:10px; 
 background-color: red;
 width: 40px;
 height: 10px;   
}

JavaScript

var box = document.getElementById("box");
var step = 5;

document.onkeydown = function(e){
    e = e || window.event;
        
    switch(e.keyCode){
        case 37: left();
            break;
        case 38: up();
            break;
        case 39: right();
            break;
        case 40: down();
            break;
    }
};

function left(){
   box.style.left = box.offsetLeft - step + "px";
};


function up(){
   console.log(box.offsetTop);
   box.style.top = box.offsetTop + step + "px";
};


function right(){
    box.style.left = box.offsetLeft + step + "px";
};


function down(){
    box.style.top = box.offsetTop - step + "px";
};