JSFiddle - React, Tailwind, and code Playground

by patkoala

JavaScript

id = document.getElementById('pixel');
 }
 window.onclick = function (e){
 id = e.target;
 }
 document.onkeydown = function (e){
 car = e.keyCode;
 pixel = id;
 if(car == 37){
 pixel.style.left = parseInt(pixel.style.left.split("px")[0]) - 10 + "px";
 }
 if(car == 39){
 pixel.style.left = parseInt(pixel.style.left.split("px")[0]) + 10 + "px";
 }
 if(car == 38){
 pixel.style.top = parseInt(pixel.style.top.split("px")[0]) - 10 + "px";
 }
 if(car == 40){
 pixel.style.top = parseInt(pixel.style.top.split("px")[0]) + 10 + "px";
 }
 if(car == 107 || car == 187){
 pixel.style.width = parseInt(pixel.style.width.split("px")[0]) + 10 + "px";
 pixel.style.height = parseInt(pixel.style.height.split("px")[0]) + 10 + "px";
 }
 if(car == 109 || car == 189){
 pixel.style.width = parseInt(pixel.style.width.split("px")[0]) - 10 + "px";
 pixel.style.height = parseInt(pixel.style.height.split("px")[0]) - 10 + "px";
 }
 if(car == 46){
 document.body.removeChild(pixel);
 }
 if(car == 78){
 nuevodiv();
 }
 }
 function nuevodiv(){
 elemento = document.createElement("div");
 elemento.style.width = "50px";
 elemento.style.height = "50px";
 elemento.style.position = "absolute";
 elemento.style.left = "0px";
 elemento.style.top = "0px";
 elemento.style.backgroundColor="rgb("+Math.round(Math.random()*255)+","+Math.round(Math.random()*255)+","+Math.round(Math.random()*255)+")";
 document.body.appendChild(elemento);
 id = elemento;