Can HTML, CSS, and JavaScript make a typewriter effect?

HTML:

<h1 id="demo">hello</h1>

CSS:

span {
  border-right: .05em solid;
  animation: caret 1s steps(1) infinite;
}
@keyframes caret {
  50% {
    border-color: transparent;
  }
}

JavaScript:

document.addEventListener('DOMContentLoaded', function(event) {
    // array with texts to type in typewriter
    var dataText = ["VISIBILITÀ.", "NUOVI INGAGGI.", "NUOVI FAN.", "PIÙ VISIBILITÀ!", "SUCCESSO!"];

    // type one text in the typewriter
    // keeps calling itself until the text is finished
    function typeWriter(text, i, fnCallback) {
        // check if text isn't finished yet
        if (i < (text.length)) {
            // add next character to h1
            document.querySelector("h1").innerHTML = text.substring(0, i + 1) + '<span aria-hidden="true"></span>';

            // wait for a while and call this function again for the next character
            setTimeout(function() {
                typeWriter(text, i + 1, fnCallback)
            }, 90);
        }
        // text finished, call callback if there is a callback function
        else if (typeof fnCallback == 'function') {
            // call callback after timeout
            setTimeout(fnCallback, 2000);
        }
    }

    // start a typewriter animation for a text in the dataText array
    function StartTextAnimation(i) {
        if (typeof dataText[i] == 'undefined') {
            setTimeout(function() {
                StartTextAnimation(0);
            }, 20000);
        }
        // check if dataText[i] exists
        if (i < dataText[i].length) {
            // text exists! start typewriter animation
            typeWriter(dataText[i], 0, function() {
                // after callback (and the whole text has been animated), start the next text
                StartTextAnimation(i + 1);
            });
        }
    }

    // start the text animation
    StartTextAnimation(0);
});




//assign the id for only the h1 tag?

document.addEventListener('DOMContentLoaded', function(event) {
    // Get the reference to the h1 element
    var h1Element = document.querySelector("h1#demo");

    // array with texts to type in typewriter
    var dataText = ["VISIBILITÀ.", "NUOVI INGAGGI.", "NUOVI FAN.", "PIÙ VISIBILITÀ!", "SUCCESSO!"];

    // type one text in the typewriter
    // keeps calling itself until the text is finished
    function typeWriter(text, i, fnCallback) {
        // check if text isn't finished yet
        if (i < (text.length)) {
            // add next character to h1
            h1Element.innerHTML = text.substring(0, i + 1) + '<span aria-hidden="true"></span>';

            // wait for a while and call this function again for the next character
            setTimeout(function() {
                typeWriter(text, i + 1, fnCallback)
            }, 90);
        }
        // text finished, call callback if there is a callback function
        else if (typeof fnCallback == 'function') {
            // call callback after timeout
            setTimeout(fnCallback, 2000);
        }
    }

    // start a typewriter animation for a text in the dataText array
    function StartTextAnimation(i) {
        if (typeof dataText[i] == 'undefined') {
            setTimeout(function() {
                StartTextAnimation(0);
            }, 20000);
        }
        // check if dataText[i] exists
        if (i < dataText[i].length) {
            // text exists! start typewriter animation
            typeWriter(dataText[i], 0, function() {
                // after callback (and the whole text has been animated), start the next text
                StartTextAnimation(i + 1);
            });
        }
    }

    // start the text animation
    StartTextAnimation(0);
});