How do i add slash commands discord.js

So i followed Codelyon's Code Your Own Discord Bot 2021 playlist on youtube and i used his advanced command handler and updated it a little bit by modifying/adding my own commands but then i would like to change his regular advanced command handler with slash commands but i have no idea how to implement it. I've watched some other tutorials but they don't seem to work. Hopefully someone can help me out.

Code of the main.js file:

const Discord = require('discord.js');
const client = new Discord.Client({
    intents: ['GUILDS', 'GUILD_MESSAGES']
});

const prefix = '!';

const fs = require('fs');

client.commands = new Discord.Collection();

const commandFiles = fs.readdirSync('./commands/').filter(file => file.endsWith('.js'));
for (const file of commandFiles) {
    const command = require(`./commands/${file}`);

    client.commands.set(command.name, command);
}


client.once('ready', () => {
    console.log('Bot is online!');
});

client.on('messageCreate', message => {
    if (!message.content.startsWith(prefix) || message.author.bot) return;

    const args = message.content.slice(prefix.length).split(/ +/);
    const command = args.shift().toLowerCase();

    if (!client.commands.get(command)) return;

    client.commands.get(command).execute(message, args, Discord, prefix, client);
})

client.login('xxx');

And here is my file format

Thanks in advance!

Solution

So this should get you started then use this guide for making the commands

DiscordJS Guide - Slash Commands

You will also need to make sure that you go to Discord Dev and make sure that your bot is invited to your guild with these checked under the OAuth2 tab and set your permissions needed

const Discord = require('discord.js');
const client = new Discord.Client({
    intents: ['GUILDS', 'GUILD_MESSAGES']
});

const prefix = '!'; //*

const fs = require('fs');

client.commands = new Discord.Collection(); //*
client.slashCommands = new Discord.Collection();

const commandFiles = fs.readdirSync('./commands/').filter(file => file.endsWith('.js'));//*
// create a new folder for your slash commands
const slashCommandFiles = fs.readdirSync('./slashCommands/').filter(file => file.endsWith('.js'));

for (const file of commandFiles) { //*
    const command = require(`./commands/${file}`);//*
    client.commands.set(command.name, command);//*
}//*
// delete anything using "commands" if you only plan on having slash commands otherwise keep both ( I marked them with a //* )

for (const file of slashCommandFiles) {
    const slashCommand = require(`./slashCommands/${file}`);
    client.slashCommands.set(slashCommand.name, slashCommand);
}

// other code

client.on('interactionCreate', async interaction => {
    if (interaction.isCommand()) {
        const command = client.slashCommands.get(interaction.commandName);

        try {
            command.execute(client, interaction);
        } catch (error) {
            console.error(error);
                
        }

    }
    if (interaction.isButton()) {
        
    }
    if (interaction.isContextMenu()) {

    }
});