controllable div should not cross a certain line from another div

I made a div, or better so say a circle who moves when I press the keybuttons. This "ball" has a parent div, called container. It shouldn't pass the borderline from the container!

<html>

<head>
<style>
    #container{
        border: 2px solid orange;
    }
    #ball{
        border-radius: 50%;
        width: 50px;
        height: 50px;
        background: green;
    }
</style>
</head>
<body>

    <div id="container">
        <div id="ball"></div>
    </div>
    <script type= "text/javascript" src="something.js"></script>
</body>
</html>

const container = document.querySelector('#container');
const ball = document.querySelector('#ball');
let mover = 5;

window.addEventListener('load', () => {
    ball.style.position = 'relative';
    ball.style.left = 0;
    ball.style.top = 0;

});

window.addEventListener('keydown', (e) => {

    switch(e.key) {
        case 'ArrowUp' :
            ball.style.top = parseInt(ball.style.top) - mover + '%';
            if(ball.style.left == '100%') {
                alert('dont move');
            }
            break;
        case 'ArrowDown' :
            ball.style.top = parseInt(ball.style.top) + mover + '%';
            break;
        case 'ArrowRight' :
            ball.style.left = parseInt(ball.style.left) + mover + '%';
            break;
        case 'ArrowLeft' :
            ball.style.left = parseInt(ball.style.left) - mover + '%';
            break;
    }
});

I tried to work with the if statement, so if the balls left attribute is bigger than 100% it should give a warning or better that its not possible to move further. But I dont know how I can solve this problem in Javascript (I try to do without using jQuery). Is there something I overlook?

Solution

If you just want the ball to not move across the div lines, just add an if-else statement to your cases once it reaches the threshold. The else portions, I just added alerts to show you can not move any further. Based off of the number you set your mover, anything over 95% will not move to the right and anything less than 0% will not move left. This is something I just threw together quickly but hopefully this can help get you on the right path.

<html>

<head>
<style>
    #container{
        border: 2px solid orange;
    }
    #ball{
        border-radius: 50%;
        width: 50px;
        height: 50px;
        background: green;
    }
</style>
</head>
<body>

    <div id="container">
        <div id="ball"></div>
    </div>
    <script type= "text/javascript" src="something.js"></script>
</body>
</html>
<script>
const container = document.querySelector('#container');
const ball = document.querySelector('#ball');
let mover = 5;

window.addEventListener('load', () => {
    ball.style.position = 'relative';
    ball.style.left = 0;
    ball.style.top = 0;

});

window.addEventListener('keydown', (e) => {

    switch(e.key) {
        case 'ArrowUp' :
            ball.style.top = parseInt(ball.style.top) - mover + '%';
            break;
        case 'ArrowDown' :
            ball.style.top = parseInt(ball.style.top) + mover + '%';
            break;
        case 'ArrowRight' :
         if((parseInt(ball.style.left) + mover) <= 90){
            ball.style.left = parseInt(ball.style.left) + mover + '%';
            }
            else{
            alert("Warning: Right Threshold Reached")
            }
            break;
        case 'ArrowLeft' :
            if((parseInt(ball.style.left) - mover) >= 0){
            ball.style.left = parseInt(ball.style.left) - mover + '%';
            }
             else{
            alert("Warning: Left Threshold Reached")
            }
            break;
    }
});
</script>