JSFiddle - React, Tailwind, and code Playground

by esbullington

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap-combined.min.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.0.4/bootstrap.min.js"></script>
<script src="http://code.angularjs.org/1.0.1/angular-1.0.1.js"></script>
  
<div ng-controller="FormCtrl" >
<form class="form-horizontal" name="pform">

<fieldset>
  <legend>Fetch object</legend>
  <div class="control-group">
    <label class="control-label" for="input01">Text input</label>
    <div class="controls">
      <input type="text" class="input-xlarge" id="input01" ng-model="pform.text">
    </div>
  </div>
    
  <div class="form-actions">
    <button type="submit" class="btn btn-primary" ng-click="">Submit object</button>
    <button class="btn" ng-click="">Cancel</button>
  </div>
 
</fieldset>
</form>

    <button ng-click="yahooResource()">Test</button>
    
    <div ng-repeat="item in yahooResult" >
        {{item}}
    </div>
    <div ng-model="status">Status is: {{status}}</div>

</div>

CSS

#test {
    background: white;
    width: 50px;
    height: 100px;
}

CoffeeScript

app = angular.module 'myapp', []

app.controller 'FormCtrl', ($scope, $http) ->
  $scope.yahooResource = ->
    $http.get('http://where.yahooapis.com/geocode?q=38.898717,+-77.035974&gflags=R&flags=J&appid=tSEFVM54').success (data, status) ->
      $scope.status = status
      $scope.yahooResult = data.ResultSet


angular.bootstrap document, ["myapp"]