window.addEventListener('load', function () {

    function moveLeft() {
        let element = document.getElementById("race-car");
        let currentValue = element.style.left;
        if(currentValue === ''){
            currentValue *1;
        }
        if (typeof currentValue != 'number'){
            currentValue = currentValue.slice(0,-2);
            currentValue *= 1;
        }
        console.log(currentValue);
        element.style.left = `${currentValue - 10}px`;
        }

        function moveRight() {
            let element = document.getElementById("race-car");
            let currentValue = element.style.left;
            if(currentValue === ''){
                currentValue *1;
            }
            if (typeof currentValue != 'number'){
                currentValue = currentValue.slice(0,-2);
                currentValue *= 1;
            }
            console.log(currentValue);
            element.style.left = `${currentValue + 10}px`;
        }

        function moveUp() {
            let element = document.getElementById("race-car");
            let currentValue = element.style.top;
            if(currentValue === ''){
                currentValue *1;
            }
            if (typeof currentValue != 'number'){
                currentValue = currentValue.slice(0,-2);
                currentValue *= 1;
            }
            console.log(currentValue);
            element.style.top = `${currentValue - 10}px`;
        }

        function moveDown() {
            let element = document.getElementById("race-car");
            let currentValue = element.style.top;
            if(currentValue === ''){
                currentValue *1;
            }
            if (typeof currentValue != 'number'){
                currentValue = currentValue.slice(0,-2);
                currentValue *= 1;
            }
            console.log(currentValue);
            element.style.top = `${currentValue + 10}px`;
        }


    window.addEventListener('keydown', function (e) {

        let keyPressed = e.key;
        console.log(keyPressed);

        switch(keyPressed) {
            case 'ArrowUp':
                if(top > 0) {
                moveUp();
                }
                break;
            case 'ArrowDown':
                moveDown();
                break;
            case 'ArrowLeft':
                moveLeft();
                break;
            case 'ArrowRight':
                moveRight();
                break;
            default:
                break;
        }
    });
});