Console/terminal like faux input

Strange
Casual Poster ⚓︎

Another voice reeled in the net
⛺︎ My Room

Guild Memberships:

Artifacts:

Console/terminal like faux input

« on: March 17, 2026 @905.46 »

Heya folks, kinda new here, but looking for advise/tips on how I could do something.

Specfically looking for a way to have my website capture keystrokes and have them appear on screen in a fake console/command line interface.

The idea is to have a user input a few letters to spell a word, then hit enter or click a button and it takes you to the relevant page.

so like:

Code

PLEASE INPUT PAGE TO RECALL:
PAGE(1)/PAGE(2)/LIST ALL (LINKS)/(ABOUT) ME

>_

Then you'd input say "1" and press enter, or "LINKS" and press enter and it would take you too that page.
I'm doing my own research as well, but any similar ideas or directions too look might be helpful!

Fanks!

EDIT1:
OH! I should probably say, I don't want to use Javascript for this if its possible. It just feels like I have to rely on code I dont know and outside resources.
I'd settle for a very simple solution, if I could get the look right


« Last Edit: March 17, 2026 @934.88 by Strange »	Logged

Dan Q
Hero Member ⚓︎

I have no idea what I am doing
⛺︎ My Room
RSS:

Guild Memberships:

Re: Console/terminal like faux input

« Reply #1 on: March 18, 2026 @473.75 »

Okay, there are two parts to this problem. Let's tackle them both indepdendently:

Part 1: looking like a terminal

You can absolutely pull this off with just HTML + CSS. Monospaced fonts, text-transform: uppercase, a little bit of layout, and creative use of an <input type="text"> or a <textarea> for the bit the user can type into will do it. You can even use e.g. a <datalist> to help "hint" the valid commands and allow "autocomplete".

I've thrown you together a CodePen to demonstrate how I'd start with it. For completeness, here's the code I wrote -

Relevant HTML:

Code

<!DOCTYPE html>
  <body>
    <main>
      <!-- here's the output and input; you can have as many as
           you like (but you probably only want one input!);
           note lack of indentation: WHITE SPACE MATTERS here! -->
      <output>You have logged in.

Please input page to recall:
Page(1)/Page(2)/List all (links)/(About) Me
      </output>
      <div id="prompt-wrapper">
        <input focus type="text" id="prompt" aria-label="Your command" list="valid-commands" placeholder="type your command here">
      </div>

      <!-- this bit makes "autocomplete" work! -->
      <datalist id="valid-commands">
        <option value="1"></option>
        <option value="2"></option>
        <option value="LINKS"></option>
        <option value="ABOUT"></option>
      </datalist>
    </main>
  </body>

CSS:

Code

* {
  box-sizing: border-box;
}

body {
  background: #ddd;
  color: #ddd;
  font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
font-weight: normal;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

main {
  display: flex;
  flex-direction: column;
  gap: 1em;
  width: 100%;
  max-width: 480px;
  min-height: 360px;
  background: #000;
  border: 8px solid #000;
  text-transform: uppercase;
}

output {
  white-space: pre;
}

#prompt-wrapper {
  display: flex;
  &::before {
    content: '>';
    padding-right: 1em;
  }
}

#prompt {
  font: inherit;
  background: inherit;
  color: inherit;
  border: none;
  text-transform: inherit;
  width: 100%;

  &:focus {
    outline: none; /* this is bad for accessibility, but good for your design!? */
  }
}

Part 2: navigation

Pulling off navigation when the user enters something... that's a bit tougher. As far as I can see, you have two options:

1. Do it server side - wrap the <input> in a <form> which submits to a program running on your server (e.g. PHP code), which interprets what the user asked for and returns or redirects-to the relevant "next page", or something more-exotic (e.g. sending back JS that extends the existing page by removing the <input> and adding more <output>. This is a great approach... if you've got the ability to write server-side code like PHP on your server (often, free/cheap hosting doesn't allow this).

