Docs Changelog CDN

Termino.js Demo

Create terminals in the browser with MarketingPipeline's Termino.js library - great for making terminal animations, terminal like apps & terminal based games.


A JavaScript library made by @MarketingPipeline. Source code is available on GitHub. License can be found here.

Demo(s)

  • Theses demo includes a basic terminal animation & two real functional terminal based app's (below) built using Termino.js from MarketingPipeline

Termino.js - Terminal Animation Demo

View Source
	
// Termino.js - Terminal Animation Demo 
import {Termino} from 'https://cdn.jsdelivr.net/gh/MarketingPipeline/Termino.js@v1.0.0/dist/termino.min.js';

//// Render animations when in view using Intersection Observer
(function() {
  var observer = new IntersectionObserver(onIntersect);


  observer.observe(document.getElementById("Example_Terminal_1"));

  function onIntersect(entries) {
    entries.forEach((entry) => {
      if (entry.target.getAttribute("terminal-processed") || !entry.isIntersecting)
        return true;
      entry.target.setAttribute("terminal-processed", true);
      renderTerminal_Animation()
    });
  }
})();


// initialize a Terminal via Termino.js   

let term = Termino(document.getElementById("Example_Terminal_1"))


function renderTerminal_Animation() {

  async function animation() {
    term.echo("hello world")
    await term.delay(2000) // delay output 2 seconds
    term.add_element("loading-text", `Fake loading animation`, "loading") // add HTML element with html text "loading" & class-name "loading" (shows the loading carot via CSS).
    await term.delay(5000) // delay output 5 seconds
    term.output("Animation fun has 'loaded'")
    term.remove_element("loading-text") // remove HTML element added earlier
    term.echo("what will you make with termino.js?")
  }

  animation()

}
	


Termino.js - Terminal App Demo (Basic)


View Source

// Termino.js - Terminal App Demo (Basic)
import {Termino} from 'https://cdn.jsdelivr.net/gh/MarketingPipeline/Termino.js@v1.0.0/dist/termino.min.js';

// initialize a Terminal via Termino.js   
let term2 = Termino(document.getElementById("Example_Terminal_2"))



function print_hello_world() {
  term2.output("hello world")
}



async function basicTerminalApp() {
  term2.output(`1. Print Hello Wolrd
2. Add Two Numbers
3. Exit`)

  // call Termino.js /  your terminal for inital input
  let term2value = await term2.input("What would you like to do?")


  // function to add numbers
  async function add_numbers() {
    let number1 = await term2.input("First number to add")
    let number2 = await term2.input("Second number to add")
    term2.output(Number(number1) + Number(number2))
  }



  if (term2value === "1") {
    await print_hello_world() // example of running your own custom function
  }

  if (term2value === "2") {
    await add_numbers() // example of running your own custom function
  }

  if (term2value === "3") {
    term2.output("You chose option 3, exiting terminal")
    await term2.delay(2000)
    term2.kill() // exit terminal
  }

  if (term2value != "1" && term2value != "2" && term2value != "3") {
    term2.output("Invalid choice")
  }

  // after called  - repeat function again (if not exit menu)
  if (term2value != "3") {
    basicTerminalApp()
  }

}

basicTerminalApp()
	

Termino.js - Terminal App Demo (Advanced)


View Source

