CODEWITHSUNDEEP
javascripthtmlembed
Elias Garcia
Elias Garcia

Reputation: 7282

Best way to recreate a command interpreter inside HTML landing page?

I'm new to front-end web development and I'm trying to develop a landing page to post my biography, awards etc. I want to recreate the linux shell inside my website, where you can type some customized commands by me and interact with the page. I will be doing it in Javascript.

This is a sample of what I want to achieve: Javascript Embedded Interpreter

The problem is I don't know how can I embed this 'shell' inside my html page. I'm totally new tho this and I don't know where to start searching or what to search, so any help with resources, suggested readings etc. will be appreciated.

PS: I searched in Stack Overflow for some answers and i read that using load function from Jquery is the best solution to embed a second html file inside another. Is that suitable for what I want?

Thanks.

Upvotes: 0

Views: 245

Answers (1)

Tomir Rogi Szawok
Tomir Rogi Szawok

Reputation: 609

I believe you already know how to style this thing out, so just a few hints for you:

Make the whole console like it's just a normal div. Style it out, so you'll have classess to use as input, output, as blinking cursor with animation (if you like), then go on.

You can do it by checking focus and keypress with jquery, for example. For example - whenever user uses his keyboard, you check is it a non-enter ascii character, then add to console window text and to some kind of command buffer. If it is enter, then add a new line, parse buffer and write output. It's you choice to implement different commands. I'd prefer checking first word, then chose function vary on that word.

Good luck! If you don't have any experience, or it's too little, there are main thing that you'll need: https://api.jquery.com/keypress/

Upvotes: 3

Related Questions