JSFiddle - React, Tailwind, and code Playground

by hanaeto

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.angularjs.org/1.5.0/angular-cookies.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<body ng-app="myApp" ng-controller="init">
  <h1 class="page-header">Calculate Rating</h1>
  <div id="callout-focus-demo" class="bs-callout bs-callout-info">
  <table class="table">
    <thead>
      <tr>
        <th colspan="3">First</th>
        <th colspan="3">Second</th>
        <th colspan="2">Average</th>
      </tr>
      <tr>
        <th>01</th>
        <th>CR</th>
        <th>01</th>
        <th>01</th>
        <th>CR</th>
        <th>01</th>
        <th>PPR</th>
        <th>MPR</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="aver in averageList">
        <td><input type="number" min="0" step="1" ng-change="eventInputChange()" ng-model="aver.first.ppr1"/></td>
        <td><input type="number" min="0" step="0.01" ng-change="eventInputChange()" ng-model="aver.first.mpr"/></td>
        <td><input type="number" min="0" step="1" ng-change="eventInputChange()" ng-model="aver.first.ppr2"/></td>
        <td><input type="number" min="0" step="1" ng-change="eventInputChange()" ng-model="aver.second.ppr1"/></td>
        <td><input type="number" min="0" step="0.01" ng-change="eventInputChange()" ng-model="aver.second.mpr"/></td>
        <td><input type="number" min="0" step="1" ng-change="eventInputChange()" ng-model="aver.second.ppr2"/></td>
        <td>{{ aver.total.ppr1 | setDecimal:2 }}</td>
        <td>{{ aver.total.mpr | setDecimal:2 }}</td>
      </tr>
    </tbody>
    <tfooter>
      <td colspan="8">Average Rating : {{ rating | setDecimal:2 }} ( PPR: {{ totalPpr | setDecimal:2 }}, MPR: {{ totalMpr | setDecimal:2 }} )</td>
    </tfooter>
  </table>
  <div style="text-align: center;" >
    <button class="btn btn-primary" ng-click="eventBtnAddNgClick();">Add</button>
    <button class="btn...

CSS

body {
  /* text-align: center; */
}
div {
  padding: 5px;
}
th, td {
  text-align: center;
  vertical-align: middle;
}
input {
  width: 100%;
}

JavaScript

var GRADE = [
  { rating: 1, flight: "C", ppr: 0, mpr: 0 },
  { rating: 2, flight: "C", ppr: 40, mpr: 1.3 },
  { rating: 3, flight: "C", ppr: 45, mpr: 1.5 },
  { rating: 4, flight: "CC", ppr: 50, mpr: 1.7 },
  { rating: 5, flight: "CC", ppr: 55, mpr: 1.9 },
  { rating: 6, flight: "B", ppr: 60, mpr: 2.1 },
  { rating: 7, flight: "B", ppr: 65, mpr: 2.3 },
  { rating: 8, flight: "BB", ppr: 70, mpr: 2.5 },
  { rating: 9, flight: "BB", ppr: 75, mpr: 2.7 },
  { rating: 10, flight: "A", ppr: 80, mpr: 2.9 },
  { rating: 11, flight: "A", ppr: 85, mpr: 3.1 },
  { rating: 12, flight: "A", ppr: 90, mpr: 3.3 },
  { rating: 13, flight: "AA", ppr: 95, mpr: 3.5 },
  { rating: 14, flight: "AA", ppr: 102, mpr: 3.75 },
  { rating: 15, flight: "AA", ppr: 109, mpr: 4 },
  { rating: 16, flight: "SA", ppr: 116, mpr: 4.25 },
  { rating: 17, flight: "SA", ppr: 123, mpr: 4.5 },
  { rating: 18, flight: "SA", ppr: 130, mpr: 4.75 }
];

var Result = function() {
  this.ppr1 = null;
  this.mpr = null;
  this.ppr2 = null;
};
var Average = function() {
  var first = null;
  var second = null;
  var total = null;
};

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

myApp.filter('setDecimal', function ($filter) {
    return function (input, places) {
        if (isNaN(input)) return 0;
        var factor = "1" + Array(+(places > 0 && places + 1)).join("0");
        return Math.round(input * factor) / factor;
    };
});


myApp.controller( "init", [ "$scope", "$cookies", "$cookieStore", function( $scope, $cookies, $cookieStore ) {
	
  $scope.grade = GRADE;
  
	//get Cookie
	var averageList = $cookies.get('averageList');
  try {
  	averageList = JSON.parse( averageList );
  } catch( error ) {
  	averageList = [];
  }
  $scope.averageList = averageList;
  
  $scope.rating = 0;
  $scope.totalPpr = 0;
  $scope.totalMpr = 0;
  
  //add
  $scope.eventBtnAddNgClick = function() {
    var aver = new Average();
    aver.first = new Result();
    aver.second = new Result();
    aver.total = new...