GUI Challenge: Text typing effect

Dec 8, 2023

Hello dazzling developers. Welcome to the inaugural GUI challenge on this blog. In this set of blog posts, get ready to dive into captivating user interface problems solved using your frontend expertise. I’ll kick things off by presenting the problem statement, and then, unveil the solution.

Challenge

This is going to be a very simple challenge. Your task is to make a text typing effect similar to the one in the GIF above. Here are the criteria:

The text can go over multiple lines.
There should be a cursor at the end of the text.
Changing the text alignment with CSS shouldn’t mess up the effect.
(Optional) You can control the typing speed.

The rest is up to you. Best of luck!

Solution

I have created a CodePen where you can access the full solution. We start with adding our HTML markup.

<div id="typing-area">
    <span id="typing-area__text"> United we stand. Divided we fall. </span>
</div>

And we add some CSS to style the text and the background.

body {
    background-color: black;
    color: white;
    font-family: monospace;
    justify-content: center;
    align-items: center;
    height: 95vh;
}
#typing-area {
    margin: auto;
    font-size: 2rem;
    position: relative;
    top: 30%;
    max-width: 400px;
    text-align: center;
}

You should see something like this:

Cursor

Now, we add a cursor to the end of the text. Note that the cursor needs to be inline with the text. So, we add a span element to the end of the text and style it to look like a cursor. This would handle the case when the text spans multiple lines or when the text is aligned differently.

<div id="typing-area">
    <span id="typing-area__text"> United we stand. Divided we fall. </span>
    <span id="typing-area__cursor"></span>
</div>

Now we also need to style the span tag to look like a cursor. Your cursor may have a zero width and height because it is an inline element countering which you would run into layout issues. So, the best way I think is to add a letter in the span tag and make it invisible by matching the color of the letter with the background color. We also add a blinking animation to the cursor to make it look more interesting.

<div id="typing-area">
    <span id="typing-area__text"> United we stand. Divided we fall. </span>
    <!-- Add a character to handle the width and height while being inline to text -->
    <span id="typing-area__cursor">C</span>
</div>

<style>
    #typing-area__cursor {
        /*  Make the text of cursor invisible by matching with background  */
        background-color: white;
        animation: 500ms linear infinite alternate blinking;
        color: white;
        margin-left: -2.5rem;
        opacity: 0.75;
    }
    @keyframes blinking {
        /*  Make the text of cursor invisible by matching with background  */
        from {
            background-color: white;
            color: white;
        }
        to {
            background-color: lightgreen;
            color: lightgreen;
        }
    }
</style>

Typing effect

Now we come to the core part of the challenge. We need to add a typing effect to the text. Here we are going to need the help of JavaScript. We will be using the setInterval function to add a letter to the text a certain interval of time.

Inside, setInterval we check if we have reached the end of the text. If not, we add a letter to the text element using textContent and increment the index. If we have reached the end of the text, we clear the interval.

const typingArea = document.getElementById("typing-area");
const typingAreaText = document.getElementById("typing-area__text");

// Set your text here
const inputText = "United we stand. Divided we fall.";

const SPEED = 1000;
// SPEED is inversely proportional to interval for printing next character
const INTERVAL = 100000 / SPEED;

let i = 0;
const intervalId = setInterval(() => {
    if (i < inputText.length) {
        typingAreaText.textContent += inputText[i];
        i++;
    }
}, INTERVAL);

We also need to add the cursor when we start typing. So, we create a function appendCursor which creates a span element and appends it to the typing-area element. We also create a function removeCursor which removes the cursor from the typing-area element.

function appendCursor() {
    const cursor = document.createElement("span");
    // Due to the issues mentioned previously, we add a letter to the cursor
    cursor.textContent = "C";

    cursor.id = "typing-area__cursor";
    cursor.style.animationDuration = `${INTERVAL}ms`;
    typingArea.appendChild(cursor);
}
function removeCursor() {
    const cursor = document.getElementById("typing-area__cursor");
    if (cursor) {
        typingArea.removeChild(cursor);
    }
}

⚠️ Note:

Remember to remove the text and the cursor from the HTML markup. Since, we will be adding them dynamically using JavaScript.

Now, we have our solution ready. You can check out the full solution on CodePen. Hopefully, you enjoyed solving this challenge. I will be posting more challenges like this in the future. So, stay tuned.