adding function to reshuffle the front page words at every refresh

static/css/style.css

@@ -112,6 +112,7 @@ div.home {
   /* padding: 5em 5em 1em 7.5em; */
   text-align: justify;
   font-size: 0.8em;
+  display: none;
 }
 div.homepage{
   padding: 0 0 5em 0;

templates/layout.html

@@ -7,6 +7,30 @@
   <link rel="stylesheet" href="{{ url_for('static', filename='/css/style.css') }}">
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
   <script>
+  (function($){
+  $.fn.shuffle = function() {
+
+      var allElems = this.get(),
+          getRandom = function(max) {
+              return Math.floor(Math.random() * max);
+          },
+          shuffled = $.map(allElems, function(){
+              var random = getRandom(allElems.length),
+                  randEl = $(allElems[random]).clone(true)[0];
+              allElems.splice(random, 1);
+              return randEl;
+         });
+
+      this.each(function(i){
+          $(this).replaceWith($(shuffled[i]));
+      });
+
+      return $(shuffled);
+
+  };
+  })(jQuery);
+
+
     $( document ).ready(function() {
       var bodyWidth = $(window).width()- $("#generate-button").width();
       var bodyHeight = $(window).height()- $("#generate-button").width();
@@ -25,6 +49,9 @@
       var randPosY = Math.floor(Math.random()  * (bodyHeight + 1));
       $('#generate-button').css('left', randPosX);
       $('#generate-button').css('top', randPosY);
+
+      $('div.home a').shuffle();
+      $('div.home').show();
     });
   </script>
 </head>