caodoc.exozy.me/script.js

const input = document.getElementById("input");
const output = document.getElementById("output");
const logo = document.getElementById("logo");
const version = document.getElementById("version");
const currentTime = document.getElementById("currentTime");

const unknownCmdText = `Unknown command! Write <code class="help">help</code> for the full list.`;
const whoIsText = `Hello! I’m <a href="https://git.exozy.me/caodoc" target="_blank">caodoc</a>, the creator of this terminal design based website. <br/>
    Source code can be found <a href="https://git.exozy.me/caodoc/caodoc.exozy.me" target="_blank">here</a>.`;
const helpCmdText = `
    <code class="help">clear</code>&nbsp;&nbsp;&nbsp; Clear the terminal. <br/>
    <code class="help">help</code>&nbsp;&nbsp;&nbsp;&nbsp; Display this. <br/>
    <code class="help">social</code>&nbsp;&nbsp; My social media accounts. <br/>
    <code class="help">whois</code>&nbsp;&nbsp;&nbsp; Information about the creator & this website.
`;
const socialText = `
    <text class="socialHighLight"> git.exozy.me </text>&nbsp;&nbsp; <a href="https://git.exozy.me/caodoc">caodoc</a> <br/>
    <text class="socialHighLight"> GitHub </text>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href="https://github.com/caodoc">caodoc</a> <br/>
    <text class="socialHighLight"> Discord </text>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href="https://discord.com/users/800173074166710282">caodoc</a> <br/>
    <text class="socialHighLight"> Matrix </text>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href="">@caodoc:exozy.me</a>
`;

function helpCmd()
{
    output.innerHTML += `${helpCmdText}`;
}

function unknownCmd()
{
    output.innerHTML += `${unknownCmdText}`;
}

function whoIs()
{
    output.innerHTML += `${whoIsText}`;
}

function social()
{
    output.innerHTML += `${socialText}`;
}

function clearCmd()
{
    output.innerHTML = "";
    logo.style.display = "none";
    version.style.display = "none";
}

setInterval(() => {
    if (input.value.length === 20)
    {
        document.getElementById("warning").style.display = "block";
    }
    else
    {
        document.getElementById("warning").style.display = "none";
    }
    const time = new Date();
    currentTime.innerHTML = `[${time.getHours()}:${time.getMinutes()}]`;
}, 10);


input.addEventListener("keypress", function(e) {
    if (e.key === "Enter")
    {
        const time = new Date();
        const inputCmd = input.value;
        output.innerHTML += `<text class="newCmd"> <text class="currentTimeClass"> [${time.getHours()}:${time.getMinutes()}] </text> <text class="user"> guest</text>@local <text class="symbol">$</text> ${inputCmd} </text> <br/>`;
        if (inputCmd === "help") helpCmd();
        else if (inputCmd === "whois") whoIs();
        else if (inputCmd === "clear") clearCmd();
        else if (inputCmd === "social") social();
        else unknownCmd();
        output.innerHTML += `<br/>`;
        input.value = "";
    }
});