JSFiddle - React, Tailwind, and code Playground

by Bassem Mamar

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.js"></script>
	<title></title> 

<body>
	<div ng-app="App" class="container">
		<div ng-controller="Ctrl" class="form">
			<form>
				  <input type="text" name="title" placeholder="Title" ng-model="addMe" ng-required="true"><br><br>
				  <input type="text" name="description" placeholder="Description" ng-required="true"><br><br>
				  <button ng-click="addTitle()">Add</button>
				  <div class="itemList">
					  <ul ng-repeat="items in item track by $index">
						  <li>
							  {{items}}
		        			     <span ng-click="removeItem($index)"><br><a href="#">Remove</a></span>
		        	     </li>
					  </ul>
				  </div>
			</form>
		</div>
	</div>

</body>

CSS

body{
	maring:0;
	padding:0;
	font-family: 'Inconsolata', monospace;
}
.container{
	width: 100%;
	height:100%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.form{
	width:400px;
	height: auto;
	padding:20px;
}
.form input:nth-child(1){
	padding:10px;
	border:2px solid salmon;
	font-family: 'Inconsolata', monospace;
}
.form input:nth-of-type(2){

	padding:10px;
	border:2px solid salmon;
	font-family: 'Inconsolata', monospace;
	width:400px;
}

.form button{
	width:100px;
	height:40px;
	background-color: salmon;
	border:1px solid salmon;
	color:white;
	font-family: 'Inconsolata', monospace;
}
.form button:hover{
	color:salmon;
	background-color: white;
	cursor:pointer;
}
.itemList ul li{
	list-style: none;
}
.itemList ul li a{
	font-size: 0.8em;
	color:red;
	text-decoration: none;
}

JavaScript

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

app.controller('Ctrl', function($scope){

	$scope.item = ["Sample"];
  $scope.addMe='';
	$scope.addTitle = function(){
  console.log($scope.addMe);
  if($scope.addMe!==''){
 				$scope.item.push($scope.addMe);
        $scope.addMe='';
 		}
		
	};
	$scope.removeItem = function(index){
		$scope.item.splice(index,1);
	};
});