title: Making a simple terminal in HTML
body: <p>I want to make a simple console terminal using stdin and stdout. Basically I have a function that inputs something and retrieves something to the chat.</p>
  
  <p>As you know it would say something like <code>root@192.168.2.1:/</code> and then I can type ONLY in that line. When I press enter/submit it would appear another line with <code>root@192.168.2.1:/</code> for me to type again.</p>
  
  <p>How do I make this to be able to type only in the last line and in front of the <code>root@192.168.2.1:/</code> (basically this is locked)?</p>
  
  <p><strong>Any better ideas to implement this instead of textarea??</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('#btnSubmit').click(function() {
    var terminal = $('#terminal');
    var stdin = terminal.val();
    console.log(stdin);
    //Get stdout (FAKE FOR THE EXAMPLE)    
    terminal.append(stdout() + '&lt;br&gt;');
  });
  
  
  function stdout(stdin) {
    return "root@192.168.2.1:/"
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.terminal {
    background-color: #000;
    color: #fff
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  
  
  &lt;textarea class="terminal" rows="20" id="terminal"&gt;&lt;/textarea&gt;
  &lt;button class="btn btn-primary" id="btnSubmit" type="button"&gt;Send&lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>