JSFiddle - React, Tailwind, and code Playground

by johnoscott

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/showdown/0.3.1/showdown.min.js"></script>
<div class="commentBox" ng-controller="commentCtrl">
    <h1>Comments</h1>
    <div class="commentList"> 
        <div class="comment" ng-repeat="comment in comments">
            <h2 class="commentAuthor">
                {{comment.author}}
            </h2>
            <span ng-bind-html-unsafe="comment.text | markdown"></span>
        </div>
    </div>
    <form name="commentForm" class="commentForm" ng-submit="post()">
        <input type="text" ng-model="author" placeholder="Your name" required />   
        <input type="text" ng-model="text" placeholder="Say something..." required />
        <input type="submit" value="Add" />  
    </form>
</div>

JavaScript

var app = angular.module( 'app', [] );

app.controller('commentCtrl', function ( $scope, $http, $timeout ) { 
    $scope.comments = [
        { author: '@vla (Vlad Yazhbin)', text: 'This is one comment' },
        { author: 'AngularJS', text: 'This is *another* comment' }
    ];
    
    $scope.post = function() {
        if ($scope.author && $scope.text) {
            var comment = {
                author: $scope.author, 
                text: $scope.text
            };          
            $scope.comments.push(comment);     
            $http.post('http://example.com', comment).success(
                function (comments) {
                    $scope.comments = comments;        
                }
            );
            $scope.author = '';
            $scope.text = '';
        }
    };
    
    (function poll() {
        $http.get('http://example.com').success(
            function (comments) {
                $scope.comments = comments;
                $timeout(poll, 5000);
            }
        );
    })();
});

app.filter('markdown', function () {
    var converter = new Showdown.converter();

    return function (input) {
        return converter.makeHtml(input || '');
    };
});