Javascript Typewriter Effect

How to Create an Auto Typewriter Effect with Vanilla Javascript

Watch the full tutorial here:
Youtube Rumble Odysee

html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./main.js" defer></script>
    <title>Typewriter with Word Changer</title>
</head>
<body>
    <span>You should learn: <span id="change">HTML</span></span>
</body>

</html>

css

* {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }

    body {
        width: 100%;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;

        background: #111;
        color: #0f0;
        font-family: monospace;
        font-size: 2rem;
    }

    span#change {
        border-right: 2px solid #0f0;
        padding-right: 5px;
    }

javascript

const phrases = ['HTML', 'CSS', 'JavaScript', 'PHP', 'SQL',];

let indexPhrase = 0;
let indexLetter = 0;
let writing = true;

const spanChange = document.getElementById('change');

function machineEffect() {
    const currentPhrase = phrases[indexPhrase];

    if (writing) {
        spanChange.textContent = currentPhrase.slice(0, indexLetter + 1);
        indexLetter++;

        if (indexLetter === currentPhrase.length) {
            writing = false;
            setTimeout(machineEffect, 1000);
            return;
        }
    } else {
        spanChange.textContent = currentPhrase.slice(0, indexLetter - 1);
        indexLetter--;

        if (indexLetter === 0) {
            writing = true;
            indexPhrase = (indexPhrase + 1) % phrases.length;
        }
    }

    setTimeout(machineEffect, 100);
}

machineEffect()