javascripthtmljquerycssjquery-terminal

Creating a Linux terminal themed website using HTML and JavaScript

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).

Solution

  • 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.