2. Do it in JS - I know you were trying to avoid this, but I can't see any other way to do a client-side translation from "what the user types onto the page" into "what page they go to next". I can keep thinking about it to see if I can find an "arcane" way (something to do with CSS [value=...] selectors, maybe?), but JS might be your easiest route. You'd probably be looking at either detecting [enter] in the input (or else wrapping it in a form and detecting the submit event) and then doing something with the value in the input.

Here's how I'd do it in JS: I'd have pages called things like 1.html, links.html, about.html, and my JS would take what you type in, put '.html' on the end of it, and attempt to fetch(...) it. If it's successful, it can either redirect to that URL or, better, just replace the contents of the page and update the address bar. If it 404s, it can output "invalid command, try again" or something. This approach means that you can even have e.g. secret pages where the command you need to type isn't obvious! It also minimises the amount of JS you have to deliver (e.g. you don't need to maintain a "list" of valid pages: you can just add new pages and they Just Work.)

I hope that provides a starting point. Shout if you want any help with any of the PHP or JS I've suggested.


	Logged

Artifact Swap:

Dan Q
Hero Member ⚓︎

I have no idea what I am doing
⛺︎ My Room
RSS:

Guild Memberships:

Re: Console/terminal like faux input

« Reply #2 on: March 18, 2026 @475.52 »

Wow, I just looked at your site and you're already 90% of the way there (it looks kickass, BTW!). You definitely don't need my help with the design! So I'm guessing you're focussed on the "typing" interactivity, right? (For which, yeah, you're almost certainly going to need a server side language or JS...)


	Logged

Artifact Swap:

Dan Q
Hero Member ⚓︎

I have no idea what I am doing
⛺︎ My Room
RSS:

Guild Memberships:

Re: Console/terminal like faux input

« Reply #3 on: March 18, 2026 @506.83 »

Okay! Given that you've already got an amazing-looking site and all you're in need of is the navigation element, I've made a first pass at some JavaScript that would do what you're looking for.

It uses your existing structure: that is, it assumes that pages will contain a <h3> full of <a> (links) at the bottom. The JS code finds the last <h3> on the page to have links in it, and assumes that this is the "list of valid links". Then it replaces that list of links with a place where the user can type. If they type something that matches one of the links and press enter, it navigates them to it. If they type anything else, it shows an error message.

I've done no work at all to style the new element, but my previous post might provide some ideas on making the input box look a little more like a terminal. (Though frankly, I don't think there's anything I can teach you about that - again, your site's gorgeous.)

Okay, here's the code:

Code

(function(){ // this is an IIFE - it helps isolate this JS from any other JS on the page

// Get the LAST <h3> tag that contains <a>s (links)
const linksAreaCondidates = document.querySelectorAll('h3:has(a)');
const linksArea = linksAreaCondidates[linksAreaCondidates.length - 1];

// If we didn't find a linksArea, don't do anything (maybe there isn't one on this page?):
if (!linksArea) {
  return;
}

// Enumerate all the links in to `linksData`, collecting their destinations and text:
const links = linksArea.querySelectorAll('a');
const linksData = [];
for (const link of links) {
  linksData.push({
    destination: link.href,
    // Tidy the text down to only alphanumeric characters and store lowercase:
    text: link.textContent.toLowerCase().replace(/[^a-z0-9]/g, ''),
  });
}

// Replace the linksArea with an <input> in a <form> where the user can TYPE one of the links.
// Attach a <datalist> to help make autocomplete make sense.
const form = document.createElement('form');
const input = document.createElement('input');
input.type = 'text';
input.placeholder = 'Type a link here...';
input.list = 'link-datalist';
form.appendChild(input);
// Add a <datalist> to help prompt the user to type something valid:
const datalist = document.createElement('datalist');
datalist.id = 'link-datalist';
for (const link of linksData) {
  const option = document.createElement('option');
  option.value = link.text.toUpperCase(); // display suggestions in uppercase
  datalist.appendChild(option);
}
form.appendChild(datalist);
linksArea.replaceWith(form);

// When the new form is submitted, attempt to navigate to the selected link:
form.addEventListener('submit', (event) => {
  event.preventDefault(); // don't ACTUALLY submit the form; it's all JS here!
  // Convert what they typed to lowercase (to match what we set up above):
  const inputValue = input.value;
  // Try to find a link that matches:
  const link = linksData.find(link => link.text === inputValue);
  if (!link) {
    alert('Command not found.'); // Show an error. This could be prettier!
    return; // Don't carry on!
  }
  // If we got this far, the user has typed a valid command. Navigate to the destination:
  window.location.href = link.destination;
});

})(); // this is the end of the IIFE

