Motion In This Earth Using Javascript

lets add motion in this static pic of earth using the some code of javascript for that

first we make our html and css file in our code editor

now in our html file we write our boiler plate code after that inside the body tag make a div element and given a class of that div element and now also add our css file in our html file by using link tag

Now go to css file and select our div element given some height , width or background image of earth now if you open your browser then you see that that will be show a simple static image of earth and no motion happen in this image and for motion we are add javascript

so for javascript code we are used script tag in our html file and now selecting our div , for selecting div we are using a javascript property called querrayselector and also defing this querrayselector into a varible name like this

let anjali = document.querrayselector(".classname of div")

now we want if we click on earth then earth go upward for that we are using another property of javascript that is eventlistener so add "onclick"eventlistener

and we all know that onclick event also call a function so now we make a function and setInterval inside that function we define velocity, and define a veriable called pos and our logic for motion is that anjali.style.bottom = pos + "px" also increment the value of pos like pos++

but you whats new problem created this time your earth go upwar but only go upward don't come downward for that we used if syntax if(pos>400 ) then velocity = -velocity otherwise pos += velocity

for stopinng earth using method called clearInterval

and now your project will be ready i hope you enjoy reading my first newsletter

HAPPY CODING