feat: Add a flash message on permalink copy

css/styles.css

@@ -409,6 +409,56 @@ input[type=number] {
   color: #0AB5CD;
 }
 
+/* The snackbar - position it at the bottom and in the middle of the screen */
+#snackbar {
+  visibility: hidden; /* Hidden by default. Visible on click */
+  min-width: 250px; /* Set a default minimum width */
+  background-color: #FFFAE5; /* Black background color */
+  font-family: 'Raleway', sans-serif;
+  font-weight: 800;
+  font-size: 1rem;
+  color: #837865;
+  letter-spacing: 0.2px;
+  line-height: 1.8rem;
+  text-align: center; /* Centered text */
+  border-radius: 40px; /* Rounded borders */
+  padding: 16px 24px; /* Padding */
+  position: fixed; /* Sit on top of the screen */
+  z-index: 1; /* Add a z-index if needed */
+  bottom: 30px; /* 30px from the bottom */
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.08);
+}
+
+/* Show the snackbar when clicking on a button (class added with JavaScript) */
+#snackbar.show {
+  visibility: visible; /* Show the snackbar */
+  /* Add animation: Take 0.5 seconds to fade in and out the snackbar.
+  However, delay the fade out process for 2.5 seconds */
+  -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
+  animation: fadein 0.5s, fadeout 0.5s 2.5s;
+}
+
+/* Animations to fade the snackbar in and out */
+@-webkit-keyframes fadein {
+  from {bottom: 0; opacity: 0;}
+  to {bottom: 30px; opacity: 1;}
+}
+
+@keyframes fadein {
+  from {bottom: 0; opacity: 0;}
+  to {bottom: 30px; opacity: 1;}
+}
+
+@-webkit-keyframes fadeout {
+  from {bottom: 30px; opacity: 1;}
+  to {bottom: 0; opacity: 0;}
+}
+
+@keyframes fadeout {
+  from {bottom: 30px; opacity: 1;}
+  to {bottom: 0; opacity: 0;}
+}
+
 /* Animation */
 .parallax>use {
   animation: move-forever 25s cubic-bezier(.55, .5, .45, .5) infinite;

index.html

@@ -304,6 +304,8 @@
     </p>
   </div>
 
+  <div id="snackbar">Some text some message...</div>
+
   <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
   <script src="js/chart.js"></script>

js/scripts.js

@@ -42,6 +42,7 @@ const first_buy_radios = getFirstBuyRadios()
 const previous_pattern_radios = getPreviousPatternRadios()
 const permalink_input = $('#permalink-input')
 const permalink_button = $('#permalink-btn')
+const snackbar = $('#snackbar')
 
 //Functions
 const fillFields = function (prices, first_buy, previous_pattern) {
@@ -305,7 +306,17 @@ const copyPermalink = function () {
   document.execCommand('copy');
   permalink_input.hide();
 
-  alert('Copied!');
+  flashMessage("Permalink copied!");
+}
+
+const flashMessage = function(message) {
+  snackbar.text(message);
+  snackbar.addClass('show');
+
+  setTimeout(function () {
+    snackbar.removeClass('show')
+    snackbar.text('');
+  }, 3000);
 }
 
 const update = function () {