JSFiddle - React, Tailwind, and code Playground

by Aditya Mukherjee

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css">
<script src="http://code.angularjs.org/1.1.5/angular.js"></script>
<div ng-app="nfs">
<div class="notifications-container" ng-controller="nfsw">
    <div class="notification" ng-class="n.type" ng-repeat="n in notifs" ng-animate="'animate'">
        <div class="icon"><span class=" icon-{{ n.type }}-sign"></span></div>
        <div class="text"><span>{{ n.text }}</span></div>
        <div class="clear"></div>
    </div>
</div>
<div class="link" ng-controller="nfsl">
    <a ng-click="newNotif()">notify</a>
    <a ng-click="reset()">reset</a>
</div>
</div>

CSS

@-webkit-keyframes enter_sequence {
  from { opacity:0; }
  to { opacity:1; }
}

.link { position: fixed; bottom: 2px; right: 2px; }
.link a { cursor: pointer; }

.notification {
    border-radius: 5px;
    color: #fff;
    background-color: rgba(0,0,0,0.2);
    display: table;
    margin-bottom: 2px;
}

.notification .icon {
    width: 25%;
    text-align: center;
    border-radius: 5px 0 0 5px;
    font-size: 1em;
    display: table-cell;
    vertical-align: middle;
    background-color: rgba(0,0,0,0.2);
}

.notification .text {
    width: 74%;
    padding: 10px;
    display: table-cell;
}

.notification .text span {
    height: 32px;
    line-height: 1.2em;
    display: table-cell;
    vertical-align: middle;
    font-size: 15px;
    font-family: Avenir;
}

.notification.info {
    background-color: #2980B9;
}

.notification.error {
    background-color: #E74C3C;
}

.notification.success {
    background-color: #27AE60;
}

.animate-enter {
 -webkit-transition: 0.2s linear all;
 opacity: 0;
}

.animate-enter.animate-enter-active {
 opacity: 1;
}


.clear{ clear: both; }

JavaScript

var app = angular.module("nfs", []);
app
.factory("notificationService", function(){
    return {
        notifs: []
        /*
        get: function(){ return this.notifs; },
        set: function(arr){ this.notifs.length = 0; this.notifs = arr; },
        empty: function(){
            for(var i=0; i<=this.notifs.length; i++,this.notifs.pop());
        }*/
    }
})
.controller("nfsw", ["$scope", "notificationService", function($scope, notificationService){
    $scope.$watch(notificationService.notifs, function(){
        $scope.notifs = notificationService.notifs;
        console.log("changed", notificationService.notifs);
    });
}])
.controller("nfsl", ["$scope", "notificationService", function($scope, notificationService){
    $scope.newNotif = function(){
        console.log("add");
        notificationService.notifs.push(
        {type: (new Array("error", "success", "info"))[Math.floor(Math.random()*3)], text:(new Date()).getTime()}
        );
        console.log(notificationService);
    }
    
    $scope.reset = function(){
        console.log("reset");
        notificationService.notifs = [];
        console.log(notificationService);
    }
}])