Home Web Development JavaScript JavaScript Terminal Emulator Program | Pure JS Web Based Terminal

JavaScript Terminal Emulator Program | Pure JS Web Based Terminal

March 29, 2020

5412

How we create a basic web terminal using pure JavaScript without any library or plugin? Solution: See this JavaScript Terminal Emulator Program, Pure JS Web Based Terminal.

Previously I have shared many pure JavaScript programs, but this is advance one this is a web or online terminal. Basically, a terminal emulator provides a simple way of adding a terminal / command console to your website or web applications. Where we can put commands related to our services. We can create a web terminal using JavaScript, where we can put the commands and the actions. There are many plugins available to do that, but we can also create it with pure JS.

Today you will learn to create a Pure JS Web Based Terminal program. Basically, there is a black box that will show results and input at the bottom of the box, where you can put commands. There you can say hi then the terminal will reply you back, and you have to type ‘help’ to see all the featured commands list and info. Simply you can get date, time, etc values by typing these. There is directly open website features, you can search in google, youtube, and Wikipedia by putting the site name with keywords (ex. google + put your search query ). And also there are some other webpages open features, when you will give command web development or web dev then webdevtrick blog’s web development category will open automatically. There are many more commands you can check in the JS file.

So, Today I am sharing JavaScript Terminal Emulator Program. There I have used pure JavaScript to create the program, HTML and CSS to create the layout and style it. The best face is a beginner will also understand the JS code and can change the commands and values or create their own commands. You can place this terminal online on your website or project.

If you are thinking now how this JS web-based terminal actually is, then see the preview given below.

Preview Of Pure JS Web Based Terminal

See this video preview to getting an idea of how this web terminal emulator looks and works.

Live Demo

Now you can see this program visually how it works, also you can see it live by pressing the button given above. If you like this then get the source code of its.

JavaScript Terminal Emulator Source Code

Before sharing source code, let’s talk about it. First I have created the main div for the backside gradient section, and placed all other items inside it. Inside the main div, I have placed another div for the result screen and text input for put commands. I gave unique class names to all the divs, and an ID to the input. Also In the HTML file, I have linked other files like CSS and JavaScript.

Now using CSS I have placed all the elements in the right place, as you can see in the preview. With CSS first I gave basic values like size, position, margin, padding, etc to all the elements. There I have used @keyframe command to create the animations. And used @media query to create a responsive design. I think the style of this program is really impressive.

JavaScript handling here the whole feature in this program. There I have used ‘if’ command to declare conditions and result of basic commands like time and date. After that, I have used JS case: and break; commands and put command name and their result condition. Also, I have used if{} else{} statements to open websites feature like open google, open youtube, etc. You can change all the commands and their result, and replace these and put your own by copy-paste the format.

Left all other things you will understand after getting the codes, I can’t explain all in writing. For creating this program you have to create 3 files. First file for HTML, second file for CSS, and third file for JavaScript. Follow the steps to creating this program without any error.

index.html

Create an HTML file named ‘index.html‘ and put these codes given below.

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>JavaScript Web Terminal | Webdevtrick.com</title>
  <link rel="stylesheet" href="style.css">

</head>
<body>

<div class="gradientCont">
		<div class="mainCont">
			<h2>JS Web Terminal</h2>
			<h3>Talk With Me, I'm Your Personal Assistant.</h3>
			<div class="terminalCont">
				<div id="terminalReslutsCont">
				</div>
				<form>
					<input id="terminalTextInput" type="text" placeholder="Try typing hi or help..." autocomplete="off">
				</form>
			</div>
		</div>
	</div>

  <script  src="function.js"></script>

</body>
</html>

<!DOCTYPE html>

<head>

<title>JavaScript Web Terminal | Webdevtrick.com</title>

</head>

<body>

<h2>JS Web Terminal</h2>

<h3>Talk With Me, I'm Your Personal Assistant.</h3>

</div>

<form>

</form>

</div>

</body>

</html>

style.css

Now create a CSS file named ‘style.css‘ and put these codes given here.

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

body{
  font-family: 'Roboto','Helvetica Neue', 'Lucida Grande', sans-serif;
}

body, h1,h2,h3, p{
	margin:0;
	padding:0;
}

