Terminal in browser: Building a Javascript Terminal in your website.

Javascript Console is very useful when it comes to debugging webpages. Normally you can see it when you right click on the webpage and inspect the webpage. Here for making a JS console and also to make it run your commands we will be using a Javascript library. Here we will be making a terminal in browser.

We will be using Jquery terminal for making a custom Javascript console which will feel like terminal and you can also make your custom commands. For making this open a file with name lets say index.html.

Include the above Jquery terminal library. Also keep in mind that you have to load jquery.js before loading this library. Now write the below script for this.

Includes

<script
 src="https://code.jquery.com/jquery-2.2.4.min.js"
 integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
 crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.terminal/1.1.0/js/jquery.terminal.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery.terminal/1.1.0/css/jquery.terminal.min.css" rel="stylesheet"/>

The above line will load the js required for your terminal.

Next we will write html for the same. It is pretty simple, just a division like below

HTML

<div id="term_demo">
</div>

Next we will write script for the same, the script will be like the below.

Script

jQuery(function($, undefined) {
 $('#term_demo').terminal(function(command) {
   if (command == 'help') {
     this.echo("Type the following.\n");
     this.echo("1. Companies worked for or experience=> exp")
     this.echo("2. Socials => social\n");
   } 
 
 //  if (command == 'social'){ .  This was wrong. 
   else if (command == 'social'){
     this.echo("mailto:gaurav.dev.iiitm@gmail.com\n")
     this.echo("https://www.github.com/chowmean\n")
     this.echo("https://www.facebook.com/chowmean\n")
     this.echo("https://www.twitter.com/gauravchowmean\n")
     this.echo("https://www.linkedin.com/in/chowmean\n")
   }

//   if (command == 'exp'){ .This was wrong. 
   else if (command == 'exp'){
     this.echo("\n")
     this.echo("Platform Engineer, Practo technologies. Jan 2017 - Present\n\n")
     this.echo("\n")
     this.echo("Software Developement Engineer, Practo technologies. May 2016 - Dec 2016\n\n")
     this.echo("\n")
     this.echo("Freelance Software Architect, Unihire. Mar 2016 - April 2016\n\n")
     this.echo("\n")
     this.echo("Laravel and Angular Developer, Infinite Eurekas. Oct 2015 - Nov 2015\n\n")
     this.echo("\n")
     this.echo("Python Developer, Lazylad. Sep 2015 - Oct 2015\n\n")
     this.echo("\n")
     this.echo("Software Developer, Frankly.me, May 2015 - Jul 2015\n\n")
     this.echo("\n")
     this.echo("Software Developer, GeekShastra Pvt Ltd, May 2014 - Jul 2014\n\n")
     this.echo("\n")
     this.echo("Software Developer, Decent Solutions, Dec 2013 - Mar 2014\n\n")
     this.echo("\n")
   }

   else {
     if (command !== '') {
       try {
         var result = window.eval(command);
         if (result !== undefined) {
           this.echo(new String(result));
         }
       } catch(e) {
         this.error(new String(e));
       }
     } else {
       this.echo('');
     }
   }
 

 }, {
 greetings: 'Hi dere, terminal addicts. want help any time just type help',
 name: 'chowmean.github.io',
 prompt: 'chowmean.github.io> ',
 color: 'green'
 });
});

Now we need to write some css to make it look the one in picture the css is as below.

CSS

<style>
.terminal {
 --color: green;
 --background: black;
 --animation: terminal-bar;
}
</style>

Now you are ready to go. Just type help and you will be able to see the options. If you see the script you can easily what to do if you want to add more commands.

This terminal in browser will be able to work as a console and you can use it as console.

This is how we make the terminal in browser.

Also you can make a lot of things with this plugin. Here is complete details of all of it. 

Liked the article please share and subscribe.