Typing Animation Command 관련

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...

Another command that we will add is an animated joke. We will print random jokes using an API that looks like the user typing.

We will use the Joke API for this purpose.

The API returns JSON with two types of responses: twopart and a single. This is the code that prints the text on the terminal:

// we use programming jokes so it fit better
// developer portfolio
const url = 'https://v2.jokeapi.dev/joke/Programming';
const commands = {
  async joke() {
    const res = await fetch(url);
    const data = await res.json();
    if (data.type == 'twopart') {
      // as said before in every function, passed directly
      // to the terminal, you can use `this` object
      // to reference terminal instance
      this.echo(`Q: ${data.setup}`);
      this.echo(`A: ${data.delivery}`);
    } else if (data.type === 'single') {
      this.echo(data.joke);
    }
  },
}

To add typing animation, you need to add an option to the echo method:

this.echo(data.joke, { delay: 50, typing: true });

There is one caveat: if you have a sequence of typing animations, you need to await for the previous one to finish (the echo will return a promise when animating). When creating such animation you can wrap your code with animation method:

// we use programming jokes so it fits better
// developer portfolio
const url = 'https://v2.jokeapi.dev/joke/Programming';
const commands = {
  async joke() {
    const res = await fetch(url);
    const data = await res.json();
    if (data.type == 'twopart') {
      // this method allow to create sequence of animations
      this.animation(async () => {
        // as said before in every function, passed 
        // directly to terminal, you can use `this` object
        // to reference terminal instance
        // and since we use arrow function we reference
        // this from joke function/command
        await this.echo(`Q: ${data.setup}`, {
          delay: 50,
          typing: true
        });
        await this.echo(`A: ${data.delivery}`, {
          delay: 50,
          typing: true
        });
      });
    } else if (data.type === 'single') {
      this.echo(data.joke, {
        delay: 50,
        typing: true
      });
    }
  }
};

You can read more about typing animation in this article: Typing Animation (jcubic/jquery.terminal)