How to Build Simple Terminal like Website using jQuery ?

Last Updated : 09 Nov, 2021

Terminal is one of the most common tool used by developers. Many applications, frameworks, and even programming languages have more function which can be invoked using command line interface. Most of the computers come with at least one terminal in their operating system with command prompt now most replaced by cross-platform powershell in windows, and Linux console in Linux based OS's.

By now most of you have understood terminal in as system application but how can we build terminal like website in a browser. For that JavaScript has got our back, these terminal likes and feels like a system terminal but are not as powerful as them, but they do the work for us, and thanks to some developers we got some libraries to help us out rather than writing from scratch. Some libraries are jQuery.terminal, Xtermjs, for this tutorial we will use JQuery.terminal

Now open your favorite code editor and create our base html file mostly index.html and call our dependencies

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <!--content type : HTML -->
    <meta http-equiv="content-type" 
        content="text/html; charset=UTF-8">

    <!-- Making viewport responsive -->
    <meta name="viewport" content=
        "width=device-width,minimum-scale=1,
        initial-scale=1">

    <!-- Loading jQuery, jQuery.terminal, 
        and style sheet -->
    <script src=
        "https://code.jquery.com/jquery-3.3.1.min.js">
    </script>

    <script src=
"https://unpkg.com/jquery.terminal/js/jquery.terminal.min.js">
    </script>

    <link rel="stylesheet" href=
"https://unpkg.com/jquery.terminal/css/jquery.terminal.min.css" />
</head>

<body>
</body>

</html>

The body of web page is empty because it is the place where we will write our JavaScript code. Let us write our first command

JavaScript

// In body tag
$('body').terminal({
    iam: function (name) {
        this.echo('Hello, ' + name +
            '. Welcome to GeeksForGeeks');
    }
}, {
    greetings: 'GeeksForGeeks - A place to'
            + ' learn DS, Algo and Computer'
            + ' Science for free'
});

In above JavaScript code, we are using jQuery to get body part of the document into terminal function. Then we create another function inside the terminal function which takes an argument. iam is the command we created which prints your name passed as argument and welcome to GeeksForGeeks.

Greetings in a default command which prints at the top of page for every time the page loads. It also plugin also contains an error command which prints out when the command is not present

We can also write additional command like founder command which prints the founder name of GeeksForGeeks and help command which prints. Both of these commands are passed without arguments

JavaScript

$('body').terminal({
    iam: function (name) {
        this.echo('Hello, ' + name 
        + '. Welcome to GeeksForGeeks');
    },
    founder: function () {
        this.echo('Sandeep Jain');
    },
    help: function () {
        this.echo('iam - iam command and'
        + ' pass your name as argument'
        + '\nfounder to know the founder');
    },
}, {
    greetings: 'GeeksForGeeks - A place to'
    + ' learn DS, Algo and Computer Science'
    + ' for free'
});

Now, we will change some styling using the style tag, we use green color for all text and increase the text size

HTML

<style type="text/css">
.terminal,span,.cmd,div { 
    --color: rgba(0, 128, 0, 0.99);
}
.terminal, span {
    --size: 1.4;
}
</style>

The complete code is below

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="content-type" 
        content="text/html; charset=UTF-8">

    <meta name="viewport" content="width=device-width,
        minimum-scale=1,initial-scale=1">

    <script src=
        "https://code.jquery.com/jquery-3.3.1.min.js">
    </script>

    <script src=
"https://unpkg.com/jquery.terminal/js/jquery.terminal.min.js">
    </script>

    <link rel="stylesheet" href=
"https://unpkg.com/jquery.terminal/css/jquery.terminal.min.css" />

    <style type="text/css">
        .terminal,
        span,
        .cmd,
        div {
            --color: rgba(0, 128, 0, 0.99);
        }

        .terminal,
        span {
            --size: 1.4;
        }
    </style>
</head>

<body>
    <script>
        $('body').terminal({
            iam: function (name) {
                this.echo('Hello, ' + name +
                    '. Welcome to GeeksForGeeks');
            },
            founder: function () {
                this.echo('Sandeep Jain');
            },
            help: function () {
                this.echo('iam - iam command and '
                + 'pass your name as argument\n'
                + 'founder to know the founder');
            },
        }, {
            greetings: 'GeeksForGeeks - A place to'
                + ' learn DS, Algo and Computer '
                + 'Science for free'
        });
    </script>
</body>

</html>

You have build a simple interactive terminal website and customized it. jquery.terminal can also do some other things like

Formatting and Syntax Highlighting.
JSON-RPC where everything is on the server (found in Interpreter section on the wiki).
Changing prompt.
Masking passwords.
Authentication.
Combining commands with Pipe operator like in UNIX terminal.
Keyboard shortcuts (list of build in you can find here).
Reading text from users.
Handling Emoji (if system don’t do that out of the box like Windows10).
Executing commands from JavaScript.
Invoking commands and terminal methods from Server.
Updating lines.
Saving state in URL hash and execute saved commands.

You can learn more about the jQuery.terminal from docs and github

How to make a basic dialog using jQuery UI ?

kushwanthreddy

Improve

Article Tags :

How to Build Simple Terminal like Website using jQuery ?

Similar Reads

Thank You!

What kind of Experience do you want to share?