const input = document.getElementById("term-input");
const output = document.getElementById("output-area");
const body = document.getElementById("term-body");

input.addEventListener("keydown", function(e) {
  if (e.key === "Enter") {
    const val = input.value.trim().toLowerCase();
    
    // Create the history line showing what was typed
    const historyLine = document.createElement("div");
    historyLine.className = "line";
    historyLine.innerHTML = "<span class=\"prompt\">guest@portfolio:~$</span> " + val;
    output.appendChild(historyLine);
    
    // Handle specific commands
    if (val === "help") {
      const response = document.createElement("div");
      response.className = "line";
      response.innerHTML = "Available commands:<br>- <span class=\"highlight\">about</span>: Learn about me<br>- <span class=\"highlight\">skills</span>: View my tech stack<br>- <span class=\"highlight\">clear</span>: Clear the terminal";
      output.appendChild(response);
    } else if (val === "about") {
      const response = document.createElement("div");
      response.className = "line";
      response.innerText = "I am a frontend developer passionate about modern web design and clean code.";
      output.appendChild(response);
    } else if (val === "skills") {
      const response = document.createElement("div");
      response.className = "line";
      response.innerText = "> HTML, CSS, JavaScript, React, SQL";
      output.appendChild(response);
    } else if (val === "clear") {
      output.innerHTML = "";
    } else if (val !== "") {
      const response = document.createElement("div");
      response.className = "line";
      response.innerText = "Command not found. Type help for a list of commands.";
      output.appendChild(response);
    }
    
    // Clear input and scroll to bottom
    input.value = "";
    body.scrollTop = body.scrollHeight;
  }
});

// Auto focus when clicking anywhere in the terminal
body.addEventListener("click", function() {
  input.focus();
});

Back to Snippets

Interactive Terminal UI Component JS

Engage developers with this interactive terminal UI component. We wrote a simple script that responds to commands, so you can build a fun portfolio easily.

125

#javascript

#css

#terminal

#command line

#developer portfolio

#ui

#interactive

/HTML *CSS ()JS Output Live Updates

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  background: #f3f4f6;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin: 0;
  padding: 20px;
}

.terminal-window {
  width: 100%;
  max-width: 700px;
  background: #1e1e1e;
  border-radius: 12px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  font-family: "Courier New", Courier, monospace;
}

.terminal-header {
  background: #323233;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  position: relative;
}

.buttons {
  display: flex;
  gap: 8px;
}

.buttons span {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.close { background: #ff5f56; }
.minimize { background: #ffbd2e; }
.maximize { background: #27c93f; }

.title {
  position: absolute;
  width: 100%;
  text-align: center;
  left: 0;
  color: #9ca3af;
  font-size: 0.875rem;
  pointer-events: none;
}

.terminal-body {
  padding: 20px;
  height: 350px;
  overflow-y: auto;
  color: #e5e5e5;
  font-size: 1rem;
  line-height: 1.6;
}

.line { margin-bottom: 8px; }
.highlight { color: #3b82f6; font-weight: bold; }
.prompt { color: #10b981; margin-right: 8px; }

.input-line {
  display: flex;
  align-items: center;
  margin-top: 8px;
}

#term-input {
  background: transparent;
  border: none;
  color: #e5e5e5;
  font-family: "Courier New", Courier, monospace;
  font-size: 1rem;
  outline: none;
  flex-grow: 1;
}

const input = document.getElementById("term-input");
const output = document.getElementById("output-area");
const body = document.getElementById("term-body");

input.addEventListener("keydown", function(e) {
 if (e.key === "Enter") {
 const val = input.value.trim().toLowerCase();
 
 // Create the history line showing what was typed
 const historyLine = document.createElement("div");
 historyLine.className = "line";
 historyLine.innerHTML = "guest@portfolio:~$ " + val;
 output.appendChild(historyLine);
 
 // Handle specific commands
 if (val === "help") {
 const response = document.createElement("div");
 response.className = "line";
 response.innerHTML = "Available commands: - about: Learn about me - skills: View my tech stack - clear: Clear the terminal";
 output.appendChild(response);
 } else if (val === "about") {
 const response = document.createElement("div");
 response.className = "line";
 response.innerText = "I am a frontend developer passionate about modern web design and clean code.";
 output.appendChild(response);
 } else if (val === "skills") {
 const response = document.createElement("div");
 response.className = "line";
 response.innerText = "> HTML, CSS, JavaScript, React, SQL";
 output.appendChild(response);
 } else if (val === "clear") {
 output.innerHTML = "";
 } else if (val !== "") {
 const response = document.createElement("div");
 response.className = "line";
 response.innerText = "Command not found. Type help for a list of commands.";
 output.appendChild(response);
 }
 
 // Clear input and scroll to bottom
 input.value = "";
 body.scrollTop = body.scrollHeight;
 }
});

// Auto focus when clicking anywhere in the terminal
body.addEventListener("click", function() {
  input.focus();
});

Interactive Terminal UI Component JS

Share Code Snippet