If you want to try out the code, just go to a page on your website (e.g. https://wildcardradio.neocities.org/main), open your web browser's debugger (often F12, or you can use Inspect Element), which to the Console tab in the debugger, and paste the code above into it. This will make it run once, without actually changing your site, so you can see what I mean.

If you want to add it (or something based on it) to your website, put the code above into a file on your website called e.g. navigation.js, and then add <script src="/navigation.js"></script> to every page that you want to exhibit this functionality.

A reason I like this approach is that your navigation still works even if JS fails or is disabled. Without JavaScript, users will just see your regular links. If the JS runs, the regular links get replaced with the input box and its functionality.

And as always: if you've got questions I'm available to help!


	Logged

Artifact Swap:

Strange
Casual Poster ⚓︎

Another voice reeled in the net
⛺︎ My Room

Guild Memberships:

Artifacts:

Re: Console/terminal like faux input

« Reply #4 on: March 18, 2026 @699.87 »

Just wanted to say thank you so much for you help! Im looking over all this now and will take the time to figure it all out.
Just didn't want to leave this without a reply.

Brb gonna learn what you said


	Logged

Strange
Casual Poster ⚓︎

Another voice reeled in the net
⛺︎ My Room

Guild Memberships:

Artifacts:

Re: Console/terminal like faux input

« Reply #5 on: March 18, 2026 @775.39 »

Quote from: Dan Q on March 18, 2026 @506.83

It uses your existing structure: that is, it assumes that pages will contain a <h3> full of <a> (links) at the bottom. The JS code finds the last <h3> Then it replaces that list of links with a place where the user can type.

Ok, so I understand it'll look for <h3><a> code and replace those sections, but if there are other links/H3's on the page will that effect it? As I'm tying to post "hidden" (but obviously) links in text to move to other sections. Though I suppose those keywords could also be page unique and still work as a command (or an <a> link as a fallback as you say)

Quote from: Dan Q on March 18, 2026 @506.83

A reason I like this approach is that your navigation still works even if JS fails or is disabled. Without JavaScript, users will just see your regular links. If the JS runs, the regular links get replaced with the input box and its functionality.

I do love it for this! Such a neat idea. I'm hesitant to use JS as its just something I do not know yet. Like heck Im not even sure how you insert it into a site, its the <script> tag right?
I'm still very new to HTML and CSS already, so I'm just cautious to overload myself or distract myself too much.

BUT with that said, if it works and I can get it too look like I feel it should, then maybe its ok just to pop it in for the moment and come back to the how later?

Either way more info, even if its brief, would be helpful!

I'm gonna look at other routes, see if there's another work around, even if its janky, just to see if I can keep it in html/css

Quote from: Dan Q on March 18, 2026 @475.52

Wow, I just looked at your site and you're already 90% of the way there (it looks kickass, BTW!)

Thank you so much! Very kind! I'm partly focused on the typing bit. But there are still bits like the way the scanline overlay doesnt stretch correctly on some window sizes, I need to figure out.

I actually forgot to update the main page with a placeholder, as its got a lot I need to put up and it avoids people seeing deadlinks. (I guess Im a little embarrassed to show incomplete work)

thank you again for all your help!


	Logged

Strange
Casual Poster ⚓︎

Another voice reeled in the net
⛺︎ My Room

Guild Memberships:

Artifacts:

Re: Console/terminal like faux input

« Reply #6 on: March 18, 2026 @788.89 »

OK, so gave that a go. I kinda think I see what some of it is doing? But again JS is so alien to me...

Eitherway, I can't seem to get it to work. Ive put it up on my neo site on a test page (MainTEST) but it doesnt seem work? It worked when I was using the console (on waterfox). But Im unsure at which point its not working and Im not sure what to look for on the debugger?

I may be in a little over my head here...


	Logged

Dan Q
Hero Member ⚓︎

I have no idea what I am doing
⛺︎ My Room
RSS:

Guild Memberships:

Re: Console/terminal like faux input

« Reply #7 on: March 18, 2026 @790.98 »

Quote from: Strange on March 18, 2026 @775.39

Ok, so I understand it'll look for <h3><a> code and replace those sections, but if there are other links/H3's on the page will that effect it? As I'm tying to post "hidden" (but obviously) links in text to move to other sections. Though I suppose those keywords could also be page unique and still work as a command (or an <a> link as a fallback as you say)

It looks for the LAST <h3> that contains <a>s. If there are multiple <h3>s and only one contains <a>s, that's the one it uses. If there are multiple <h3>s and several contain <a>s, it only uses the last <h3>.

All <a>s within the <h3> it selects are considered valid links.

(You could, of course, add "hidden" links to that <h3> by just hiding the links e.g. <a src="..." style="display: none;">...[/url].)

Quote from: Strange on March 18, 2026 @775.39

I do love it for this! Such a neat idea. I'm hesitant to use JS as its just something I do not know yet. Like heck Im not even sure how you insert it into a site, its the <script> tag right?

I'm still very new to HTML and CSS already, so I'm just cautious to overload myself or distract myself too much.

That's a valid concern, and I personally think that too many new developers install and use JavaScript (or CSS, or HTML) that they don't understand, and then get themselves into trouble.

Which was another consideration I had: it's progressive enhancement! If you remove it, you just fall back to your existing functionality, so you never end up "depending" on it. If it breaks, you throw it away and get back what you had before (if you're not up to repairing it!)

