fully made the command sending and receiving system (hopefully))

public/css/styles.css

@@ -74,4 +74,14 @@
     font-size: 16px;
     font-family: "Source Code Pro", monospace;
     color: white;
+}
+
+.responseText {
+    font-size: 16px;
+    margin-left: 5px;
+    background: none;
+    outline:none;
+    border: none;
+    font-family: "Source Code Pro", monospace;
+    color: white;
 }

public/js/terminal.js

@@ -7,37 +7,9 @@ let currentFolder = "~/projects";
 
 document.addEventListener("DOMContentLoaded", function () {
 
-    document.querySelectorAll(".pathText").forEach((element)=> {
-        element.innerHTML = `guest@${hostname}`;
-    });
+    document.querySelector(".pathText").innerHTML = `guest@${hostname}`;
 
-    const terminalInput = document.getElementById("terminalInput");
-
-    terminalInput.addEventListener("input", function (e) {
-        resizeInput();
-    });
-    resizeInput()
-
-    terminalInput.addEventListener('blur', function(e) {
-        e.preventDefault();
-        setTimeout(() => {
-            terminalInput.focus();
-        }, 0);
-    }, false);
-    document.addEventListener('click', function(e) {
-        e.preventDefault();
-        setTimeout(() => {
-            terminalInput.focus();
-        }, 0);
-    }, false);
-    terminalInput.focus();
-
-
-    terminalInput.addEventListener("keydown", async function (e) {
-        if (e.key === "Enter"){
-            await sendCommand(e);
-        }
-    });
+    addInputEventListeners();
 
 });
 
@@ -93,17 +65,71 @@ function deactivateAllStuff() {
 
 
 function handleExecutionResponse(response) {
+    //Show Response
     let commandResponse = document.createElement("div")
     commandResponse.classList.add("terminalLine");
-    commandResponse.innerHTML = response.response;
+
+    let textElement = document.createElement("span");
+    textElement.classList.add("responseText");
+    textElement.innerHTML = response.response;
+
+    commandResponse.appendChild(textElement)
     terminalContainer.appendChild(commandResponse);
+    console.log("created response element")
+
+
+    //create new terminal line.
+    createNewTerminalLine();
+
+    addInputEventListeners();
 }
 
 
 
 
 
+function createNewTerminalLine(){
+    let newTerminalLine = document.createElement("div");
+    newTerminalLine.classList.add("terminalLine");
+    newTerminalLine.classList.add("activeLine");
 
+    let pathText = document.createElement("h4")
+    pathText.innerHTML=`guest@${hostname}`;
+    pathText.classList.add("pathText");
+
+    let pathColon = document.createElement("h4")
+    pathColon.innerHTML = ":";
+    pathColon.classList.add("pathColon");
+
+
+    let pathPath = document.createElement("h4");
+    pathPath.innerHTML = currentFolder;
+    pathPath.classList.add("pathPath");
+
+
+    let pathDollar = document.createElement("h4");
+    pathDollar.innerHTML = "$";
+    pathDollar.classList.add("pathDollar");
+
+
+    let newTerminalInput = document.createElement("input");
+    newTerminalInput.setAttribute("type", "text");
+    newTerminalInput.setAttribute("value", "");
+    newTerminalInput.setAttribute("id", "terminalInput");
+    newTerminalInput.classList.add("terminalInput");
+
+    let blinky = document.createElement("div");
+    blinky.classList.add("pathBlinky");
+
+    newTerminalLine.appendChild(pathText);
+    newTerminalLine.appendChild(pathColon);
+    newTerminalLine.appendChild(pathPath);
+    newTerminalLine.appendChild(pathDollar);
+    newTerminalLine.appendChild(newTerminalInput);
+    newTerminalLine.appendChild(blinky);
+
+    terminalContainer.appendChild(newTerminalLine)
+}
 
 
 function resizeInput() {
@@ -141,4 +167,36 @@ function measureTextWidth(text) {
     document.body.removeChild(fakeElement);
 
     return width;
+}
+
+function addInputEventListeners() {
+    const terminalInput = document.getElementById("terminalInput");
+
+    terminalInput.addEventListener("input", function (e) {
+        resizeInput();
+    });
+    resizeInput()
+
+    terminalInput.addEventListener('blur', function(e) {
+        e.preventDefault();
+        setTimeout(() => {
+            terminalInput.focus();
+        }, 0);
+    }, false);
+
+    document.addEventListener('click', function(e) {
+        e.preventDefault();
+        setTimeout(() => {
+            terminalInput.focus();
+        }, 0);
+    }, false);
+    terminalInput.focus();
+
+    terminalInput.addEventListener("keydown", async function (e) {
+        if (e.key === "Enter"){
+            await sendCommand(e);
+        }
+    })
+
+    return;
 }