Creating a Linux terminal themed website using HTML and JavaScript

Question

I am trying to create a Linux terminal themed website which has multiple commands. The user has liberty to use whichever commands he/she wants just like a normal terminal. I've created a sample HTML file and included a simple function which displays a "cat" when the user displays a cat. However, I am having a problem creating multiple functions. I am not familiar with javascript and HTML that much, so it maybe a stupid question. My code is:

<!DOCTYPE html>
<html>
<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>
    <script>
$('body').terminal({
    cat: function() {
        this.echo($('<img src="https://placekitten.com/408/287">'));
    }
});
    </script>
</body>
</html>

The output website looks something like this:

The_pic_of_website

Now, If I add one more function. I get the error function_name not found. My sample code for multiple function is,

<!DOCTYPE html>
<html>
<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>
    <script>
$('body').terminal({
    cat: function() {
        this.echo($('<img src="https://placekitten.com/408/287">'));
    }
    dog: function(v){
        this.echo('hello ' + v);
    }
});
    </script>
</body>
</html>

So, I would like a terminal where I could interact with multiple commands (functions). Also, it would be great to be directed to other resources which could have helpful info on this topic. Thanks in advance. (also, I have referred to https://itnext.io/how-to-create-interactive-terminal-like-website-888bb0972288).

Dexterians · Accepted Answer · 2020-11-03 05:09:54Z

4

You need to comma separate the functions.

<!DOCTYPE html>
<html>
<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>
    <script>
$('body').terminal({
    cat: function() {
        this.echo($('<img src="https://placekitten.com/408/287">'));
    },
    dog: function(v){
        this.echo('hello ' + v);
    }
});
    </script>
</body>
</html>

As you've added a v paramater in there, for it to work you have to type "dog 1" or "dog anything", else remove the v function/param and continue :)

To answer the part about resources and learning, just go learn the basic fundamentals of JavaScript/jQuery and the rest will make sense - while jumping in to the deep end right away is a way to learn, sometimes you gotta go back to basics and there are countless videos and articles that can teach you the basics, they're all just a simple Google away.

JavaScript/jQuery/HTML all follow a basic foundation and once you learn those then you can have a bit more fun with the advanced stuff. You're basically trying to build a roof of a house before you've built the walls to put it on.

edited Nov 3, 2020 at 5:09

answered Nov 3, 2020 at 4:58

Dexterians

1,0211 gold badge7 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Esh200111 Over a year ago

Thank you! That worked. I like that roof analogy :)

Dexterians Over a year ago

Haha you're welcome @Esh200111 - don't be mislead or discouraged by my analogy either! You can easily learn the basics within a few days. The advanced stuff gets tricky and that's where Stack/Google become your best friends - I still Stack and Google a lot of stuff ;)

Esh200111 Over a year ago

Nope not discouraged, but motivated to do more now!

Collectives™ on Stack Overflow

Creating a Linux terminal themed website using HTML and JavaScript

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related