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. Please help, as this needs to be finished before tommorow.
$('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>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.