.gradientCont{
  background: linear-gradient(to right, #ff416c, #ff4b2b); 
	width:100%;
	height: 300px;
}

.mainCont{
	width:1000px;
	margin: 0 auto;
}

.mainCont h2{
	display: inline-block;
	width: 100%;
	text-align: center;
	font-weight: 300;
	font-size: 48px;
	margin: 60px 0 0 0;
	color: white;
  opacity: 0;

  animation: fadeInAnimation 1s ease-in-out 0s forwards;
}

.mainCont h3{
	text-align: center;
	font-weight: 400;
	font-size: 18px;
	color: rgba(255,255,255,0.75);
  margin: 0 0 60px 0;
  opacity: 0;

  animation: fadeInAnimation 1s ease-in-out 0.5s forwards;
}

.terminalCont{
	background: black;
	width: 100%;
	border-radius: 4px;
  padding:12px 0 0 0;
  margin-top: -20px;
  font-family: 'Roboto Mono', monospace;
  opacity: 0;

  animation:
    slideDownAnimation 1s ease-in-out 1s forwards,
    fadeInAnimation 0.8s ease-in-out 1s forwards;
}

.userEnteredText{
  color: rgba(255,255,255,0.5);
  margin: 0;
  padding: 0;
  display: inline-block;
}

#terminalReslutsCont{
	width:100%;
	height: 400px;
	padding: 12px;
	overflow-y: auto;
	resize: none;
	border: none;
	font-size: 14px;
  line-height: 28px;
	display: block;
	color: rgba(255,255,255,0.9);
}


#terminalReslutsCont a{
  color: rgba(255,255,255,0.9);
  text-decoration: none;
}

#terminalReslutsCont a:hover{
  text-decoration: underline;
}

#terminalTextInput{
	background: black;
	display: block;
	border: none;
	border-top: 1px solid rgba(255,255,255,0.2);
	border-radius: 0 0 4px 4px;
	width: 100%;
	color: white;
	padding: 18px;
	font-size: 14px;
  outline: none;
  font-family: 'Roboto Mono', monospace;
}

@-webkit-keyframes fadeInAnimation {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-moz-keyframes fadeInAnimation {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-o-keyframes fadeInAnimation {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes fadeInAnimation {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

@-webkit-keyframes slideDownAnimation {
  0%   { margin-top: -20px;}
  100% { margin-top: 0;}
}
@-moz-keyframes slideDownAnimation {
  0%   { margin-top: -20px;}
  100% { margin-top: 0;}
}
@-o-keyframes slideDownAnimation {
  0%   { margin-top: -20px;}
  100% { margin-top: 0;}
}
@keyframes slideDownAnimation {
  0%   { margin-top: -20px;}
  100% { margin-top: 0;}
}

@media screen and (max-width: 1000px){
  .gradientCont{
    height: 220px;
  }
  .mainCont{
    width: 100%;
    padding: 0 12px;
  }
  .mainCont h2{
    font-size: 32px;
    margin: 40px 0 0 0;
  }
  .mainCont h3{
    font-size: 16px;
    margin: 0 0 40px 0;
  }
  #terminalReslutsCont{
    height: 100px;
  }

}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

html {

box-sizing: border-box;

}

*, *:before, *:after {

box-sizing: inherit;

}

body{

font-family: 'Roboto','Helvetica Neue', 'Lucida Grande', sans-serif;

}

body, h1,h2,h3, p{

margin:0;

padding:0;

}

.gradientCont{

background: linear-gradient(to right, #ff416c, #ff4b2b);

width:100%;

height: 300px;

}

.mainCont{

width:1000px;

margin: 0 auto;

}

.mainCont h2{

display: inline-block;

width: 100%;

text-align: center;

font-weight: 300;

font-size: 48px;

margin: 60px 0 0 0;

color: white;

opacity: 0;

animation: fadeInAnimation 1s ease-in-out 0s forwards;

}

.mainCont h3{

text-align: center;

font-weight: 400;

font-size: 18px;

color: rgba(255,255,255,0.75);

margin: 0 0 60px 0;

opacity: 0;

animation: fadeInAnimation 1s ease-in-out 0.5s forwards;

}

.terminalCont{

background: black;

width: 100%;

border-radius: 4px;

padding:12px 0 0 0;

margin-top: -20px;

font-family: 'Roboto Mono', monospace;

opacity: 0;

animation:

slideDownAnimation 1s ease-in-out 1s forwards,

fadeInAnimation 0.8s ease-in-out 1s forwards;

}

.userEnteredText{

color: rgba(255,255,255,0.5);

margin: 0;

padding: 0;

display: inline-block;

}

#terminalReslutsCont{

width:100%;

height: 400px;

padding: 12px;

overflow-y: auto;

resize: none;

border: none;

font-size: 14px;

line-height: 28px;

display: block;

color: rgba(255,255,255,0.9);

}

#terminalReslutsCont a{

color: rgba(255,255,255,0.9);

text-decoration: none;

}

#terminalReslutsCont a:hover{

text-decoration: underline;

}

#terminalTextInput{

background: black;

display: block;

border: none;

border-top: 1px solid rgba(255,255,255,0.2);

border-radius: 0 0 4px 4px;

width: 100%;

color: white;

padding: 18px;

font-size: 14px;

outline: none;

font-family: 'Roboto Mono', monospace;

}

