✨👍 Add: Animation Added

ArslanAmeer · Dec 26, 2018 · 2453360 · 2453360
1 parent 05ea30a
commit 2453360
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 6 deletions.
diff --git a/index.html b/index.html
@@ -7,6 +7,7 @@
         <meta http-equiv="X-UA-Compatible" content="ie=edge">
         <title>Ui-Component-Load More (Static Content)</title>
         <link rel="stylesheet" href="styles.css">
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.6.2/animate.min.css">
     </head>
 
     <body>
@@ -23,7 +24,7 @@
             <div id="inLoader" class="box">10</div>
             <div id="inLoader" class="box">11</div>
             <div id="inLoader" class="box">12</div>
-            <a href="#" id="loadmore" style="text-align: center">Load More</a>
+            <p id="loadmore" style="text-align: center">Load More</p>
         </div>
     </body>
     <!-- JavaScript -->

diff --git a/loadMoreScript.js b/loadMoreScript.js
@@ -5,33 +5,35 @@ document.addEventListener("DOMContentLoaded", function () {
     if (divs.length != 0 && divs.length > 6) {
 
         for (let i = 6; i < divs.length; i++) {
-            // divs[i].classList.add("fadeInUp");
             divs[i].classList.toggle('hiddenContent');
         }
 
     }
 
     const elToLoad = document.getElementById("loadmore");
-    elToLoad.addEventListener("click", () => {
+    elToLoad.addEventListener("click", (e) => {
 
+        e.preventDefault();
         var hiddenDivs = document.querySelectorAll(".hiddenContent");
         const items = hiddenDivs.length;
+        elToLoad.scrollIntoView();
 
         if (items == 0) {
 
             elToLoad.innerText = 'No More Content';
-            elToLoad.removeAttribute('href');
 
         } else if (items != 0 && items > 3) {
 
             for (let i = 0; i < 3; i++) {
                 hiddenDivs[i].classList.toggle('hiddenContent');
+                hiddenDivs[i].classList.add("animated", "fadeInUp");
             }
 
         } else {
 
             for (let i = 0; i < items; i++) {
                 hiddenDivs[i].classList.toggle('hiddenContent');
+                hiddenDivs[i].classList.add("animated", "fadeInUp");
             }
 
         }

diff --git a/styles.css b/styles.css
@@ -8,10 +8,13 @@
     justify-content: space-evenly;
     flex-wrap: wrap;
     align-items: center;
+    scroll-behavior: smooth;
 }
 
-.container>a {
-    flex: 1 0 100%;
+.container>p {
+    flex: 1 0 50%;
+    cursor: pointer;
+    text-decoration: underline;
 }
 
 .box {