JSFiddle - React, Tailwind, and code Playground

by VixedS

HTML

<div id="container">
        <div id="background"></div>
        <div id="dialog">
            <p>Hello there!</p>
        </div>
        <div id="button">
            <img src="images/images/sceond3.jpg" width="126" height="210" alt=""/>
        </div>
    </div>

JavaScript

var counter = 0;

function typeWriter(el,i,str) {
    if (typeof str == "undefined") var str=$(el).text();
    if (typeof i == "undefined") var i=0;
    var text = str.slice(0, ++i);
    if (text != str){
    	setTimeout(function(){typeWriter(el,i,str)}, 350);
    }
    $(el).text(text);
};

function showDialog() {
    if (counter == 0) {
        $("#dialog p").text("Testing Second Line!");
        typeWriter('#dialog p');
    }
    if (counter == 1) {
        $("#dialog p").text("Testing Third Line!");
        typeWriter('#dialog p');
    }
    if (counter == 2) {
        window.location.href = 'third.html';
    }
    counter++;
}

$('#button').on('click',showDialog)