@-webkit-keyframes fadeInAnimation {

0% { opacity: 0; }

100% { opacity: 1; }

}

@-moz-keyframes fadeInAnimation {

0% { opacity: 0; }

100% { opacity: 1; }

}

@-o-keyframes fadeInAnimation {

0% { opacity: 0; }

100% { opacity: 1; }

}

@keyframes fadeInAnimation {

0% { opacity: 0; }

100% { opacity: 1; }

}

@-webkit-keyframes slideDownAnimation {

0% { margin-top: -20px;}

100% { margin-top: 0;}

}

@-moz-keyframes slideDownAnimation {

0% { margin-top: -20px;}

100% { margin-top: 0;}

}

@-o-keyframes slideDownAnimation {

0% { margin-top: -20px;}

100% { margin-top: 0;}

}

@keyframes slideDownAnimation {

0% { margin-top: -20px;}

100% { margin-top: 0;}

}

@media screen and (max-width: 1000px){

.gradientCont{

height: 220px;

}

.mainCont{

width: 100%;

padding: 0 12px;

}

.mainCont h2{

font-size: 32px;

margin: 40px 0 0 0;

}

.mainCont h3{

font-size: 16px;

margin: 0 0 40px 0;

}

#terminalReslutsCont{

height: 100px;

}

function.js

The final step, create a JavaScript file named ‘function.js‘ and put the codes.

