Make a webpage looking like terminal or command-line

adminCSS, HTML, JavaScript0 Comment
2 min. reading

So, you’d like to make a webpage that looks like terminal or command-line, right?

With a little bit of HTML, CSS and Javascript, it is as easy as snapping a finger. Note, that I underlined “looks like”, because we’re going to do just a look & feel. This will not be a full-blown command line interpreter, where you can enter commands and get results. It will only be a simple, cool-looking… thing.

This article is a slight port of the code that can be found at fludotlove.com (done by Nathan Marshall).

HTML

Here we go! HTML code:

Microsoft Windows [Version 6.1.7601]<br />
Copyright (c) 2009 Microsoft Corporation. All rights reserved.<br />
<br />
C:\Users\ozn>exit <span id="cursor">█</span>

CSS

Some styling:

body
{
    font: 1em monospace;
    color: #ddd;
    background-color: #222;
}

Javascript

And some code to power this little toy:

setInterval(function()
{
    var display = document.getElementById('cursor').style.display;

    document.getElementById('cursor').style.display = (display == 'inline') ? 'none' : 'inline';
}, 500);

All togehter

And here you have everything put together:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />

    <title>A DOS in your web browser! :]</title>

    <style type="text/css">
    body
    {
        font: 1em monospace;
        color: #ddd;
        background-color: #222;
    }
    </style>
</head>
<body>
    Microsoft Windows [Version 6.1.7601]<br />
    Copyright (c) 2009 Microsoft Corporation. All rights reserved.<br />
    <br />
    C:\Users\ozn>exit <span id="cursor">█</span>

    <script type="text/javascript">
    setInterval(function()
    {
        var display = document.getElementById('cursor').style.display;

        document.getElementById('cursor').style.display = (display == 'inline') ? 'none' : 'inline';
    }, 500);
    </script>
</body>
</html>

That’s all folks! All the glory goes to Nathan Marshall), for an idea and basic implementation.

Leave a Reply