H4x0r.js

The ultimate 1337 h4x0r JS-Terminal

---

Display strings, or let the user enter values. H4x0r.js is the leet way of letting the user interact with your webpage. Not only is it engaging and fun, but you also have the ability to customize the styling yourself, in order for it to perfectly go along with the rest of your site.

Installation

Script tag

<script src='https://cdn.jsdelivr.net/gh/MattMoony/h4x0r.js@master/src/h4x0r.js'></script>

Setup

Easy way

let target = document.getElementById('<target-id>');
let h4x0r = new H4x0r(target);

Advanced way

let target = document.getElementById('<target-id>');
let options = {
  showCreds: true,
  inputNextLine: false,

  username: "MattMoony",
  hostname: "github.com",
  path: "/h4x0r.js/src",
  mode: "$",

  fontColor: "#fff",
  backgroundColor: "#151515",
};

let h4x0r = new H4x0r(target, options);

Usage

Display

To print text to the console use the .display(msg) function. It will print the message you passed to the target console.

// ...

h4x0r.display('Hello World!');
h4x0r.display('How\'re you doing?');

// ...

Display (advanced)

You can also pass further options to the function, using an object like so: .display(msg, options). This will allow you to specify, if the passed message is supposed to be centered, displayed in heading format, etc.

// ...

let options = {
  center: true,
  heading: true,
  noCreds: true,
};

h4x0r.display(' -- W3LC0M3 T0 1337 H4X0R.J5 -- ', options);

// ...

GetInput

To get user input, you should use the .getInput(question, ans => {}) syntax. The function will display the passed question, wait for the user's input and in turn, pass the answer to your callback function.

// ...

h4x0r.getInput("What's your name? ", name => {
  // You can do anything with the name here ...
  h4x0r.display(`Welcome ${name}!`);
});

// ...

Conclusion

All of the info above should describe the framework pretty well. However, if you have any questions or suggestions, feel free to contact me on twitter

---

... Matthias M. (March, 2019)