JSFiddle - React, Tailwind, and code Playground

by ecmanaut

HTML

<script src="http://code.angularjs.org/angular-1.0.0rc3.min.js"></script>
<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<!doctype html>
<html ng-app="">
<head>
    
</head>
<body>
<div ng-controller="RecipeCtrl">
    <h2>Total recipes: {{getTotalRecipes()}}</h2>
    <ul class="unstyled">
        <li ng-repeat="recipe in recipes">
            <input type="checkbox" ng-model="recipe.done"/>
            <span class="done-{{recipe.done}}">{{recipe.text}}</span>
        </li>
    </ul>
    <form class="form-horizontal">
        <input type="text" ng-model="formRecipeText" ng-model-instant=""/>
        <button class="btn" ng-click="addRecipe()"><i class="icon-plus"></i>Add</button>
    </form>

    <button class="btn-large" ng-click="clearCompleted()"><i class="icon-trash"></i>Clear Completed</button>
</div>
</body>
</html>

CSS

.done-true{
    text-decoration: line-through;
    color: grey;
}

JavaScript

function RecipeCtrl($scope) {
  $scope.recipes = [
    {text:'Learn AngularJS', done:false},
    {text:'Build an app', done:false}
  ];

  $scope.getTotalRecipes = function () {
    return $scope.recipes.length;
  };

  $scope.clearCompleted = function () {
    $scope.recipes = _.filter($scope.todos, function(todo){
      return !todo.done;
    });
  };

  $scope.addRecipe = function () {
    $scope.recipes.push({text:$scope.formRecipeText, done:false});
    $scope.formRecipeText = '';
  };
}

var types =
{ "triangle":
  { "name": "Triangle gems"
  , "purpose": "Combat gems"
  , "types":
    [ "damage"
    , "gold"
    , "health"
    , "shield"
    ]
  }
, "square":
  { "name": "Square gems"
  , "purpose": "Attack gems"
  , "types":
    [ "dark"
    , "fire"
    , "ice"
    , "light"
    , "poison"
    , "shock"
    , "water"
    , "wind"
    ]
  }
, "diamond":
  { "name": "Diamond gems"
  , "purpose": "Defense and perk gems"
  , "types":
    [ "dark"
    , "drop"
    , "fire"
    , "ice"
    , "light"
    , "poison"
    , "shock"
    , "water"
    , "wind"
    ]
  }
, "circle":
  { "name": "Circle gems"
  , "purpose": "Stat gems"
  , "types":
    [ "attack"
    , "health"
    , "magic"
    , "shield"
    ]
  }
, "hexagon":
  { "name": "Hexagon gems"
  , "purpose": "Bonus gems"
  , "types":
    [ "break"
    , "gold"
    , "health"
    , "shield"
    , "stun"
    , "xp"
    ]
  }
, "light":
  { "name": "Light gems"
  , "purpose": "Light weapon modifier gems"
  , "types":
    [ "gold"
    ]
  }
, "heavy":
  { "name": "Heavy gems"
  , "purpose": "Heavy weapon modifier gems"
  , "types":
    [ "damage"
    ]
  }
, "dual":
  { "name": "Dual gems"
  , "purpose": "Dual weapon modifier gems"
  , "types":
    [ "gold"
    , "xp"
    ]
  }
}