Final Commit with CSS added

Author: akashbanerjee

module1-solution/app.js

@@ -4,8 +4,9 @@
     <title>Lunch Checker</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="styles/bootstrap.min.css">
-    <script src="angular.min.js"></script>
-    <script src="app.js"></script>
+    <link rel="stylesheet" href="styles/text.css">
+    <script src="script/angular.min.js"></script>
+    <script src="script/app.js"></script>
     <style>
       .message { font-size: 1.3em; font-weight: bold; }
     </style>
@@ -14,17 +15,18 @@
    <div class="container">
      <h1>Lunch Checker</h1>
       <div ng-controller="LunchCheckController">
-         <div class="form-group">
-             <input id="lunch-menu" type="text"
+         <div class="form-group"><!--do NOT consider and empty item, i.e., , , as an item towards to the count  -->
+            <input id="lunch-menu" type="text"
              placeholder="list comma separated dishes you usually have for lunch"
              class="form-control"
-             ng-model = "name">
+             ng-model = "name"
+             ng-class="msgBorder">
          </div>
          <div class="form-group">
-             <button class="btn btn-default" ng-click="check();">Check If Too Much</button>
+            <button class="btn btn-default" ng-click="check();">Check If Too Much</button>
          </div>
-         <div class="form-group message">
-           {{messages}}
+         <div class="form-group message" ng-class="msgClass">
+            {{messages}}
          </div>
       </div>
    </div>

module1-solution/index.html

@@ -0,0 +1,51 @@
+(function () {
+
+  angular.module('LunchCheck', [])
+    .controller('LunchCheckController', LunchCheckController);
+
+  LunchCheckController.$inject = ['$scope'];
+
+  function LunchCheckController($scope) {
+    $scope.name = "";
+    $scope.messages = "";//for message
+    $scope.msgClass = "text-success";//for color of o/p msg
+    $scope.msgBorder = "";//for border of input text box
+
+    $scope.check = function() { 
+
+      var input = $scope.name;
+      var numberOfTypes = input.split(",");
+      var numberOfItems = 0;
+       
+      for (var i = 0; i < numberOfTypes.length; i++) {
+        if (numberOfTypes[i].trim() !== "") {
+               numberOfItems ++;
+        }
+      }
+         
+      if(numberOfItems === 0)
+      {
+        $scope.messages = "Please enter data first";
+        $scope.msgClass = "text-danger";
+        $scope.msgBorder = "messageError";
+      }
+      else if(numberOfItems <= 3)
+      {
+        $scope.messages = "Enjoy!";
+        $scope.msgClass = "text-success";
+        $scope.msgBorder = "messageSuccess";
+      }
+      else
+      {
+        $scope.messages = "Too much!";
+        $scope.msgClass = "text-danger";
+        $scope.msgBorder = "messageError";
+      }
+    };
+
+  };
+
+
+
+
+})();

module1-solution/angular.min.js renamed to module1-solution/script/angular.min.js

@@ -0,0 +1,9 @@
+.messageError
+{
+  border-color: red;
+}
+
+.messageSuccess
+{
+  border-color: green;
+}