HTML Code

    
        
<div class="top-wrapper">
	<p>
        </p><h2 class="txt-rotate" data-period="900" data-rotate="[&quot;Hello User&quot;, &quot;Welcome to MrDevKnown&quot;, &quot;JavaScript Tuorial&quot;, &quot;Text typing effect in JS&quot;]">
        </h2>
	<p></p>
</div>
    

JavaScript Code

var TxtRotate = function (el, toRotate, period) {
        this.toRotate = toRotate;
        this.el = el;
        this.loopNum = 0;
        this.period = parseInt(period, 10) || 2000;
        this.txt = '';
        this.tick();
        this.isDeleting = false;
    };

    TxtRotate.prototype.tick = function () {
        var i = this.loopNum % this.toRotate.length;
        var fullTxt = this.toRotate[i];

        if (this.isDeleting) {
            this.txt = fullTxt.substring(0, this.txt.length - 1);
        } else {
            this.txt = fullTxt.substring(0, this.txt.length + 1);
        }

        this.el.innerHTML = '' + this.txt + '';

        var that = this;
        var delta = 300 - Math.random() * 100;

        if (this.isDeleting) { delta /= 2; }

        if (!this.isDeleting && this.txt === fullTxt) {
            delta = this.period;
            this.isDeleting = true;
        } else if (this.isDeleting && this.txt === '') {
            this.isDeleting = false;
            this.loopNum++;
            delta = 500;
        }

        setTimeout(function () {
            that.tick();
        }, delta);
    };

    window.onload = function () {
        var elements = document.getElementsByClassName('txt-rotate');
        for (var i = 0; i < elements.length; i++) {
            var toRotate = elements[i].getAttribute('data-rotate');
            var period = elements[i].getAttribute('data-period');
            if (toRotate) {
                new TxtRotate(elements[i], JSON.parse(toRotate), period);
            }
        }
        // INJECT CSS
        var css = document.createElement("style");
        css.type = "text/css";
        css.innerHTML = ".txt-rotate > .wrap { border-right: 0.08em solid #666 }";
        document.body.appendChild(css);
    };

JavaScript Music Player Web App:
That was 26 July, 2021. I wanted to improve my front end development skills. So I decided to make something that would also help me in Javascript. Because seriously, I am worse at it! At the end, I sat on my computer and started looking for an idea. Suddenly, I don't know why but one line said by Mark Zuckerberg hit me on my mind. Mark has once said during his speech at Harvard, "Facebook was not the first thing that I built... I also built games, chat systems, study tools and music players. I’m not alone. JK Rowling got rejected 12 times before publishing Harry Potter. Even Beyonce had to make hundreds of songs to get Halo. The greatest successes come from having the freedom to fail."
Well I know that's very motivating line... But I am not talking about that! Well, I know you got what I am talking about, but I need to explain this... 

Did you notice, he said Music Players... Well, That's where the idea came from... Thank you Zuck! :)
So, first things first, I did what's every web dev's first step, that is to create a index.html file... Then it all started... Firstly I created the basic structure of the website in html then added some css in it... Further Reading