JSFiddle - React, Tailwind, and code Playground

by MarkSchultheiss

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/animatecss/3.5.1/animate.min.css">
<input id="field" type="text">
<button id="trigger">Make New Alerts</button>

<p>***For each trigger.click 3 alerts will be added to simulate multiple messages at once</p>
<p>The goal is to make them all appear at the bottom of the list one-by-one, <i>pushing the previous one up.</i> </p>


<div id="terminal"></div>

SCSS

body{background:black; color:white;}

p {
    color: #fff;
    font-family: sans-serif;
    letter-spacing: 1px;
}

#terminal span {
font-family: monospace;
    font-size: 2em;
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown;
    animation-delay: 0s;
    -webkit-animation-delay: 0s;
    -moz-animation-delay: 0s;
    -o-animation-delay: 0s;
}

#terminal span:first-child:after {
    content: " ";
}

#terminal span:after {
  content: "_";
  opacity: 0;
  animation: cursor 1s infinite;
}

#terminal {
    box-sizing: border-box;
    display: table-cell;
    vertical-align: middle;
    position: fixed;
    bottom: 0;
    color: #62FF17;
    font-size: 0.5em;
    padding: 1em;
    text-shadow: 0 0 12px rgba(84, 255, 3, 0.86);
}

@keyframes cursor {
  0% {
    opacity: 0;
  }
  40% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.fadeOutDown {
    -webkit-animation-name: fadeOutDown !important;
    animation-name: fadeOutDown !important;
}

JavaScript

console.clear();
//create app or use one if exists
var myApp = myApp || {};
// add alerts data
myApp.alerts = {
  count: 0,
  alertDelay: 3000,
  defaultStatus: "1",
  alertsArray: []
};
myApp.func = {
  wait: function(ms) {
    var defer = $.Deferred();
    setTimeout(function() {
      defer.resolve();
    }, ms);
    return defer;
  },
  addAlert: function(message, status) {
    status = status || myApp.alerts.defaultStatus;
    myApp.alerts.count++; // counts how many have ran
    var alert = [message, status, myApp.alerts.count, ""];
    // uncomment if you need keep track of them:
    // myApp.alerts.alertsArray.push(alert);
    myApp.func.fireAlert(alert, myApp.alerts.alertDelay);
  },
  fireAlert: function(item, delay, index) {
    $("#terminal").append("<span class='d" + item[2] + "'>" + item[0] + "</span><br />");
    myApp.func.wait(delay).then(function() {
      $("#terminal").find('.d' + item[2]).addClass('fadeOutDown');
    })
  }
};
//====== Trigger ======//
$("#trigger").click(function(event) {
  console.log("There have been " + myApp.alerts.count + " alerts ran");
  console.log(myApp.alerts.alertsArray);
  myApp.func.addAlert($('#field').val(), 2);
  myApp.func.addAlert($('#field').val(), 2);
  myApp.func.addAlert($('#field').val(), 2);
});