document.addEventListener('DOMContentLoaded', function() {

  document.getElementsByTagName('form')[0].onsubmit = function(evt) {
    evt.preventDefault(); // Preventing the form from submitting
    checkWord(); // Do your magic and check the entered word/sentence
    window.scrollTo(0,150);
  }

  // Get the focus to the text input to enter a word right away.
  document.getElementById('terminalTextInput').focus();

  // Getting the text from the input
  var textInputValue = document.getElementById('terminalTextInput').value.trim();

  //Getting the text from the results div
  var textResultsValue = document.getElementById('terminalReslutsCont').innerHTML;

  // Clear text input
  var clearInput = function(){
    document.getElementById('terminalTextInput').value = "";
  }

  // Scrtoll to the bottom of the results div
  var scrollToBottomOfResults = function(){
    var terminalResultsDiv = document.getElementById('terminalReslutsCont');
    terminalResultsDiv.scrollTop = terminalResultsDiv.scrollHeight;
  }

  // Scroll to the bottom of the results
  scrollToBottomOfResults();

  // Add text to the results div
  var addTextToResults = function(textToAdd){
    document.getElementById('terminalReslutsCont').innerHTML += "<p>" + textToAdd + "</p>";
    scrollToBottomOfResults();
  }

  // Getting the list of keywords for help & posting it to the screen
  var postHelpList = function(){
    // Array of all the help keywords
    var helpKeyWords = [
      "- Open + website URL to open it in the browser (ex. open webdevtrick.com)",
      "- Google + keyword to search directly in Google (ex. google web development)",
      "- YouTube + keyword to search directly in YouTube (ex. Technical Freaks)",
      "- Wiki + keyword to search directly in Wikipedia (ex. wiki numbers)",
      "- 'Time' will display the current time.",
      "- 'Date' will display the current date.",
      "- 'tech' will make you expert by watching videos",
      "* There are more keywords that you have to discover by yourself."
    ].join('<br>');
    addTextToResults(helpKeyWords);
  }

  // Getting the time and date and post it depending on what you request for
  var getTimeAndDate = function(postTimeDay){
    var timeAndDate = new Date();
    var timeHours = timeAndDate.getHours();
    var timeMinutes = timeAndDate.getMinutes();
    var dateDay = timeAndDate.getDate();
    console.log(dateDay);
    var dateMonth = timeAndDate.getMonth() + 1; // Because JS starts counting months from 0
    var dateYear = timeAndDate.getFullYear(); // Otherwise we'll get the count like 98,99,100,101...etc.

    if (timeHours < 10){ // if 1 number display 0 before it.
      timeHours = "0" + timeHours;
    }

    if (timeMinutes < 10){ // if 1 number display 0 before it.
      timeMinutes = "0" + timeMinutes;
    }

    var currentTime = timeHours + ":" + timeMinutes;
    var currentDate = dateDay + "/" + dateMonth + "/" + dateYear;

    if (postTimeDay == "time"){
      addTextToResults(currentTime);
    }
    if (postTimeDay == "date"){
      addTextToResults(currentDate);
    }
  }

  // Opening links in a new window
  var openLinkInNewWindow = function(linkToOpen){
    window.open(linkToOpen, '_blank');
    clearInput();
  }

  // Having a specific text reply to specific strings
  var textReplies = function() {
    switch(textInputValueLowerCase){
      // replies
      case "code":
        clearInput();
        addTextToResults("Get web elements source code at <a target='_blank' href='https://webdevtrick.com'>WebDevTrick</a>");
        break;

      case "founder":
        clearInput();
        addTextToResults("Webdevtrick's founder is Shaan");
        break;

      case "shaan":
        clearInput();
        addTextToResults("Shaan is founder of this blog and he is a Developer, SEO, and Graphic Designer");
        break;

      case "i love you":
      case "love you":
      case "love":
        clearInput();
        addTextToResults("Aww! Love you too ❤");
        break;

      case "web development":
      case "web dev":
      case "webdevelopment":
        clearInput();
        addTextToResults('Web development examples!');
        openLinkInNewWindow('https://webdevtrick.com/web-development/');
        break;

      case "hello":
      case "hi":
      case "hola":
        clearInput();
        addTextToResults("Hello, I am your assistant... I am based on pure JavaScript.");
        break;

      case "what the":
      case "wtf":
        clearInput();
        addTextToResults("F***.");
        break;

      case "shit":
      case "poop":
      case "💩":
        clearInput();
        addTextToResults("💩");
        break;

      case "tech":
      case "technology":
        addTextToResults("Okay I'll show you some in YouTube.");
        openLinkInNewWindow('https://www.youtube.com/c/TechnicalFreaks');
        break;


      // replies 

      case "youtube":
        clearInput();
        addTextToResults("Type youtube + something to search for.");
        break;

      case "google":
        clearInput();
        addTextToResults("Type google + something to search for.");
        break;

        case "wiki":
        case "wikipedia":
          clearInput();
          addTextToResults("Type wiki + something to search for.");
          break;  

      case "time":
        clearInput();
        getTimeAndDate("time");
        break;

      case "date":
        clearInput();
        getTimeAndDate("date");
        break;

      case "help":
      case "?":
        clearInput();
        postHelpList();
        break;

      default:
      clearInput();
      addTextToResults("<p><i>The command " + "<b>" + textInputValue + "</b>" + " was not found. Type <b>Help</b> to see all commands.</i></p>");
      break;
    }
  }

// Main function to check the entered text and assign it to the correct function
  var checkWord = function() {
    textInputValue = document.getElementById('terminalTextInput').value.trim(); //get the text from the text input to a variable
    textInputValueLowerCase = textInputValue.toLowerCase(); //get the lower case of the string

    if (textInputValue != ""){ //checking if text was entered
      addTextToResults("<p class='userEnteredText'>> " + textInputValue + "</p>");
      if (textInputValueLowerCase.substr(0,5) == "open ") { //if the first 5 characters = open + space
        openLinkInNewWindow('http://' + textInputValueLowerCase.substr(5));
        addTextToResults("<i>The URL " + "<b>" + textInputValue.substr(5) + "</b>" + " should be opened now.</i>");
      } else if (textInputValueLowerCase.substr(0,8) == "youtube ") {
        openLinkInNewWindow('https://www.youtube.com/results?search_query=' + textInputValueLowerCase.substr(8));
        addTextToResults("<i>I've searched on YouTube for " + "<b>" + textInputValue.substr(8) + "</b>" + " it should be opened now.</i>");
      } else if (textInputValueLowerCase.substr(0,7) == "google ") {
        openLinkInNewWindow('https://www.google.com/search?q=' + textInputValueLowerCase.substr(7));
        addTextToResults("<i>I've searched on Google for " + "<b>" + textInputValue.substr(7) + "</b>" + " it should be opened now.</i>");
      } else if (textInputValueLowerCase.substr(0,5) == "wiki "){
        openLinkInNewWindow('https://wikipedia.org/w/index.php?search=' + textInputValueLowerCase.substr(5));
        addTextToResults("<i>I've searched on Wikipedia for " + "<b>" + textInputValue.substr(5) + "</b>" + " it should be opened now.</i>");
      } else{
        textReplies();
      }
    }
  };

});

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

