Show a message where to find saved sequence on saving a sequence (#586)

* show message on save sequence

* chaanges

* changes

examples/demo.css

@@ -201,6 +201,12 @@ h1 {
   margin-bottom: 20px;
 }
 
+
+.savesequencemsg{
+  display: none;
+  text-align: center;
+  }
+
 #stepRemovedNotification {
   background-color: #808b96;
   padding:4px;

examples/demo.js

@@ -86,6 +86,13 @@ window.onload = function() {
     return false;
   });
 
+  function displayMessageOnSaveSequence(){
+      $(".savesequencemsg").fadeIn();
+      setTimeout(function() {
+          $(".savesequencemsg").fadeOut();
+      }, 1000);
+    }
+
   $('body').on('click', 'button.remove', ui.removeStepUi);
   $('#save-seq').click(() => {
     var result = window.prompt("Please give a name to your sequence... (Saved sequence will only be available in this browser).");
@@ -93,6 +100,7 @@ window.onload = function() {
       result = result + " (local)";
       sequencer.saveSequence(result, sequencer.toString());
       sequencer.loadModules();
+      displayMessageOnSaveSequence();
       refreshOptions();
     }
   });

examples/index.html

@@ -80,6 +80,7 @@
     </section>
 
     <hr />
+  <p class = "alert alert-success savesequencemsg">Saved Sequence Success. Sequence can be found among other modules.</p>
   <div class="row">
     <div class="col-sm-8">
     <section id="addStep" class="panel panel-primary">
@@ -184,6 +185,8 @@
     <button><i class="fa fa-arrow-circle-o-up"></i></button>
   </form>
 
+
+
   <footer>
     <hr style="margin:20px;"><center><a class="color:grey;" id="clear-cache">Clear offline cache</a></center>
   </footer>