JSFiddle - React, Tailwind, and code Playground

by Cindy Cullen

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div ng-app>
  <div ng-init="languages = [{ name:'HTML', type: 'Markup'}, { name: 'CSS', type: 'stylesheet'},{name: 'JavaScript', type: 'scripting'}, { name: 'jQuery', type: 'library' }, { name: 'AngularJS', type: 'library'}]">
    <p>
    <br /><br />
      Filter: <input type="text" ng-model="term" />
    </p>
    <ul class="list-group">
      <li ng-repeat="language in languages | filter: term | orderBy:'type'" class="list-group-item">
        <ul>
          <li ng-repeat="(key, value) in language">
          <strong>{{ key | uppercase }}</strong> = {{ value }}
          </li>
        </ul>
       </li>
    </ul>
  </div>
</div>

JavaScript

//Sincge this is using AngularJS, the javascript extends the HTML.  Click the HTML tab to see the code.