JSFiddle - React, Tailwind, and code Playground

Fliplet Notification - SKO

by Hugo Carneiro

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css">
<div class="content-wrapper">
  <!-- Notification will be appended here -->
</div>

<script type="text/x-handlebars-template" id="notification-template">
	<div class="notification col-xs-12 animated fadeInDown">
    <div class="col-xs-8">Don’t forget to submit <strong><span class="week-day">{{week}}</span>’s</strong> surveys.</div>
    <div class="col-xs-4 text-right"><span class="link-text">VISIT AGENDA</span></div>
  </div>
</script>



<div class="agenda-label to-complete"><span class="glyphicon glyphicon-bell"></span> Complete survey</div>
<div class="agenda-label completed"><span class="glyphicon glyphicon-ok"></span> Survey submitted</div>

CSS

.notification {
  padding: 12px 0;
  background-color: #E6E6E6;
}

.notification + .notification {
  margin-top: 10px;
}

.link-text {
  text-decoration: none;
  display: inline;
  width: auto;
  font-size: 1em;
  line-height: inherit;
  padding: 0;
  text-align: inherit;
  border: inherit;
  border-radius: inherit;
  background: none;
  color: #3276b1;
  font-weight: bold;
}

.agenda-label {
  display: inline-block;
  font-size: 12px;
  color: #FFF;
  padding: 5px 12px;
  margin-bottom: 10px;
}

.to-complete {
  background-color: #D40000;
}

.completed {
  background-color: #1BAF20;
}

JavaScript

// CREATE HANDLEBARS TEMPLATE
var source = $("#notification-template").html();
var template = Handlebars.compile(source);

var weekday = ""; // INITIALISE VARIABLE
weekDay(); // RUNS FUNCTION

// GET WEEK DAY NAME & SHOWS NOTIFICATION
function weekDay() {
  var newDate = new Date();
  var week = new Array(7);
  week[0] = "Sunday";
  week[1] = "Monday";
  week[2] = "Tuesday";
  week[3] = "Wednesday";
  week[4] = "Thursday";
  week[5] = "Friday";
  week[6] = "Saturday";
  
  weekday = week[newDate.getDay()];
  
  showNewNotification(weekday);
}

// PREPENDS A NEW NOTIFICATION
function showNewNotification(day) {
	var context = {week: day};
	var html = template(context);

	$('.content-wrapper').prepend(html);
}

// TO FAKE A NEW DAY
setTimeout(function(){
	weekday = "Wednesday";
	showNewNotification(weekday);
}, 5000);