Create a Terminal-like Experience with HTML

Introduction

Do you want to create a website that looks and feels like a terminal? Imagine visitors being able to type commands and interact with your web page just like they would on a real terminal. It’s not as difficult as you might think. In this article, we will explore how to create a web-based, interactive HTML terminal using HTML and JavaScript. You don’t need extensive CSS knowledge; it’s surprisingly simple!

Getting Started

To begin, you’ll need to set up a basic HTML page with the necessary dependencies. Include the following code in the <head> section of your HTML document:

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery.terminal/js/jquery.terminal.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jquery.terminal/css/jquery.terminal.min.css">

Next, in the <body> tag, you can create your first terminal with a simple command:

<script>
    $('body').terminal(
        {
            hello: function(what) {
                this.echo(`Hello, ${what}. Welcome to this terminal.`);
            }
        },
        {
            greetings: 'My First Web Terminal'
        }
    );
</script>

And just like that, you have a basic HTML template for your web-based terminal-like input.

Displaying Images

Let’s take it a step further by adding a command that displays an image. Use the following code to create a command called “cat” that shows an image of a cute kitten:

$('body').terminal(
    {
        cat: function() {
            this.echo($('<img src="https://placekitten.com/408/287">'));
        }
    }
);

You can even pass arguments to the command that determine the size of the image:

$('body').terminal(
    {
        cat: function(width, height) {
            const img = $(`<img src="https://placekitten.com/${width}/${height}">`);
            this.echo(img);
        }
    }
);

Pausing and Resuming

Some commands might take a while to process, such as loading images over slow networks. In such cases, you can pause the terminal while the command is being executed asynchronously. Here’s an example:

$('body').terminal(
    {
        cat: function(width, height) {
            const img = $(`<img src="https://placekitten.com/${width}/${height}">`);
            img.on('load', this.resume);
            this.pause();
            this.echo(img);
        }
    },
    {
        greetings: 'My First JavaScript Terminal'
    }
);

Alternatively, you can return a promise from the command function:

function get_image(url) {
    return new Promise(function(resolve, reject) {
        const img = $(`<img src="${url}"/>`);
        img.on('load', () => resolve(img));
        img.on('error', reject);
    });
}

$('body').terminal(
    {
        cat: function(width, height) {
            return get_image(`https://placekitten.com/${width}/${height}`);
        },
        dog: function(width, height) {
            return get_image(`https://placedog.net/${width}/${height}`);
        }
    },
    {
        greetings: 'My First JavaScript Terminal'
    }
);

Tab Completion

To enhance the user experience, you can implement tab completion for commands. By adding a simple option to your terminal setup, you enable tab completion for all commands:

$('body').terminal(
    {
        // Your commands here
    },
    {
        completion: true,
        greetings: 'My First JavaScript Terminal'
    }
);

With this feature enabled, users can type a partial command and press the tab key to have the terminal automatically complete it.

See also  ProgramMatek: The Ultimate Open Source Form Builder for Your Website

Styling and Customization

By default, the terminal font size is set to 14 pixels. You can easily make it larger by adding the following CSS code:

:root {
    --size: 1.4;
}

Feel free to play around with other styling options such as color, background, cursor animation, or glow effects. You can find more information in the library’s documentation.

Next Steps

This article covered the basics of creating a terminal-like experience on your website using jQuery Terminal. However, there’s so much more you can explore:

  • Formatting and syntax highlighting
  • Custom prompts and password masking
  • Authentication
  • Command combination using the pipe operator
  • Keyboard shortcuts
  • User input and handling of emojis
  • ASCII form elements
  • Animations and typing effects
  • Executing commands from JavaScript
  • Invoking commands and terminal methods from a server
  • Updating lines dynamically
  • Saving state in URL hash and executing saved commands

The library offers an extensive range of creative examples and websites, including animations, a 404 error page with chat and text-based games, and much more. Check out the library’s Examples and Advanced Tutorial pages for more information.

Conclusion

Now you have the knowledge to create your own terminal-like website or web application. With jQuery Terminal, you can easily bring a terminal experience to any website, be it a resume, portfolio, or an interactive game. Remember, you can always reach out to the helpful community or seek paid support if you need assistance.

Start crafting your unique and interactive web-based terminal now with jQuery Terminal. Happy coding!


If you enjoyed this article, follow me on Twitter @jcubic or visit my homepage.

See also  How to Create an Email Signature in Apple Mail