That said, I've tried to add reasonable comments to help you use it as a learning example.

Oh, and in hindsight I see that you don't always but the <a>s in a <h3>. From a semantics perspective, it's probably better to put your <a>s in a <nav> (and then use CSS to make the text in a <nav> bigger). That'd also make the JS simpler: instead of finding all the <h3>s that have <a>s in and selecting the last one... it could just find the <nav> (assuming you only had one <nav> per page!)


	Logged

Artifact Swap:

Dan Q
Hero Member ⚓︎

I have no idea what I am doing
⛺︎ My Room
RSS:

Guild Memberships:

Re: Console/terminal like faux input

« Reply #8 on: March 18, 2026 @793.32 »

Quote from: Strange on March 18, 2026 @788.89

OK, so gave that a go. I kinda think I see what some of it is doing? But again JS is so alien to me...

Eitherway, I can't seem to get it to work. Ive put it up on my neo site on a test page (MainTEST) but it doesnt seem work? It worked when I was using the console (on waterfox). But Im unsure at which point its not working and Im not sure what to look for on the debugger?

I may be in a little over my head here...

Ah! Sorry, the fault is mine!

If you're just going to put <script src="/navigation.js"></script> into the page, it has to be after the links section. By default, JavaScripts run where you put them in the page, and at that point in the page... there isn't a <h3> with <a>s (that gets added later).

So there's three solutions. Pick your favourite.

1. Move the <script src="/navigation.js"></script> down to just before the </body>.
2. Change the script to <script src="/navigation.js" defer></script> which tells it to "defer" running until the page finishes loading.
3. Add JS code to tell the function not to run until the page finishes loading.

Option 1 and 2 are easiest. Do one of those!


	Logged

Artifact Swap:

Strange
Casual Poster ⚓︎

Another voice reeled in the net
⛺︎ My Room

Guild Memberships:

Artifacts:

