feat: version 1.0.0 commit

Author: birajrai

README.md

@@ -0,0 +1,25 @@
+# Typer
+
+Typer is a tiny lightweight JavaScript plugin for adding nice, customizable Typer effect using custom HTML5 attributes. This plugin is written in native JavaScript ES6 and does not requires any dependencies!
+
+if you have an issue/idea, please feel free to fork the repo or send me a push request and i'll be happy to push it.
+
+## Usage
+
+1. Load the minified version `typer.min.js` by placing the script tag before the closing Body tag for better page speed performance.
+```html
+<script src="js/typer.min.js"></script>
+```
+2. Create an empty `span` tag with class name `typewrite`. You're able to pass the options using the custom HTML5 attributes:
+
+- **data-loop:** Stop the typing loop. Value shoud be `yes` or `no`
+- **data-speed:** Typing speed in millisecond. Default value is `100`
+- **data-delay:** Time delay after word is complete in millisecond. Default value is `1000`
+- **data-words:** Words to add separated by comma i.e. `["...","...","..."]`
+
+```html
+<h3>Hey, I'm
+    <span class="typewrite" data-loop="yes" data-speed="100" data-delay="1000" data-words='["word 1", "word 2", "word 3"]'></span>
+</h3>
+```
+## [Demo](https://birajrai.github.io/typer/)

typer.js

@@ -0,0 +1,71 @@
+/**
+ * @package     birajrai/typer
+ * @description Lightweight JavaScript plugin for adding nice, customizable typer effect using custom HTML5 attributes.
+ * @author      Awran5 <github.com/birajrai>
+ * @version     1.0.0
+ * @license     under MIT https://github.com/birajrai/typer/blob/main/LICENSE
+ * @see         <github.com/birajrai/typer>
+ */
+
+
+class typeWriting {
+
+  constructor(element) {
+    this.element = element; // Selector
+    this.words = JSON.parse(element.getAttribute('data-words')); // Input words
+    this.speed = parseInt(element.getAttribute('data-speed'), 10) || 100; // fallback 100 ms
+    this.delay = parseInt(element.getAttribute('data-delay'), 10) || 1000; // fallback 1000 ms
+    this.loop = element.getAttribute('data-loop');
+    this.char = ''; // word letters
+    this.counter = 0; // loop counter
+    this.isDeleting = false; // check when deleting letters
+    this.type(); // Typing method
+  }
+
+  type() {
+    // Set the words index.
+    const index = this.loop === 'yes' ? this.counter % this.words.length : this.counter;
+    // Get the full word
+    const fullWord = this.words[index];
+    // Typing speed
+    let typeSpeed = this.speed;
+
+    if (this.isDeleting) {
+      // Divide speed by 2
+      typeSpeed /= 2;
+      // Add chars
+      this.char = fullWord.substring(0, this.char.length - 1);
+    } else {
+      // Delete chars
+      this.char = fullWord.substring(0, this.char.length + 1);
+    }
+    // Display on DOM
+    this.element.innerHTML = `<span class="write">${this.char}</span><span class="blinking-cursor">|</span>`;
+    // When word is completed
+    if (!this.isDeleting && this.char === fullWord) {
+      // break the loop before deletion.
+      if (this.loop === "no" && this.counter >= this.words.length - 1) {
+        return;
+      }
+      // Set char delete to true
+      this.isDeleting = true;
+      // Set time delay before new word
+      typeSpeed = this.delay;
+    } else if (this.isDeleting && this.char === '') {
+      this.isDeleting = false;
+      // Move to next word
+      this.counter++;
+    }
+    // Set time out
+    setTimeout(() => this.type(), typeSpeed);
+
+  }
+
+}
+
+// Call the class on DOMContentLoaded
+document.addEventListener('DOMContentLoaded', init)
+// Select all elements and trigger the class
+function init() {
+  document.querySelectorAll('.typewrite').forEach(e => new typeWriting(e));
+}