Neet Help in This Task With JavaScript

JavaScript
#1

I want the box to move in these directions as shown in the picture

SharedScreenshot
SharedScreenshot562×592 14.4 KB

…
HTML

<button onclick="myMove1()">MoveLeft</button>
        <div id="Container1">
<div id="box1"></div>
        </div>

JavaScript

    var elem = document.getElementById("box1");
    var pos = 0;
    var id = setInterval(frame, 5);

    function frame() {
        if (pos == 350) {
            clearInterval(id);
        } else {
            pos++;
            elem.style.left = pos + "px";
        }
    }

CSS

#Container1{
width: 400px;
height: 400px;
position: relative;
background-color:thistle
}
#box1{
width:50px;
height: 50px;
position: absolute;
background-color:teal;
}
#2

Hi @ahmedibrahim1, rather than setInterval(), I think this is a good place to apply CSS @keyframes. Here is my CodePen of an animation that does what you’re looking for.

Basically what I did was I created a class with the animations you described called “move” (it’s in the CSS), and then when the button is clicked, the class is attached to the box so it starts moving.

I would recommend reading this resource from W3Schools to understand @keyframes better and how to use it for animations.

Hope this helps :slight_smile:

Also, welcome to the FCC community!

#3