How to Make Help Commands Executable 관련

How to Create an Interactive Terminal Portfolio Website

---

In this article, you will learn how to create an interactive terminal-based portfolio and a résumé in JavaScript. We'll use the jQuery Terminal library (and a few other tools) to create a website that looks like a real terminal. This article will sho...

---

How to Create an Interactive Terminal Portfolio Website

In this article, you will learn how to create an interactive terminal-based portfolio and a résumé in JavaScript. We'll use the jQuery Terminal library (and a few other tools) to create a website that looks like a real terminal. This article will sho...

We can make the UX better to allow clicking on the command and execute it just like when the user types it.

We will need a few things to do this. First, we need to add formatting to each command and add an HTML class attribute. We can also make the command white so it's more visible.

const command_list = Object.keys(commands);
const formatted_list = command_list.map(cmd => {
  return `<white class="command">${cmd}</white>`;
});
const help = formatter.format(formatted_list);

Next is to add affordance. To indicate that the user can click the command, we need to change the cursor in CSS:

.command {
  cursor: pointer;
}

The last step is to execute the command when the user clicks the command. We need to add an event handler with jQuery (jQuery Terminal dependency) or we can use the native browser addEventListener. Here we use jQuery:

term.on('click', '.command', function() {
  const command = $(this).text();
  term.exec(command);
});

terminal::exec() is a way to execute a command programmatically, just like user would type it and press enter.

You can test it by typing help and clicking help again.

Clicking echo will print an empty line. We can fix it by checking if the array of arguments is not empty, before executing terminal::echo():

const commands = {
  echo(...args) {
    if (args.length > 0) {
      term.echo(args.join(' '));
    }
  }
};

Now clicking on echo will only show the executed command.

Note

If for any reason you don't want to show the prompt and the command that has been executed, you can silence the exec by passing true as the second argument.

term.exec('help', true);