l--update

.github/CONTRIBUTING.md

@@ -13,7 +13,7 @@ git clone ...
 cd letterloading
 ```
 
-- Install all required dependencies. But before you do, ensure node is installed on your PC. OK
+- Install all required dependencies. But before you do, ensure node is installed on your PC. OK ?
 
 ```
 npm install
@@ -26,8 +26,13 @@ Start breaking the library,
 npm start
 ```
 
-## If you just added some cool stuff, or just deducted some ugly stuff
+## If you just added some cool stuff, or  deducted some ugly stuff
+- check out your stuff on your browser firstly, by using
 
-- Create a repo and add the new letterloading
+`npm run build`
+
+on your terminal. Then try to see the resulting changes on your devserver.
+
+- If you've done the above, YAY!!! You can now create a repo and add the new letterloading
 - Tell us you made some cool stuff as clear as possible
 - We will love your contributions

README.md

@@ -5,7 +5,7 @@ LetterLoading js is a javascript library for making awesome letter simulations.
 # Core concepts of LetterLoading.
 
 - **flexibility:**
-This is because it is intended from ground up to do than just loading letter simulation. It could be extended to achieve even more animation simulation.
+This is because it is intended from ground up to do than just loading letter simulation. It could be extended to achieve even more animation simulation (this feature is currently work in progress).
 - **robustness:**
 LetterLoading gives you the possibility to break it and achieve even more simulation.
 
@@ -14,7 +14,7 @@ LetterLoading gives you the possibility to break it and achieve even more simula
 You can use LetterLoading as a 
 - script tag from CDN
 ```
