JSFiddle - React, Tailwind, and code Playground

by RajamohanShilpa A

HTML

<script src="//code.angularjs.org/1.4.8/angular-route.js"></script>
<script src="https://code.angularjs.org/1.4.8/angular-mocks.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/3.1.1/ui-grid.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/3.1.1/ui-grid.js"></script>
<div ng-controller="sampleCtrl1" class="container">
  <h3>
  {{title}}  
  </h3>
  <div class='col-md-12'>
    <span class='col-md-2'>
      <input type='text' ng-model='product.name' placeholder='Product Name' />
    </span> 
    <span class='col-md-2'>
      <input type='text' ng-model='product.brand' placeholder='Brand' />
    </span>
    <span class='col-md-2'>
      <input type='text' ng-model='product.price' placeholder='Price' integer />
    </span>
    <span>
      <button ng-click='addProduct()'>Add
      </button>
    </span>
  </div>
  <div class="col-md-12">  
   <div ui-grid='gridOptions'>   
   </div>
  </div>
</div>

CoffeeScript

do()->
 angular.module 'sampleApp.Controller',['ui.grid']
 angular.module 'sampleApp.Service',['ngMockE2E']
 app = angular.module 'sampleApp',['sampleApp.Controller','sampleApp.Service']     
 app.run ($httpBackend)->
  lastId=3
  phones = [
     {
       id:1
       code: 'CC001'
       name: 'phone1'
       brand: 'SONY'
       price: 22000
     } 
     {
       id: 2
       code: 'CC002'
       name: 'phone2'
       brand: 'SONY'
       price: 20000
     }
     {
       id:3
       code: 'CC003'
       name: 'phone3'
       brand: 'SONY'
       price: 25000
     }]
     
  $httpBackend.whenGET('/phone').respond (method,url,data)->
    console.log "Getting phones"
    return[
    	200
      phones
      {}]
      
  $httpBackend.whenPOST('/phone').respond (method,url,data,headers)->
    console.log 'Received these data:', method, url, data, headers  
    localData = angular.fromJson data
    lastId++
    localData.id = lastId
    idStr = localData.id.toString()
    localData.code = 'CC' + if idStr.length == 1 then '00' + idStr else (if idStr.length == 2 then '0'+idStr else idStr )
    phones.push localData
    return[
    	200
      phones
      {}]
  return
  
 angular.module('sampleApp.Controller').controller 'sampleCtrl1',($scope,$http)-> 	
  $scope.title = "Phone Details"  
  $http.get('/phone').then (response)->
   $scope.result = response.data   
   return
  $scope.gridOptions =
    data:'result'
    columnDefs:[
      {
        name:'name'
        display:'Name'
        enableSorting : false
     }
     {
        name:'brand' 
        display:'Brand'
        enableSorting : false
     }
     {
        name:'price'
        display:'Price'
     }
    ]
  $scope.addProduct = ()->
    $http.post('/phone',$scope.product).then (response)->
     $scope.result = response.data
     return
    return
  return
 app.directive 'integer', ()->
    return {
        require: 'ngModel',
        link: (scope, ele, attr, ctrl) ->
          ctrl.$parsers.unshift...