• 0

JS-DOS: JavaScript Fake HTML DOS window

Asked by TonyLock,

 Share

Question

Veteran

TonyLock

Posted
Posted

Can someone help me with some JavaScript?

I'm working on a fake MS-DOS console. I've made most of the design so far but I need help with programming the prompts. Here's how I would like it to work:

post-15711-1247902882.gif

I've managed to restore the <blink> tag ;-) so that will help with an authentic look but ideally, I want the the user to be able to type anything in and his enter. When they do, a new line appears saying "Bad command or filename." and below that, the C:\> appears again and the user is able to continue to type stuff in. I would like to add commands like: "ver" or "dir" which shows some text as in the example above.

Here's the code so far, please copy/paste and try it out:

&lt;html&gt;
	&lt;head&gt;
		&lt;title&gt;JS-DOS&lt;/title&gt;
		&lt;meta http-equiv="Page-Enter" content="BlendTrans(Duration=0.25)" /&gt;
		&lt;meta http-equiv="Page-Exit" content="BlendTrans(Duration=0.25)" /&gt;
		&lt;link rel="shortcut icon" href="/dos/favicon.ico" /&gt;
		&lt;meta name="robots" content="noindex" /&gt;
		&lt;style type="text/css" media="all"&gt;
			BODY{
				BackGround:			Black;
				Color:				LightGrey;
				Font-Family:		Courier New, Courier;
				Font-Size:			12pt;
				Font-Weight:		Bold;
				Padding:			10px;
				Overflow:			Auto;
			}
			BLINK{
				Color:				LightGrey;
				Font-Size:			13pt;
			}
		&lt;/style&gt;
		&lt;script type="text/javascript"&gt;
		function Blink() {
		   for(i=0;i&lt;document.all.tags('blink').length;i  s=document.all.tags('blink];
			  s.style.visibility=(s.style.visibility=='visible')?'hidden':'visible';
		   }
		}
		setInterval('Blink()',500);
		&lt;/script&gt;
	&lt;/head&gt;
	&lt;body bgcolor="Black" scroll="Auto"&gt;
		C:\&gt;&lt;span id="Prompt"&gt;&lt;blink&gt;_&lt;/blink&gt;&lt;/span&gt;
	&lt;/body&gt;
&lt;/html&gt;

I've experimented with the following JS code but I've had litle success getting my dead around it:

		function ProcessKey(){
			var KeyID = event.keyCode;
			var Key = String.fromCharCode(KeyID);
			//document.getElementById("Prompt").innerText += Key;
			var _body = document.getElementsByTagName('body') [0];
			var _div = document.createElement('span');
			var _text = document.createTextNode(Key)
			_div.appendChild(_text);
			_body.appendChild(_div);
		}
		document.onkeyup = ProcessKey;

I'd appreciate any help. Thank you so much.

14 answers to this question

Recommended Posts

  • 0
Grand Master

Comic Book Guy

Posted
Posted
  XgD said:
Forgot to say... I've only developed/tested in firefox. Others probably won't work.

Implemented commands:

ver

win

eval [javascript code]

Works on IE8, however eval comes back as undefined. Also comes back as undefined on Firefox 3.5.1.

I used to have a code that I found back in the '90s, that I modified that would end up using up so much memory that it would freeze your browser and most often crash your computer, it was all done through JavaScript; you had to press a button on a web page to activate it. Would love to find that code again and see what it would do on modern browsers and OSes.

  • 0
Veteran

TonyLock

Posted
  • Author
Posted

That's fantastic! Thank you :)

Can I ask how to make it so it's not limited to 24 lines? I know I was looking for authenticity but it would look cool if it just when all the way to the bottom on of the screen.

I've made the following mods:

<body bgcolor="Black" onload="init()" onKeyPress="return processKey(event)" scroll="no" style="OverFlow:Hidden">

<textarea readonly id="cmd" style="overflow:hidden; width:100%; height:100%; background-color: #000; color: white; font-family: Courier New; border: none;" onFocus="this.blur()"></textarea

Also, is it possible to add the BACKSPACE function in there to delete typed characters?

  • 0
Rising Star

XgD

Posted
Posted
  TonyLock said:
That's fantastic! Thank you :)

Can I ask how to make it so it's not limited to 24 lines? I know I was looking for authenticity but it would look cool if it just when all the way to the bottom on of the screen.

I've removed the line-limiting code

  Quote
I've made the following mods:

<body bgcolor="Black" onload="init()" onKeyPress="return processKey(event)" scroll="no" style="OverFlow:Hidden">

<textarea readonly id="cmd" style="overflow:hidden; width:100%; height:100%; background-color: #000; color: white; font-family: Courier New; border: none;" onFocus="this.blur()"></textarea

Added these changes

  Quote
Also, is it possible to add the BACKSPACE function in there to delete typed characters?

That code was already there (in Firefox). I've written some IE specific code to make sure that it actually works this time. Command history wasn't working either, but should be now.

XgD

  • 0
Veteran

TonyLock

Posted
  • Author
Posted

Nice job :)

I added these lines in BTW:

case "del": return processDel(parameters[0]);

and

function processDel(FileParam){

if(FileParam == undefined){

return "Please specify a file to delete.\n\n";

}else if(FileParam == "*.*"){

return "Yeah, right! You wish.\n\n";

}else{

return "Unable to delete that file.\n\n";

}

}

This topic is now closed to further replies.
 Share
