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>
<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=
</script>
<script src=
</script>
<link rel="stylesheet" href=
</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
$('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
Simple iam command
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'
});
|
available commands
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=
</script>
<script src=
</script>
<link rel="stylesheet" href=
<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>
|
Complete output with devtools
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
Similar Reads
How to build a Website using HTML?
Building a website using HTML (Hypertext Markup Language) is the foundation of web development. HTML allows you to structure content, define headings, paragraphs, lists, and links, and create visually appealing web pages. In this article, we'll learn the fundamentals of How to build a Website using
5 min read
How to make basic menu using jQuery UI ?
jQuery UI consists of GUI widgets, visual effects, and themes implemented using jQuery, CSS, and HTML. jQuery UI is great for building UI interfaces for the webpages. jQuery UI menu is a Themeable menu that is used with mouse and keyboard interactions for navigating between pages. In this article, w
1 min read
How to make Basic toolbars using jQuery Mobile ?
jQuery Mobile is a web based technology used to make responsive content that can be accessed on all smartphones, tablets and desktops. In this article, we will be making Basic toolbars using jQuery Mobile. Approach: First, add jQuery Mobile scripts needed for your project. <link rel="stylesheet"
1 min read
Using Lynx to Browse the Web From the Linux Terminal
Lynx is a terminal-based web browser for all Linux distributions. It shows the result as plain text on the terminal. It is a classic non-graphical text-mode web browser which displays the pages on the terminal. Lynx does not load images and multimedia contents, hence it is fast as compared to other
2 min read
How to design window manager using jQuery Simone Plugin ?
In this article, we will learn to design window manager using Simone plugin which is completely based on HTML, JavaScript, and jQuery. It gives single web page applications with simple desktop-like features. Download the pre-compiled files from the official website before the following code implemen
6 min read
How to Create Dark/Light Mode for Website using JavaScript/jQuery?
Creating Dark/Light Mode for a website involves toggling between light and dark color schemes. This feature allows users to switch between the two schemes based on their preferences. JavaScript/jQuery is utilized to dynamically adjust CSS styles, enhancing accessibility and user experience according
2 min read
How to Build a Simple Web Server with Golang?
Golang is a procedural programming language ideal to build simple, reliable, and efficient software. Creating Web Servers Using Golang: Initialize a projectCreate a project folder with a .go file inside eg. server.go. Directory structure: The server.go file: [GFGTABS] Go package main import (
2 min read
Simple Portfolio Website Design using HTML
Creating a portfolio website is a great way to showcase your work, skills, and personal brand to companies/recruiters. this article, we create a simple portfolio using only HTML. What You Will Expect to Create in this ProjectWe'll develop a simple portfolio website that presents your professional hi
4 min read
How to create lists and links using jQuery EasyUI Mobile ?
In this article we will learn how to design lists, group them and create links for easy navigation using jQuery EasyUI Mobile. EasyUI is a HTML5 framework for using user interface components based on jQuery, React, Angular and Vue technologies. It helps in building features for interactive web and m
4 min read
How to Use jQuery with Node.js ?
jQuery is a popular JavaScript library primarily used for client-side scripting to simplify HTML document traversal, event handling, animation, and AJAX interactions. Although jQuery is designed for the browser, you might find scenarios where you want to use it on the server side with Node.js, such
3 min read