Help me to complete the Code.

Question

I want to make a code in which the text shadow is controlled by user . When user will click on button the shadow will move horizontally and vertically .
Also the range slider will control the blur level and the color input will control the color . Please check the code and complete it .Also do the necessary corrections.
https://code.sololearn.com/WEfrvxX6cZw2/?ref=app

Answer 1

No, I won't finish it for you, because it does not help you learn.

But I can see that you have a good start, and can guide you to get through where you are stuck at :

1. Solving the null error:

https://www.sololearn.com/post/90825/?ref=app

Full reference :

https://code.sololearn.com/WKKkpq0efxai/?ref=app

2. How to listen to events?

https://code.sololearn.com/W0ehmlP2Y3I3/?ref=app

Full reference :

https://code.sololearn.com/Wyr76080kKxS/?ref=ap

3. For getting the value of the range input.

3.1
After getting the input element in a variable for example namely elem, use

elem.value

to access the current slider value.

3.2
Listen to the onchange or oninput event.

Have fun in learning and building it yourself ;-)

Answer 2

You need to let the variables in higher scope.

and use button function to change these variables, and then redraw the shadow.

Here is a demo for restart feature, which is what you need to understand :

https://code.sololearn.com/WrZat1vLX669/?ref=app

in case you still cannot work it out, here is an edit on your code to on how to move the shadow to the right:

https://code.sololearn.com/Wu6Ten8vx9Sa/?ref=app

and don't forget to add unit px to the displacements for the shadow to effect.

Answer 3

I understand you but the main problem I face in moving the x and y axis please give me hint to do that