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

Terminal in browser: Building a Javascript Terminal in your website.
5 (100%) 3 votes

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.

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


Gaurav Yadav

Gaurav is cloud infrastructure engineer and a full stack web developer and blogger. Sportsperson by heart and loves football. Scale is something he loves to work for and always keen to learn new tech. Experienced with CI/CD, distributed cloud infrastructure, build systems and lot of SRE Stuff.

7 COMMENTS
  • Vathsan
    Reply

    where and how do you save the script file? can you explain please?

    1. Gaurav Yadav
      Reply

      Its like html only and you can use it through your browser. Please elaborate if I am unable to answer your question.

      1. Vathsan
        Reply

        the jquery script that you have written, should it be in a separate file or it should be in the html itself? i want to include it in a separate file. if so how do i it?

        1. Gaurav Yadav
          Reply

          It can be added in seperate file. Its same as normal scripts are used. Create a file name term.js and include it using this tags.

  • Vathsan
    Reply

    how and where do u link the script file? ELI5!

  • bob
    Reply

    how do you prevent that reference error?

    1. Gaurav Yadav
      Reply

      Thanks for reaching out, which reference error you are talking about here. Need more details please.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.