CODEWITHSUNDEEP
javascripthtmljquerycssjquery-terminal
Beat Maker
Beat Maker

Reputation: 1

Why does creating a color command in an HTML Terminal emulator create a (mostly) white screen?

I am making an HTML terminal, and have done most of the styling. I am trying to add one command, though, which will change the color. You can run these code snippets, and see why I'm asking this, but when you type in color and then a color, instead of doing what I'm trying to make it do, it just gives you a (mostly) white screen.

$('body').terminal({
  iam: function(name) {
    this.echo('Hello, ' + name +
      '. Welcome to Coding Class!');
  },
  echo: function(what) {
    this.echo(what)
  },
  link: function(link) {
    window.location.replace("http://www." + link);
  },
  color: function(color) {
    var body = document.querySelector("body");
    body.className = "test";

    var temp = document.querySelectorAll(".test");

    for (var i = 0; i < temp.length; i++) {
      temp[i].style.color = color;
      temp[i].style.fontSize = "40px";
    }
  }
}, {
  greetings: 'Hi!',
  prompt: 'root> '
})
<head>
  <script src="https://code.jquery.com/jquery-3.3.1.min.js">
  </script>
  <script src="https://unpkg.com/jquery.terminal/js/jquery.terminal.min.js">
  </script>
  <link rel="stylesheet" href="https://unpkg.com/jquery.terminal/css/jquery.terminal.min.css" />
</head>

<body>

</body>

Upvotes: 0

Views: 159

Answers (2)

NotHim
NotHim

Reputation: 43

To change the terminal's color in a more simple way you could also do:

color: function(clr) {
$("div, ul, li").css("background-color", clr);
},

Upvotes: 1

vee
vee

Reputation: 4755

let $ = jQuery.noConflict();
$('body').terminal({
    iam: function(name) {
        this.echo('Hello, ' + name +
            '. Welcome to Coding Class!');
    },
    echo: function(what) {
        this.echo(what)
    },
    link: function(link) {
        window.location.replace("http://www." + link);
    },
    color: function(color) {
        var body = document.querySelector("body");
        body.classList.add('test');// add class name `test` to body.

        var temp = document.querySelectorAll(".test");

        for (var i = 0; i < temp.length; i++) {
            temp[i].style.setProperty('--background', color);// use set variable instead of `background-color`.
            //temp[i].style.backgroundColor = color;// not recommended
            temp[i].style.fontSize = "40px";
        }
    }
}, {
    greetings: 'Hi!',
    prompt: 'root> '
})
<head>
  <script src="https://code.jquery.com/jquery-3.3.1.min.js">
  </script>
  <script src="https://unpkg.com/jquery.terminal/js/jquery.terminal.min.js">
  </script>
  <link rel="stylesheet" href="https://unpkg.com/jquery.terminal/css/jquery.terminal.min.css" />
</head>

<body>

</body>

I'm showing you how to use add() CSS class name to body.

To make background color change on command color, I change the code to use setProperty() to set CSS variable instead because the CSS file itself is already use that variable (in .terminal class) and it is easier this way.

Upvotes: 0

Related Questions