Press "Enter" to skip to content

A Lightweight Terminal Interface For The Web in JavaScript | Terminal.js

Terminal.js is a lightweight and easy-to-use terminal interface for the web. (Note: This doesn’t actually run Javascript code) Currently, terminal.js has been tested on HTML only but should work on other platforms.

terminal css style, display terminal output in html, css terminal effect, html css terminal, how to make a terminal in javascript, html terminal, fake terminal website

How to make use of it:

1. Insert the main Terminal.js script into the document.

<script src="JS/terminal.js"></script>

2. Generate HTML for the terminal emulator.

<div class="terminal_window" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
</div>
<div class="fakeMenu">
  <div class="fakeButtons fakeClose"></div>
  <div class="fakeButtons fakeMinimize"></div>
  <div class="fakeButtons fakeZoom"></div>
</div>
<div class="fakeScreen">
  <div class="terminal-window primary-bg" onclick="document.getElementById('dummyKeyboard').focus();">
    <div class="terminal-output" id="terminalOutput">
      <div class="terminal-line">
        <span class="help-msg">Type <span class="help">help</span> to see a list of supported
          commands.<br>
      </div>
    </div>
    <div class="terminal-line">
      <span class="success">➜</span>
      <span class="directory">~</span>
      <span class="user-input" id="userInput"></span>
      <span class="line anim-typewriter"></span>
      <input type="text" id="dummyKeyboard" class="dummy-keyboard" />
    </div>
  </div>
</div>
</div>

3. Add your own commands as follows:

const COMMANDS = {
  rd: "Whoa!!! You found the secret command!!! To get access to the beta for my apps, go <a href = ' ' target = '_blank' style = 'color:#000;'> here </a> <br>The beta code is A3T4M",
  n: "OK",
  no: "OK",
  about:
    "This bit is coming soon. In the meantime, Feel free to visit my <a href ='https://github.com/Blackhole11232' target='_blank' style='color:#000;'> Github",
  ls:
    "usr&nbsp;&nbsp;&nbsp;&nbsp;home&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;&nbsp;&nbsp;&nbsp;root",
  cd: "changed directory to root..",
  "cd ..": "cd: no such file or directory",
  "cd var": "var aliased to ../",
  "cd root": "access denied",
  "cd usr": "no users found",
  "cd home": "home was aliased to .",
  sudo: "user not in the sudoers file.  This incident will be reported.",
  help:
    'Supported commands: <span class="code">about</span>, <span class="code">contact</span>, <span class="code">projects</span>, <span class="code">github</span><br>System commands: <span class="code">clear</span>, <span class="code">history</span>, <span class="code">cd</span>, <span class="code">ls</span><br>Tip: Use Up / Down arrow to go through recent commands',
  info:
    "<span class='aboutHead'>Name:</span> Aayush<br><span class='aboutHead'>Location:</span> Canada<br><span class='aboutHead'>Favourites:</span><br>&nbsp;&nbsp;&nbsp;&nbsp;<span class='aboutTail'>Os</span>: Arch, MacOs&nbsp;&nbsp;&nbsp;&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;<span class='aboutTail'>Editor</span>: Vim, Nova<br/>&nbsp;&nbsp;&nbsp;&nbsp;<span class='aboutTail'>Version Control</span>: Git<br>&nbsp;&nbsp;&nbsp;&nbsp;<span class='aboutTail'>Tabs or Spaces</span>: Depends usually <i>Tabs</i><br>&nbsp;&nbsp;&nbsp;&nbsp;",
  contact:
    "Email (coming soon): <a class='link' href=''>Gmail</a><br>Form: <a href='/contact' class='link'> Anon Message</a><br>",
};

Minimal Interactive Terminal In JavaScript, terminal.js Plugin/Github


See Demo And Download

Official Website(terminal-js): Click Here

This superior jQuery/javascript plugin is developed by terminal-js. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.