module2-solution

mrKornWij · Apr 1, 2024 · 82a8699 · 82a8699
1 parent 57110af
commit 82a8699
Show file tree

Hide file tree

Showing 3 changed files with 101 additions and 118 deletions.
diff --git a/Assignment-1.md b/Assignment-1.md
diff --git a/index.html b/index.html
@@ -1,39 +1,59 @@
 <!doctype html>
-<html lang="en" ng-app="LunchCheck">
+<html lang="en" ng-app="ShoppingListCheckOff">
   <head>
-    <title>Lunch Checker</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" href="styles/bootstrap.min.css">
     <script src="js/angular.min.js"></script>
     <script src="js/App.js"></script>
+    <title>Shopping List Check Off</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="styles/bootstrap.min.css">
     <style>
-      .message { font-size: 1.3em; font-weight: bold; }
-      div .result {
-        color: green;
+      .emptyMessage {
+        font-weight: bold;
+        color: red;
+        font-size: 1.2em;
       }
-      div .error {
-        color:red;
+      li {
+        margin-bottom: 7px;
+        font-size: 1.2em;
+      }
+      li > button {
+        margin-left: 6px;
+      }
+      button > span {
+        color: green;
       }
     </style>
   </head>
 <body>
-   <div class="container" ng-controller="LunchCheckController">
-     <h1>Lunch Checker</h1>
+  <div class="container">
+  <h1>Shopping List Check Off</h1>
+
+  <div class="row">
+
+    <!-- To Buy List -->
+    <div class="col-md-6" ng-controller="ToBuyController as toBuy">
+     <h2>To Buy:</h2>
+     <ul>
+       <li ng-repeat="item in toBuy.items">Buy {{item.item_quantity}} {{item.item_name}}
+        <button class="btn btn-default" ng-click="toBuy.removeItem($index)">
+          <span class="glyphicon glyphicon-ok"></span> 
+          Bought
+        </button>
+      </li>
+     </ul>
+     <div class="emptyMessage" ng-if="toBuy.items.length === 0">Everything is bought!</div>
+    </div>
 
-         <div class="form-group">
-             <input id="lunch-menu" type="text"
-             placeholder="list comma separated dishes you usually have for lunch"
-             class="form-control"
-             ng-model="foods"> <!--Assign input values into $scope.foods-->
-         </div>
-         <div class="form-group">
-             <button class="btn btn-default" ng-click="CheckingFoods()">Check If Too Much</button>
-         </div>
-         <div class="form-group message">
-           <!-- Your message can go here. -->
-           <div class="result">{{result}}</div>
-         </div>
-   </div>
+    <!-- Already Bought List -->
+    <div class="col-md-6" ng-controller="AlreadyBoughtController as alrdBought">
+     <h2>Already Bought:</h2>
+     <ul>
+       <li ng-repeat="item in alrdBought.items">Bought {{item.item_quantity}} {{item.item_name}}</li>
+     </ul>
+     <div class="emptyMessage" ng-if="alrdBought.items.length === 0">Nothing bought yet.</div>
+    </div>
+  </div>
+</div>
 
 </body>
 </html>
diff --git a/js/App.js b/js/App.js
@@ -1,35 +1,62 @@
-//IIFE
 (function () {
-    'use_strict'; //protect things leak to the global scope
+    "use_strict";
 
-    //
     angular
-        .module("LunchCheck", []) // Module/App names LunchCheck which does not have any dependency
-        .controller("LunchCheckController", LunchCheckController); //Controller which will control with LunchCheckController function
-
-    // inject $scope as an argument into MsgController. this will help protect argument from minification 
-    LunchCheckController.$inject = ["$scope"];
-    function LunchCheckController($scope) {
-        $scope.CheckingFoods = function () { 
-            if ($scope.foods !== undefined) { //strictly not equal
-                const foodsList = $scope.foods.split(", ");
-                console.log(foodsList.length);
-                if (foodsList.length >=  1 && foodsList.length <= 3) {
-                    console.log(foodsList[0]);
-                    if (foodsList.length === 1 && foodsList[0] === "") {
-                        $scope.result = "Please Enter Data First!"; 
-                    }
-                    else {
-                        $scope.result = "Enjoy!";
-                    }
-                }
-                else if (foodsList.length > 3) {
-                    $scope.result = "Too Much!";
-                }
-            }
-            else if ($scope.foods === undefined || $scope.foods === "") {
-                $scope.result = "Please Enter Data First!"; 
+        .module("ShoppingListCheckOff", [])
+        .controller("ToBuyController", ToBuyController)
+        .controller("AlreadyBoughtController", AlreadyBoughtController)
+        .service("ShoppingListCheckOffService", ShoppingListCheckOffService);
+
+    ToBuyController.$inject = ["ShoppingListCheckOffService"];
+    function ToBuyController(ShoppingListCheckOffService) {
+        var buyCtrl = this;
+        buyCtrl.items = ShoppingListCheckOffService.getItems();
+
+        buyCtrl.removeItem = function (itemIndex) {
+            ShoppingListCheckOffService.removeItem(itemIndex);
+            ShoppingListCheckOffService.addItem();
+        };
+    }
+
+    AlreadyBoughtController.$inject = ["ShoppingListCheckOffService"];
+    function AlreadyBoughtController(ShoppingListCheckOffService) {
+        var boughtCtrl = this;
+        boughtCtrl.items = ShoppingListCheckOffService.getBoughts();
+    }
+
+
+    function ShoppingListCheckOffService() {
+        var service = this;
+        var itemList = [
+            {
+                item_name: "cookies",
+                item_quantity: 10
+            },
+            {
+                item_name: "cookies",
+                item_quantity: 10
             }
+        ];
+        var boughtList = [];
+
+        service.removeItem = function(itemIdx) {
+            itemList.splice(itemIdx, 1);
+        };
+
+        service.addItem = function() {
+            var item = {
+                item_name: "cookies",
+                item_quantity: 10
+            };
+            boughtList.push(item);
+        }
+
+        service.getItems = function () {
+            return itemList;
+        };
+
+        service.getBoughts = function () {
+            return boughtList;
         };
     }
-})(); 
+})();