Re: Console/terminal like faux input

« Reply #9 on: March 18, 2026 @883.53 »

Perfect thank you! That works! And good to know about where scripts need to go. Now gonna play around with style


	Logged

Strange
Casual Poster ⚓︎

Another voice reeled in the net
⛺︎ My Room

Guild Memberships:

Artifacts:

Re: Console/terminal like faux input

« Reply #10 on: March 18, 2026 @899.40 »

Quote from: Dan Q on March 18, 2026 @506.83

Okay, here's the code: (CODE STUFF)

Ok so I have a few questions:
1.As the text box is now produced via JS, how do I "target" it in terms of changing its style? Is that something I can still do with CSS or does it have to be done in the script?

2. If I change line 19

Code

text: link.textContent.toLowerCase().replace(/[^a-z0-9]/g, ''),

and replace a-z with A-Z will that make it all capitals? As the text right now is all caps I think the user incentive is to mirror it and do it in capitals.

3. The Auto complete doesn't seem to function? or was that only part of the original html/css style and not in the JS? (i.e. if I use the other html code I could make that work?)

EDIT:
4. Also instead of looking for h3:(a) can we get it to look for and id? and wrap the links in a div container?
like:

Code

 <div id=navigation> (LINKS HERE) </div>

Though I guess maybe thats what the <nav> container is for instead right? So yeah I guess using that might work better.


« Last Edit: March 18, 2026 @938.26 by Strange »	Logged

Dan Q
Hero Member ⚓︎

I have no idea what I am doing
⛺︎ My Room
RSS:

Guild Memberships:

Re: Console/terminal like faux input

« Reply #11 on: March 19, 2026 @350.75 »

Quote from: Strange on March 18, 2026 @899.40

1.As the text box is now produced via JS, how do I "target" it in terms of changing its style? Is that something I can still do with CSS or does it have to be done in the script?

100% you can still do it with CSS! You see the JS lines that say things like:

Code

input.type = 'text';
input.placeholder = 'Type a link here...';
input.list = 'link-datalist';

Those lines are setting the attributes on the <input>, resulting in <input type="text" placeholder="Type a link here..." list="link-datalist">. If you want other attributes to help you target it, like an id or class, you can add those too. The syntax you need is:

Code

input.id = 'my-id-goes-here'; // for CSS like #my-id-goes-here { ... }
input.className = 'my-class-goes-here'; // for CSS like .my-class-goes-here { ... }

Quote from: Strange on March 18, 2026 @899.40

2. If I change line 19 text: link.textContent.toLowerCase().replace(/[^a-z0-9]/g, ''), and replace a-z with A-Z will that make it all capitals?

You've found one of the most-complicated bits of code. Here's what it's doing:

- `link` is the hyperlink that's having its information extracted from it
- `.textContent` gets the text of that link, e.g. the word "AUDIO_"
- `.toLowerCase()` transforms it to lowercase, e.g. "audio_"
- `.replace()` further transforms the string, replacing every character [...] that is not ^ a-z or 0-9 with nothing ''. This removes the _ from the end of the links, making them e.g. "audio"

Note that all this refers to is the internal representation of the link. It's sort-of constructing a table that maps words (audio) to URLS (audio.html). Later, when somebody types something in, it converts THAT to lowercase as well, then looks it up in the table.

So while you could switch it to uppercase here (by swapping .toLowerCase() for .toUpperCase()), you'd also need to change it in the other place we call .toLowerCase(). Aaand... I don't think it'd do what you're trying to do.

I think what you're trying to do is make the text LOOK uppercase when the user types it, right? For that, you want CSS! The directive you're looking for is text-transform: uppercase;

Quote from: Strange on March 18, 2026 @899.40

3. The Auto complete doesn't seem to function?

So it doesn't! I'm not entirely sure why. The line input.list = 'link-datalist'; SHOULD, I would expect, add the list="link-datalist" attribute to the <input>, but it isn't. Let me have a think...

Quote from: Strange on March 18, 2026 @899.40

