How can I use jQuery Terminal and Bootstrap/CSS to change the style and create a top-left terminal?-CodePudding

I want the input and output of the jQuery Terminal to be entirely within the top-left of a screen that's been split with Bootstrap, though I'm not sure how to do that. Ideally, it'd be something similar to Codecademy page (something like this except the terminal is on the top left).

I thought adding the following terminal code inside the div left-side block would work. But, by doing so, the terminal box is instead outside and below the leftside class.

Any advice or suggestions? Generally, I just have no idea how I can use Bootstrap/CSS to manipulate jQuery terminals.

var body = $('body').terminal(
  function(command) {
    this.echo(command);
  }, {
    greetings: 'Test',
    name: 'Test',
  }
);

terminal_print = function(str) {
  body.echo(str);
};

.leftside,
.rightside {
  height: 50vh;
  width: 100%;
}

@media screen and (min-width:768px) {
  .leftside,
  .rightside {
    height: 100vh;
  }
}

.leftside {
  background: black;
}

.rightside {
  background: white;
}

<head>
  <meta content="utf-8" http-equiv="encoding">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <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 href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  <link rel="stylesheet" href="index.css" />
</head>

<body>
  <div >
    <div >
      <div ></div>
    </div>

    <div >
      <div >
        This page is intentionally blank
      </div>
    </div>
  </div>
</body>

CodePudding user response：

You've specified the body element as the target. Why not use your element? (It doesn't matter where the code sits--you're specifying the target element in the first line.)

I've converted your identity classes to IDs and updated your terminal function name for clarity.

var terminal = $('#leftside').terminal(
  function(command) {
    this.echo(command);
  }, {
    greetings: 'Test',
    name: 'Test',
  }
);

terminal_print = function(str) {
  terminal.echo(str);
};

#leftside,
#rightside {
  height: 50vh;
  width: 100%;
}

@media screen and (min-width:768px) {
  #leftside,
  #rightside {
    height: 100vh;
  }
}

#leftside {
  background: black;
  color: #ddd;
}

#rightside {
  background: white;
}

<head>
  <meta content="utf-8" http-equiv="encoding">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <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 href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  <link rel="stylesheet" href="index.css" />
</head>

<body>
  <div >
    <div >
      <div id="leftside"></div>
    </div>

    <div >
      <div id="rightside" >
        This page is intentionally blank
      </div>
    </div>
  </div>
</body>