JSFiddle - React, Tailwind, and code Playground

by seyenaz

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.13/angular-ui-router.js"></script>
<div ng-app="myApp">
    <div ui-view=""></div>
<div>
    
    
  <!-- ViewTasks.html -->
  <script type="text/ng-template" id="ViewTasks.html">
    <div ng-controller="taskGridController">
        <h1 id="taskHeader">Task List</h1>
        
        <div id="tasksToDo">
            <h3>Task to complete</h3>
            <div id="tasksWrapper">
                <div ng-repeat="task in tasks">
                    <div>{{task.description}} + {{task.assignedTo}} + {{task.dueDate}}</div>
                </div>
            </div>
        </div>
    </div>
  </script>
  
  <!-- AddTask.html -->
  <script type="text/ng-template" id="AddTask.html">
    Add New Task
  </script>

CSS

#taskHeader {
    background-color: rgb(237, 237, 237);
    text-align: center;
    padding: 10px;
}

#tasksToDo {
    border: blue;
}

#tasksWrapper {
    margin-left: 40px;
}

JavaScript

var myApp = angular.module("myApp", ['ui.router']);

function taskGridController($scope) {
    $scope.tasks = [{"description" : "test Desc", "assignedTo" : "Assign Test", "dueDate" : "21.12.2012" }];   
}

myApp.config(function($stateProvider, $urlRouterProvider) {
  
  $urlRouterProvider.otherwise("/TasksGrid");
  
  $stateProvider
    .state('TasksGrid', {
      url: "/TasksGrid",
      templateUrl: "ViewTasks.html"
    })
    .state('AddTask', {
      url: "/AddTask",
      templateUrl: "AddTask.html"
    })
    .state('EditTask', {
      url: "/EditTask",
      templateUrl: "partials/EditTask.html"
    });
});