Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Cub Miscator</title>
    <style>
        div#cube {
            width: 300px;
            height: 300px;
            background-color: red;
            border: solid 1px blue;
            position: relative;
            left: 0px;
        }
    </style>
</head>
<body>

    <div id="cube"></div>

    <script>


        document.addEventListener('keydown', function(event) {
        var cube = document.getElementById('cube');
            if (event.keyCode == '68') {
                if (cube.style.left == '') {
                    cube.style.left = '0px';
                }

                cube.style.left = parseInt(cube.style.left) + 50 + 'px';
            }

        if(cube.style.left == '' && cube.style.left = '700px'){
              cube.style.left -= parseInt(cube.style.left) + 50 + 'px';
                  }

        });


    </script>

</body>
</html>