flashlight | OI Flashlight is a simple and effective application

I am making my portfolio website currently. I have added a flashlight cursor effect from (https://codemyui.com/flashlight-mouse-pointer/). I have also added a toggle switch from codemyui also. I am wondering if anyone knows how to link the effect & toggle together so that when I press the switch - the cursor effect turns off?

THANKS !!

Homepage with cursor effect & toggle switch

Here is my code for the question.

I have an issue that my receiver doesnt receive... How strange...

I feel like I read every other post on stackoverflow, but nothing works.

Target is Android 10, device is also running android 10 and this is my receiver.

I've made two separate sections, one for an image slider and one for the "About Us" section which is more of a pre-footer, I wanted to push the text down a bit, however, whenever I give the text in the "About us" section a margin-top, it pushes down the entire "About us" section instead of the text only, any ideas on how to fix this?

Currently making a game for a project and added a "flashlight" effect over the top of the game.
See: https://codemyui.com/wp-content/uploads/2019/10/Flashlight-Mouse-Pointer.gif

The problem is that the torchlight does not align with the cursor, which is way over to the left of the screen. Blue circle is the cursor's rough position to highlight the issue.Here is what it looks like

I couldn't find much in the way of re-aligning the cursor on a container. I have a suspicion that it is the JS that is causing the issue but I don't know for certain. Any ideas?

Here is the relevant code:

I am creating a game for a project and wanted to add a flashlight effect on top of the game.

Looking for something similar to this, just to a specific container on my webpage: https://codemyui.com/wp-content/uploads/2019/10/Flashlight-Mouse-Pointer.gif

I've tried to do it their way, but I cannot get it to work. It doesn't apply correctly to the container I want it to and the flashlight does not work. I'm not allowed to use JQuery or any imports for this projecet, just HTML, CSS and JS. Any help would be appreciated.

Here is the code that applies:

Can I put more than one file/directory down with __dirname ?
example:
const dirPath = path.join(__dirname, ‘/candles’);
const dirPath = path.join(__dirname, ‘/lightbulbs’);
const dirPath = path.join(__dirname, ‘/flashlights’);
versus some sort of
const dirPath = path.join(__dirname, {‘/pictures’, ‘/lightbulbs’, ‘/flashlights’}); I wish to have a list of files instead of a directory.

I'm currently trying to develop interactive activities through use of Discord server bots for classroom purposes. I am fairly new at this but have got the basic gist of things, I do have a question though. I have been able to make my bot send messages to specific channels using the channel IDs which is great. The problem is that this is going to be messy in coding as at the moment I have to duplicate the entire string of code for each individual channel. Is there a way to tidy this up into one neat set of code? Currently it looks like this:

In this code below I use clip path and the mouse to create a flashlight effect with your mouse and you can use it to look around an image and this works perfectly fine.

However I'm wondering how to create a JavaScript function to stop this happening and just display the whole image without the flashlight effect. This would be attached to the button turn on light.

I have tried and the closest I've got is that it shows the image fine but goes back to the flashlight after I move the mouse.

Any code on how to stop this and a bit of explanation how its stoping the effect would be great

So I want the flashlight effect to stop working when I click the button