Go to question listing

  • Recently Browsing   0 members

    • No registered users viewing this page.

  • Posts

    • That sharp cold toothache you dread? Its origins trace back to ancient, unexpected purpose

      By pmrd · Posted

      I don't usually complain about articles here, but this is just ridiculous, you couldn't ask your precious AI to write something about tech instead? This literally has nothing to do with tech.
    • That sharp cold toothache you dread? Its origins trace back to ancient, unexpected purpose

      By pmrd · Posted

      And it was written by AI
    • Microsoft's "Athena" AI: A blueprint for your own dev team's productivity boost

      By zikalify · Posted

      Microsoft's "Athena" AI: A blueprint for your own dev team's productivity boost by Paul Hill Last month, Microsoft made many developer-oriented announcements at its annual BUILD conference. One of the tools that it announced at the time was called Athena, an artificial intelligence agent that lives in Microsoft Teams and aims to speed up product development processes. Now, however, Microsoft has released the blueprint of Athena so anyone can begin implementing a similar helper for their work. Rather than just another chatbot, Athena is a deeply integrated agent accessible through Teams that helps to connect people, tools, and data throughout the product development process. Athena is smart enough to work out what needs to happen next and helps team members get it done without having to go to different applications - Athena controls it all from Teams and you just have to communicate in natural language. Athena can be embedded in several developer workflows including Teams, Azure DevOps, and GitHub. Perhaps the greatest thing about Athena is that it’s not a new product being sold by Microsoft, but rather a methodology and open-source template (Dex) that organizations or individuals can take to build their own AI agents, allowing for more customization. To get started with Athena, you'll want to set up the Dex agent. Microsoft has also published a breakout session video about Athena so you can take a deeper dive. Who it affects, and how The primary beneficiaries of Microsoft’s decision to release Athena open source are engineering teams everywhere who will be freed from boring, repetitive tasks such as pull request (PR) reviews, work item management, and security checks. This will let them get on with coding new features and innovating - something that Microsoft has been pushing hard for since the start of the latest AI revolution. For product managers and engineering leaders, Athena also looks set to be incredibly useful as they will get better real-time visibility into the status of projects, if a release is truly ready for launch, and to ensure the team is aligned. Organizations from small to large will be able to benefit from using Athena. Due to its open-source nature, Athena can be tailored to meet specific development processes. This could unlock faster delivery cycles and improve code quality across the board. Why it's happening Athena is already being used internally at Microsoft by over 2,000 of its engineers. The Redmond giant explained that this has led to “measurable gains” in speed, quality, and focus. Aside from faster review cycles for developers, Athena is also surfacing release-blocking bugs earlier, enabling the consistent completion of security and privacy workflows, and providing quicker health assessments so that teams can gauge the overall health of their software delivery. By handling all these more boring tasks, Athena can free up developers to build more features into their projects. It also has the potential to speed up delivery times so that end users can use the new software faster, and with potentially less bugs. We often hear the term “democratization” in tech, a process that makes technologies more accessible and affordable. According to this definition, Microsoft’s release of Athena delivers on democratizing AI for developers as its open source and allows people to integrate AI Into their workflows, without starting from scratch. The move also aligns with Microsoft's AI strategy, that is, putting it all throughout its products. Copilot is probably the most notorious for its omnipresence in essentially every Microsoft product including Windows and Edge. Unlike Copilot, developers get a bit more freedom with Athena, but it’s still tied up with Microsoft products, namely Teams and GitHub. Caveats and what to watch for While it’s great that Microsoft is making its Athena blueprint accessible, one issue is that developers may still find it a bit complex to implement as there are still specific customizations organizations will want to make. Additionally, this solution involves a more involved setup process as outlined in the GitHub README. Another thing organizations should be wary about is data privacy and security implications when it comes to integrating with sensitive internal systems. Organizations that are working on secretive projects probably wouldn’t want to use Athena as this could put sensitive code in the hands of third parties. It’s not only technical issues that need considering either, there is also the human element. Some people may have concerns about AI hallucinating or ethical concerns around job security that could hurt adoption. To this end, Microsoft has reaffirmed that Athena is supposed to assist teams only, not replace team members. While Athena can be extremely useful, as shown by the results internally at Microsoft, human oversight and judgment will still be vital. Complex decision and creative problem-solving in development are some areas where a human still needs to be involved. Source: Microsoft
    • ChatGPT can now connect to Outlook, Teams, Gmail, Google Drive, and other services

      By pmrd · Posted

      How could it not be optional? ChatGPT isn't going to guess people's credentials :P
    • Microsoft expands LinkedIn CEO's role to include Office apps

      By thartist · Posted

      Mmmm, spread too thin into 2 quite different things

  • Recent Achievements

    • First Post
      James courage Tabla earned a badge
      First Post
    • Reacting Well
      James courage Tabla earned a badge
      Reacting Well
    • Apprentice
      DarkShrunken went up a rank
      Apprentice
    • Dedicated
      CHUNWEI earned a badge
      Dedicated
    • Collaborator
      DarkShrunken earned a badge
      Collaborator

  • Popular Contributors

    1. 1
      +primortal
      382
    2. 2
      +FloatingFatMan
      176
    3. 3
      ATLien_0
      171
    4. 4
      snowy owl
      169
    5. 5
      Xenon
      133
    Show More

  • Tell a friend

    Love Neowin? Tell a friend!