// Termino.js - Terminal App Demo (Advanced)
import {Termino} from 'https://cdn.jsdelivr.net/gh/MarketingPipeline/Termino.js@v1.0.0/dist/termino.min.js';

  // initialize a Terminal via Termino.js   
  let term3 = Termino(document.getElementById("Example_Terminal_3"))

  //// YOUR COOL CUSTOM FUNCTIONS BELOW FOR YOUR APP.

  async function SearchGitHubProfile() {


    try {

      let username = await term3.input("What profile would you like to search?")

      term3.echo(username)
      if (!username) {
        throw {
          message: "No username was provided"
        }
      }
      const response = await fetch(`https://api.github.com/users/${username}`)
      let data = await response.json();
      if (data.login === undefined) {
        throw {
          message: "profile was not found"
        }
      }

      term3.output(`You searched for: ${data.login}, they have ${data.followers} followers, & ${data.public_repos} public repos`, )
    } catch (error) {
      term3.output(`Failed to get github info ${error.message}`)
    }



  }

  function ascii_art() {
    term3.output(`⠀⠀⠀⠀⠀⠀⠀⢀⣠⣤⣤⣶⣶⣶⣶⣤⣤⣄⡀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⢀⣤⣾⣿⣿⠿⠟⠛⠛⠛⠛⠻⠿⣿⣿⣷⣤⡀⠀⠀⠀⠀
⠀⠀⠀⣴⣿⣿⠟⠋⠁⠀⠀⠀⠀⠀⠀⠀⠀⠈⠙⠻⣿⣿⣦⠀⠀⠀
⠀⢀⣾⣿⡿⠁⠀⠀⣴⣦⣄⠀⠀⠀⠀⠀⣀⣤⣶⡀⠈⢿⣿⣷⡀⠀
⠀⣾⣿⡟⠁⠀⠀⠀⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⠃⠀⠈⢻⣿⣷⠀
⢠⣿⣿⠁⠀⠀⠀⣠⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣦⠀⠀⠈⣿⣿⡄
⢸⣿⣿⠀⠀⠀⢰⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⡇⠀⠀⣿⣿⡇
⠘⣿⣿⡦⠤⠒⠒⢿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⡿⠧⠤⢴⣿⣿⠃          TERMINO.JS
⠀⢿⣿⣧⡀⠀⢤⡀⠙⠻⠿⣿⣿⣿⣿⣿⡿⠟⠋⠁⠀⢀⣼⣿⡿⠀        COOL ASCII ART
⠀⠈⢿⣿⣷⡀⠈⢿⣦⣤⣾⣿⣿⣿⣿⣿⣷⣄⠀⠀⢀⣾⣿⡿⠁⠀
⠀⠀⠀⠻⣿⣿⣦⣄⡉⣿⣿⢿⣿⠉⢻⣿⢿⣿⣠⣴⣿⣿⠟⠀⠀⠀
⠀⠀⠀⠀⠈⠛⢿⣿⣿⣿⣧⣼⣿⣤⣾⣷⣶⣿⣿⡿⠛⠁⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠈⠙⠛⠛⠿⠿⠿⠿⠛⠛⠋⠁⠀⠀⠀⠀⠀⠀⠀`)
  }


  let YOUR_FUNCTIONS = ["SearchGitHubProfile()", "printInfoAboutDev()", "help", "demo_menu", "quit_terminal"]


  async function add_numbers() {
    let number1 = await term3.input("First number to add")
    let number2 = await term3.input("Second number to add")
    term3.output(Number(number1) + Number(number2))
  }



  function help() {
    term3.output("This Termino.js Instances Custom Functions Include - SearchGitHubProfile(), demo_menu, printInfoAboutDev(), help & quit_terminal")
  }

  async function quit_terminal() {
    term3.output("Quitting Terminal...")
    term3.delay(3000)
    term3.kill()
  }

  function printInfoAboutDev() {
    term3.output("Jared is the creator of Termino.js & the founder of the GitHub organization MarketingPipeline, if you would like to hire him for any work. Feel free to reach him on GitHub - any client referrals are appreciated as well.")
  }


  async function demo_menu() {
    term3.output(`1. Print Hello World 
2. Add Two Numbers
3. Show ASCII Art`)

    let term3value = await term3.input("What would you like to do?")
    if (term3value === "1") {
      term3.output("Hello World")
    }

    if (term3value === "2") {
      term3.echo(term3value)
      await add_numbers()
    }

    if (term3value === "3") {
      ascii_art()
    }

    if (term3value != "1" && term3value != "2" && term3value != "3") {
      term3.output("Invalid choice")
    }


  }

  /// END OF YOUR COOL CUSTOM FUNCTIONS



  // MESSAGES TO PRINT AT START!
  term3.output("Your Cool Terminal Copyright Here")

  term3.output("You can list all the functions available by typing 'help'")



  /// 
  async function AdvancedDemo() {


    // call the terminal for inital input
    let terminal_msg = await term3.input("")


    /// cool way to execute some functions! (you can make your own way of executing them!)  
    if ((YOUR_FUNCTIONS.includes(terminal_msg))) {


      // run terminal commands with () example - hello_world() 
      if (terminal_msg.endsWith('()')) {
        await eval(terminal_msg)
      } else {
        // run terminal commands without () example - hello_world 
        await eval(terminal_msg + "()")
      }

    } else {
      //  Handle error if your function is not found
      if (terminal_msg.length != 0) {
        term3.output(terminal_msg + " is not found")
      }

    }

    // after called  - repeat function again
    AdvancedDemo();

  }

  AdvancedDemo()