document.addEventListener('DOMContentLoaded', function() {

document.getElementsByTagName('form')[0].onsubmit = function(evt) {

evt.preventDefault(); // Preventing the form from submitting

checkWord(); // Do your magic and check the entered word/sentence

window.scrollTo(0,150);

}

// Get the focus to the text input to enter a word right away.

document.getElementById('terminalTextInput').focus();

// Getting the text from the input

var textInputValue = document.getElementById('terminalTextInput').value.trim();

//Getting the text from the results div

var textResultsValue = document.getElementById('terminalReslutsCont').innerHTML;

// Clear text input

var clearInput = function(){

document.getElementById('terminalTextInput').value = "";

}

// Scrtoll to the bottom of the results div

var scrollToBottomOfResults = function(){

var terminalResultsDiv = document.getElementById('terminalReslutsCont');

terminalResultsDiv.scrollTop = terminalResultsDiv.scrollHeight;

}

// Scroll to the bottom of the results

scrollToBottomOfResults();

// Add text to the results div

var addTextToResults = function(textToAdd){

document.getElementById('terminalReslutsCont').innerHTML += "<p>" + textToAdd + "</p>";

scrollToBottomOfResults();

}

// Getting the list of keywords for help & posting it to the screen

var postHelpList = function(){

// Array of all the help keywords

var helpKeyWords = [

"- Open + website URL to open it in the browser (ex. open webdevtrick.com)",

"- Google + keyword to search directly in Google (ex. google web development)",

"- YouTube + keyword to search directly in YouTube (ex. Technical Freaks)",

"- Wiki + keyword to search directly in Wikipedia (ex. wiki numbers)",

"- 'Time' will display the current time.",

"- 'Date' will display the current date.",

"- 'tech' will make you expert by watching videos",

"* There are more keywords that you have to discover by yourself."

].join('<br>');

addTextToResults(helpKeyWords);

}

// Getting the time and date and post it depending on what you request for

var getTimeAndDate = function(postTimeDay){

var timeAndDate = new Date();

var timeHours = timeAndDate.getHours();

var timeMinutes = timeAndDate.getMinutes();

var dateDay = timeAndDate.getDate();

console.log(dateDay);

var dateMonth = timeAndDate.getMonth() + 1; // Because JS starts counting months from 0

var dateYear = timeAndDate.getFullYear(); // Otherwise we'll get the count like 98,99,100,101...etc.

if (timeHours < 10){ // if 1 number display 0 before it.

timeHours = "0" + timeHours;

}

if (timeMinutes < 10){ // if 1 number display 0 before it.

timeMinutes = "0" + timeMinutes;

}

var currentTime = timeHours + ":" + timeMinutes;

var currentDate = dateDay + "/" + dateMonth + "/" + dateYear;

if (postTimeDay == "time"){

addTextToResults(currentTime);

}

if (postTimeDay == "date"){

addTextToResults(currentDate);

}

// Opening links in a new window

var openLinkInNewWindow = function(linkToOpen){

window.open(linkToOpen, '_blank');

clearInput();

}

// Having a specific text reply to specific strings

var textReplies = function() {

switch(textInputValueLowerCase){

// replies

case "code":

clearInput();

addTextToResults("Get web elements source code at <a target='_blank' href='https://webdevtrick.com'>WebDevTrick</a>");

break;

case "founder":

clearInput();

addTextToResults("Webdevtrick's founder is Shaan");

break;

case "shaan":

clearInput();

addTextToResults("Shaan is founder of this blog and he is a Developer, SEO, and Graphic Designer");

break;

case "i love you":

case "love you":

case "love":

clearInput();

addTextToResults("Aww! Love you too ❤");

break;

case "web development":

case "web dev":

case "webdevelopment":

clearInput();

addTextToResults('Web development examples!');

openLinkInNewWindow('https://webdevtrick.com/web-development/');

break;

case "hello":

case "hi":

case "hola":

clearInput();

addTextToResults("Hello, I am your assistant... I am based on pure JavaScript.");

break;

case "what the":

case "wtf":

clearInput();

addTextToResults("F***.");

break;

case "shit":

case "poop":

case "💩":

clearInput();

addTextToResults("💩");

break;

case "tech":

case "technology":

addTextToResults("Okay I'll show you some in YouTube.");

openLinkInNewWindow('https://www.youtube.com/c/TechnicalFreaks');

break;

// replies

case "youtube":

clearInput();

addTextToResults("Type youtube + something to search for.");

break;

case "google":

clearInput();

addTextToResults("Type google + something to search for.");

break;

case "wiki":

case "wikipedia":

clearInput();

addTextToResults("Type wiki + something to search for.");

break;

case "time":

clearInput();

getTimeAndDate("time");

break;

case "date":

clearInput();

getTimeAndDate("date");

break;

case "help":

case "?":

clearInput();

postHelpList();

break;

default:

clearInput();

addTextToResults("<p><i>The command " + "<b>" + textInputValue + "</b>" + " was not found. Type <b>Help</b> to see all commands.</i></p>");

break;

}

// Main function to check the entered text and assign it to the correct function

var checkWord = function() {

textInputValue = document.getElementById('terminalTextInput').value.trim(); //get the text from the text input to a variable

textInputValueLowerCase = textInputValue.toLowerCase(); //get the lower case of the string

if (textInputValue != ""){ //checking if text was entered

addTextToResults("<p class='userEnteredText'>> " + textInputValue + "</p>");

if (textInputValueLowerCase.substr(0,5) == "open ") { //if the first 5 characters = open + space

openLinkInNewWindow('http://' + textInputValueLowerCase.substr(5));

addTextToResults("<i>The URL " + "<b>" + textInputValue.substr(5) + "</b>" + " should be opened now.</i>");

} else if (textInputValueLowerCase.substr(0,8) == "youtube ") {

openLinkInNewWindow('https://www.youtube.com/results?search_query=' + textInputValueLowerCase.substr(8));

addTextToResults("<i>I've searched on YouTube for " + "<b>" + textInputValue.substr(8) + "</b>" + " it should be opened now.</i>");

} else if (textInputValueLowerCase.substr(0,7) == "google ") {

openLinkInNewWindow('https://www.google.com/search?q=' + textInputValueLowerCase.substr(7));

addTextToResults("<i>I've searched on Google for " + "<b>" + textInputValue.substr(7) + "</b>" + " it should be opened now.</i>");

} else if (textInputValueLowerCase.substr(0,5) == "wiki "){

openLinkInNewWindow('https://wikipedia.org/w/index.php?search=' + textInputValueLowerCase.substr(5));

addTextToResults("<i>I've searched on Wikipedia for " + "<b>" + textInputValue.substr(5) + "</b>" + " it should be opened now.</i>");

} else{

textReplies();

}

};

});

That’s It. Now you have successfully created JavaScript Terminal Emulator Program, Pure JS Web Based Terminal. If you have any doubt or question comment down below.

Thanks For Visiting, Keep Visiting.

2 COMMENTS

Niko Ivanov September 23, 2020 At 3:26 pm

Can i make this like an exe file , if so please tell how . P.S Great content man 😉

Reply
Subha Karmakar February 23, 2021 At 8:23 am

how to insert the Bengali language? Please help me.

Reply

JavaScript Terminal Emulator Program | Pure JS Web Based Terminal

Preview Of Pure JS Web Based Terminal

JavaScript Terminal Emulator Source Code

2 COMMENTS

LEAVE A REPLY Cancel reply

EVEN MORE NEWS

Free PHP, HTML, CSS, JavaScript/TypeScript editor – CodeLobster IDE

Unique Uses for Blockchain Technology

JavaScript Progress Clock | Day, Hour, Minute, Second, Progression

POPULAR CATEGORY