-https://unpkg.com/[email protected].2/library/letterloading.js
+https://unpkg.com/[email protected].3/library/letterloading.js
 ```
 
 - install from NPM
@@ -80,7 +80,7 @@ export default LetterLoader;
 
 The purpose of LetterLoading Library is to make minimal and yet robust imaginative animations and simulations to letters or strings. 
 
-We aim to provide ready to use library to provide all sort of letter animations. Therefore, to achieve this big aims your contribution is always welcomed. We are open source.
+We aim to provide ready to use library to provide all sort of letter animations. But this is work in progress and the plan may seem slow for now. However, to achieve these big aims your contribution is always welcomed. We are open source.
 
 Read below to learn how you can be a part of improving LetterLoading js.
 

assets/demo.js

@@ -1,12 +1,6 @@
 document.addEventListener('DOMContentLoaded', function() {
 //console.log(letter)
 var letter = new LetterLoading('#main', {
-    strings: [
-      "You're lovely... yes you are",
-      "This is an example string",
-      "tell me about what more animation you love",
-      "Lastly, Hey, if you're Bukunmi, I love you"
-    ],
     loadspeed: 5
   });
 
@@ -50,7 +44,7 @@ var letter = new LetterLoading('#main', {
   var letter5 = new LetterLoading('#main5', {
     strings: [
       "Do this...",
-      "..with cautions",
+      "with caution",
     ],
     loadspeed: 3,
     hideChaar: false,

debug.log

@@ -1,3 +1,4 @@
 [1026/074911.818:ERROR:directory_reader_win.cc(43)] FindFirstFile: The system cannot find the path specified. (0x3)
 [1027/161142.979:ERROR:file_io.cc(135)] WriteFile: The pipe is being closed. (0xE8)
 [1030/062727.343:ERROR:directory_reader_win.cc(43)] FindFirstFile: The system cannot find the path specified. (0x3)
+[1101/140324.004:ERROR:directory_reader_win.cc(43)] FindFirstFile: The system cannot find the path specified. (0x3)

index.html

@@ -20,12 +20,6 @@ <h2>Default Letter Loading Simulation (loop is set to true by default )</h2>
         <p>
           <pre>
             var letter = new LetterLoading('#main', {
-              strings: [
-                "You're lovely... yes you are",
-                "This is an example string",
-                "tell me about what more animation you love",
-                "Lastly, Hey, if you're Bukunmi, I love you"
-              ],
               loadspeed: 5
             });
           </pre>
@@ -97,7 +91,7 @@ <h2> You can make your char visible even</h2>
 
       <section class="paleteContainer">
         <h2> Check out</h2>
-        <div class="loadingPalete"><span id="main5"></span></div>
+        <div class="loadingPalete_spec"><span id="main5"></span></div>
         <p>
           <pre>
             var letter4 = new LetterLoading('#main5', {
@@ -116,7 +110,7 @@ <h2> Check out</h2>
       </section>
 
       <footer>
-        <p>LetterLoading is brought to you by kelvinsekx and some amazing contributors</p>
+        <p>LetterLoading is brought to you by <a href="https://www.kelvinsekx.codes">kelvinsekx</a> and some amazing contributors</p>
       </footer>
     </div>
   </body>

public/styles.css

@@ -5,6 +5,7 @@ div {
   padding: 0;
   box-sizing: border-box;
   font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+  font-size: 105%;
 }
 
 #container {
@@ -39,6 +40,15 @@ section {
     font-weight: bolder;
 }
 
+.loadingPalete_spec{
+  background-color: rgba(129, 224, 224,0.3);
+  width: 100%;
+  min-height: 6rem;
+  border-radius: 1.2rem;
+  padding: 0.3em 2rem;
+  font-weight: bolder;
+}
+
 footer>p{
   font-size: 0.8em;
   border-top: 1px solid rgba(107, 102, 102, 0.3);

src/defaults.js

@@ -1,4 +1,9 @@
 const defaults = {
+  strings: [
+    "hey lovely,",
+    "use your own string...",
+    "abi you no go use am"
+  ],
   loadspeed: 9,
   char: "-",
   hideChaar: true,

src/letterloading.js

@@ -1,19 +1,20 @@
-import { loadinitializer } from "./loadinitializer.js";
+import { initializer } from "./loadinitializer.js";
 
 /**
- * Hey, tell me you love to simulate letter loading...
+ * Hey, tell me you love to simulate letters loading effects...
  *
- * @param {string} el, this can be an HMTL element ID or element
- * @param {object} options options is an object that has some of the requirements. Check './defaults.js' to learn more
+ * @param {string} el, this can be an HMTL element ID attribute or
+ *  all ready called element.
+ * @param {object} options options is an object that has some 
+ * predefined letterloading attributes. Check './defaults.js' to learn more
  * @returns {object} a new LetterLoading object
  */
 export default class LetterLoading {
-  // construct --- no construct
   constructor(el, options) {
-    // initial required params --- load methos available in loadinitializer
-    loadinitializer.load(this, el, options);
+    // initial required params --- load methods available in loadinitializer
+    initializer.load(this, el, options);
 
-    // this methos begins the letter loading simulation
+    // this method begins the letter loading simulation
     this.beginAnimation();
   }
 
@@ -30,11 +31,14 @@ export default class LetterLoading {
   }
 
   beginAnimation() {
-    // ....WELCOME, wait for half a sec before starting animation -- wait sec is set as
-    // @param: delayAnime
+    // ....WELCOME, wait for half a sec before starting animation 
+    //  wait second is set as delayAnime at `line 53 loadinitializer.js`
     this.timeout = setTimeout(() => {
-      // get a random string from options.STRINGS array if _shuffle is true
+      // get a random string from options.STRINGS array if 
+      // this.shuffle is true
       this.randomMize();
+      // currentStrPos is the place of lettter in a string[, this.strings],
+      // this.strings[, this.ArrayIndex] is the string you want to animate
       this.beginAnime(this.currentStrPos, this.strings[this.ArrayIndex]);
     }, this.delayAnime);
   }
@@ -50,7 +54,7 @@ export default class LetterLoading {
 
   startFetching(i, curr, str) {
     // increase the speed at some point
-    // if string reaches 20%,40% and 70% decrease speed by 20% consecutively
+    // if string reaches 20%, 40% and 70% increase speed by 20% consecutively
     if(i >= (0.70*curr.length)){
       this.loadSpeed = (this.loadSpeed - (0.50*this.loadSpeed));
     }else if (i >= (0.40 * curr.length)){
@@ -66,7 +70,7 @@ export default class LetterLoading {
     if (Object.keys(str).length === 0)
       str = this.getSudoStringArray(curr.length, this.char);
 
-      // if our letter index is last in the immediate string,
+    /** if our letter index is last in the immediate string,*/
     if (i > curr.length - 1) {
       this.ArrayIndex++;
       this.currentStrPos = 0;
@@ -104,12 +108,14 @@ export default class LetterLoading {
     this.startFetching(i, this.currentString, str);
   }
 
+  // this method helps us to create a replica number of string character
+  // but in a sudo form.
   getSudoStringArray(length, char) {
-    let initialArrayContent = [];
-    for (let i = 0; i < length; i++) {
-      initialArrayContent.push(char);
+    let sudoContentInArray = [], i;
+    for ( i = 0; i < length; i++) {
+      sudoContentInArray.push(char);
     }
-    return initialArrayContent;
+    return sudoContentInArray;
   }
 
   getStringKeysIntoArray(stringlength) {

src/loadinitializer.js

@@ -2,14 +2,10 @@ import defaults from "./defaults.js";
 
 export default class LoadInitializer {
   load(self, el, options) {
-
-      if (typeof el === "string") {
-        self.el= document.querySelector(el)
-      } else {
-         self.el = el
-      }
+    // node
+    self.el = (document.querySelector(el) || el)
 
-      // make options from default s and the rest
+    // make new options from defaults and the rest
     self.options = { ...defaults, ...options };
 
     self.initialElContent = self.el.textContent;
@@ -105,4 +101,4 @@ export default class LoadInitializer {
 
 }
 
-export let loadinitializer = new LoadInitializer();
+export let initializer = new LoadInitializer();