New Typer Class - Allows for multiple phrases to be typed and displayed

js/carousel.js

@@ -0,0 +1,58 @@
+class carouseltext{
+
+    constructor(elements, carousel, period){
+        this.elements = elements;
+        this.carousel = carousel;
+        this.period = parseInt(period, 10) || 2000;
+        this.loop = 0;
+        this.isDeleting = true;
+        this.text;
+    }
+
+    tick(){
+        var i = this.loop % this.carousel.length;
+        var fullTxt = this.toRotate[i];
+
+        if (this.isDeleting == true) {
+            this.txt = fullTxt.substring(0, this.txt.length - 1);
+        }else{
+            this.txt = fullTxt.substring(0, this.txt.length + 1);
+        }
+
+        this.element.innerHTML = '<span class="wrap">'+this.txt+'</span>';
+
+
+        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;
+        }
+
+        //Hold the function from executing again until delta time has passed.
+        setTimeout(function() {
+            that.tick();
+          }, delta);
+
+    }
+
+    textLoad() {
+        var elements = document.getElementsByClassName('txt-rotate');
+        for (var i=0; i<elements.length; i++) {
+          var carousel = elements[i].getAttribute('data-rotate');
+          var period = elements[i].getAttribute('data-period');
+          if (toRotate) {
+            new Text(elements[i], JSON.parse(carousel), period);
+            }
+        }
+    }
+
+
+}

js/type.js

@@ -1,18 +1,49 @@
-var i = 0
-var text="//Junior Software Developer";
-var speed=150;
-var item = document.getElementById("type");
+class typer{
 
-function type(){
-
-    item.innerHTML += text.charAt(i);
-    i++;
-
-    if (i < text.length) {
-        setTimeout(type, speed);
+    constructor(text, retypeText){
+        this.i = 0;
+        this.x = 0;
+        this.item = document.getElementById("type");
+        this.text = text;
+        this.retypeText = retypeText;
+        this.type();
+    }
+
+    type(){
+        this.item.innerHTML += this.text[this.x].charAt(this.i);
+        this.i++;
+
+        if (this.i < this.text[this.x].length) {
+            setTimeout(() => {
+                this.type();
+            }, 150);
+        }else{
+            if(this.retypeText == true){
+                this.i = 0;
+                setTimeout(() => {
+                    this.retype();
+                }, 3000);
+            }
+        }
+    }
+
+    retype() {
+        this.item.innerHTML = this.item.innerHTML.substring(0, this.item.innerHTML.length-1);
+
+        if (this.item.innerHTML.length > 0) {
+            setTimeout(() => {
+                this.retype();
+            }, 100);
+        }else{
+            this.x++;
+            //this.x > this.text.length -1 == loop
+            if(this.x >= this.text.length - 1){
+                //this.x = 0;
+                this.retypeText = false;
+            }
+            this.type();       
+        }
     }
-    
-    console.log(i);
 }
 
-type();
+var work = new typer(["//Junior Software Developer", "//Aspiring Backend Engineer"], true);