Minimal Interactive Terminal In JavaScript – Terminal.js

Preview:

Description:

A super tiny JavaScript library to emulate an interactive terminal on the page.

How to use it:

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

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

2. Build the 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 = 'https://blackholegames.gq/beta' 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>",
};

Changelog:

v2.0 (02/15/2023)

• Major Update. Added a custom tag: , and added support for light and dark mode. Also made it possible to edit/add/remove commands.