JSFiddle - React, Tailwind, and code Playground

by dipeshbeckham

HTML

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<!DOCTYPE html>
<html ng-app>
    <head>
    </head>
    <body>
        <div id='dv1'>
            <form ng-controller="FrmController">
                Post your Comment
                <form ng-controller="FrmController">
                    <textarea ng-model="txtcomment" placeholder="Your Comment" style='width:550px'></textarea>
                    <button ng-click='btn_add();' style='margin-top:10px;'>Post Comment</button>

                    <h4>Comments</h4>
                    <ul>
                        <li ng-repeat="comnt in comment"> {{ comnt }} <a  style="float: right;" href="" ng-click="remItem($index)">x</a></li>
                    </ul>
                </form> 
        </div>

    </body>
</html>

CSS

#dv1{ border:1px solid #DBDCE9;  margin-left:auto; margin-right:auto;  width:550px; border-radius:7px;   padding: 25px; }
            div {width: 200px;}
            h2 {font: 400 40px/1.5 Helvetica, Verdana, sans-serif;             margin: 0;              padding: 0;           }
            ul {list-style-type: none;  margin: 0;padding: 0;            }
            li {font: 200 20px/1.5 Helvetica, Verdana, sans-serif;                border-bottom: 1px solid #ccc;            }
            li:last-child {border: none; }
            li a { text-decoration: none; color: #000; display: block;        }

JavaScript

function FrmController($scope) {
    $scope.comment = [];
    $scope.btn_add = function() {
        if($scope.txtcomment !=''){
            $scope.comment.push($scope.txtcomment);
            $scope.txtcomment = "";
        }
    }
    
    $scope.remItem = function($index) {
        $scope.comment.splice($index, 1);
    }
}