4. Also instead of looking for h3:(a) can we get it to look for and id? and wrap the links in a div container?

Absolutely you can! If you had your links in a <div id="navigation"> then you'd want to change the line:

Code

const linksAreaCondidates = document.querySelectorAll('h3:has(a)');

That bit at the end h3:has(a) is a CSS selector to describe what to look for to find where the links are. So right now it says "<h3>s that have <a>s in them" (in case it finds several matching <h3>s, the next line cuts them down to just the last one). You could easily change that to #navigation:has(a) which means "things with the id 'navigation' which contain <a>s", or just to #navigation which means "the thing with id 'navigation'. It's just CSS!

If you use a nav, then just use nav instead of #navigation.

Hope that helps for now. I'll try to work out why the <datalist> isn't getting hooked-up!


	Logged

Artifact Swap:

Dan Q
Hero Member ⚓︎

I have no idea what I am doing
⛺︎ My Room
RSS:

Guild Memberships:

Re: Console/terminal like faux input

« Reply #12 on: March 19, 2026 @352.56 »

Quote from: Dan Q on March 19, 2026 @350.75

Hope that helps for now. I'll try to work out why the <datalist> isn't getting hooked-up!

Got it! It turns out 'list' is a special/protected keyword, so the change you need to make to fix autocomplete/suggest is to change

Code

input.list = 'list-datalist';

to:

Code

input.setAttribute('list', 'link-datalist');

Sorry about that!


	Logged

Artifact Swap:

Strange
Casual Poster ⚓︎

Another voice reeled in the net
⛺︎ My Room

Guild Memberships:

Artifacts:

Re: Console/terminal like faux input

« Reply #13 on: March 19, 2026 @777.19 »

Quote from: Dan Q on March 19, 2026 @352.56

Sorry about that!

Don't be sorry! We're working through this! Part of the fun is working out stuff and making it work! Things dont always work first time and they dont always work the way we want them too, but its bit by bit we make it work!

Again all this is for fun and our own entertainment, no pressure here. I appreciate you spending the time to go through stuff with me! It's (sadly) a rare thing these days, and its a wonderful counter to the old ideal of "Just google it".

Anyway Im gonna sit and go through it all, and see what I can do! I'm sure Ill have more questions, but again, thank you!


	Logged

Strange
Casual Poster ⚓︎

Another voice reeled in the net
⛺︎ My Room

Guild Memberships:

Artifacts:

Re: Console/terminal like faux input

« Reply #14 on: March 19, 2026 @801.33 »

Quote from: Dan Q on March 19, 2026 @350.75

100% you can still do it with CSS! You see the JS lines that say things like:

Ok perfect! That word nicely. Used an ID and then did it in CSS.

Quote from: Dan Q on March 19, 2026 @350.75

So while you could switch it to uppercase here (by swapping .toLowerCase() for .toUpperCase()), you'd also need to change it in the other place we call .toLowerCase(). Aaand... I don't think it'd do what you're trying to do.

So I'm trying to get it to be all caps, because
1. thats what the auto complete, completes as, so therefore if you hit enter with that it just says "Command not found." (typing it all lower case does work)
2. Its consistent with both the "prompts" written above.
I guess I COULD make the visual prompts lower case as well, as visually, ive put "entered" commands in the story as lowercase things.

Quote from: Dan Q on March 19, 2026 @350.75

Hope that helps for now. I'll try to work out why the <datalist> isn't getting hooked-up!

Works now with the suggestion you made in the next post! Thank you! :D

EDIT:
Oh and here's the live test page, just so you can see so far:
https://wildcardradio.neocities.org/MainTESTjs

EDIT2:

OK! I think I got the upper/lowercase thing working now, the suggestions are in uppercase, and clicking/tabing to accept them and then pressing enter works as expected. Gonna work on the style of it all now but, YAY! So happy this is working! Exciting!


« Last Edit: March 19, 2026 @829.62 by Strange »	Logged

Pages: [1]

« previous next »