Frogs exercise and more Angular stuff

angular-playground.sln

@@ -0,0 +1,37 @@
+
+Microsoft Visual Studio Solution File, Format Version 12.00
+# Visual Studio 14
+VisualStudioVersion = 14.0.23107.0
+MinimumVisualStudioVersion = 10.0.40219.1
+Project("{E24C65DC-7377-472B-9ABA-BC803B73C61A}") = "angular-playground", ".", "{1C264CEB-6514-436C-8705-3789D954C442}"
+	ProjectSection(WebsiteProperties) = preProject
+		TargetFrameworkMoniker = ".NETFramework,Version%3Dv4.0"
+		Debug.AspNetCompiler.VirtualPath = "/localhost_52606"
+		Debug.AspNetCompiler.PhysicalPath = "..\..\..\..\..\..\source\angular-playground\"
+		Debug.AspNetCompiler.TargetPath = "PrecompiledWeb\localhost_52606\"
+		Debug.AspNetCompiler.Updateable = "true"
+		Debug.AspNetCompiler.ForceOverwrite = "true"
+		Debug.AspNetCompiler.FixedNames = "false"
+		Debug.AspNetCompiler.Debug = "True"
+		Release.AspNetCompiler.VirtualPath = "/localhost_52606"
+		Release.AspNetCompiler.PhysicalPath = "..\..\..\..\..\..\source\angular-playground\"
+		Release.AspNetCompiler.TargetPath = "PrecompiledWeb\localhost_52606\"
+		Release.AspNetCompiler.Updateable = "true"
+		Release.AspNetCompiler.ForceOverwrite = "true"
+		Release.AspNetCompiler.FixedNames = "false"
+		Release.AspNetCompiler.Debug = "False"
+		VWDPort = "52606"
+	EndProjectSection
+EndProject
+Global
+	GlobalSection(SolutionConfigurationPlatforms) = preSolution
+		Debug|Any CPU = Debug|Any CPU
+	EndGlobalSection
+	GlobalSection(ProjectConfigurationPlatforms) = postSolution
+		{1C264CEB-6514-436C-8705-3789D954C442}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{1C264CEB-6514-436C-8705-3789D954C442}.Debug|Any CPU.Build.0 = Debug|Any CPU
+	EndGlobalSection
+	GlobalSection(SolutionProperties) = preSolution
+		HideSolutionNode = FALSE
+	EndGlobalSection
+EndGlobal

app/components/bindings/BindingsController.js

@@ -5,5 +5,6 @@ app.controller('BindingsController', BindingsController);
 
 function BindingsController(){
 	this.bindingsStatus = 'Working';
-	this.name= "Please enter your Name";
+	this.name = "Please enter your Name";
+	this.somethingOfYourChoice = "Something of your choice";
 }

app/components/bindings/bindings.html

@@ -36,10 +36,10 @@ <h1>Exercises</h1>
 		<div class="challenges">
 			<ul class="list-group">
 				<li class="list-group-item">
-					<span class="challenge">Angular controllers allow you to create properties on the fly try creating an input that is bound using ng-model to controller.somethingOfYourChoice. Then render what you type into the input field by binding it with the double curlies</span>
+                    <span class="challenge">Angular controllers allow you to create properties on the fly try creating an input that is bound using ng-model to controller.somethingOfYourChoice. Then render what you type into the input field by binding it with the double curlies</span>
 					<div class="answer">
-						<!--Your HTML input Here-->
-						{{<!--Your Code Here-->}}
+                        <input ng-model="controller.somethingOfYourChoice" class="form-control" />
+						{{controller.somethingOfYourChoice}}
 					</div>
 				</li>
 			</ul>

app/components/controllers/ControllersController.js

@@ -4,5 +4,12 @@ app.controller('ControllersController', ControllersController);
 
 
 function ControllersController(){
-	this.controllersStatus = 'Working';
-}
+    this.controllersStatus = 'Working';
+    this.friends = ['Joey', 'Chandler', 'Monica', 'Phebes', 'Ross & Rachel'];
+    this.addFriend = function () {
+        if (this.newFriend) {
+            this.friends.push(this.newFriend);
+            this.newFriend = null;
+        }
+    }
+}

app/components/controllers/controllers.html

@@ -32,12 +32,18 @@ <h1>Exercises</h1>
 				create a property in the constructor called friends which will be an array of strings 
 				['Joey', 'Chandler', 'Monica', 'Phebes', 'Ross & Rachel'];
 			</span>
-					<div class="answer">
-						<ul class="list-group">
-							<li ng-repeat="friend in controller.friends track by $index">{{friend}}</li>
-						</ul>
-					</div>
-				</li>
+                    <div class="box1-custom"><br />
+                        <ul>
+                            <h4><u>Friends</u></h4>
+                            <div class="answer">
+                                <ul>
+                                    <ul type="square" class="list-group">
+                                        <li ng-repeat="friend in controller.friends track by $index">{{friend}}</li>
+                                    </ul>
+                                </ul>
+                            </div>
+                        </ul><br />
+                    </div>				</li>
 				<li class="list-group-item">
 					<span class="challenge">Write a function called addFriend that will take the input from ng-model="controller.newFriend" If done correctly you should see your new friend pop up on the list above once you click submit</span>
 					<div class="answer">
@@ -50,4 +56,5 @@ <h1>Exercises</h1>
 				</li>
 			</ul>
 		</div>
-	</div>
+	</div>
+</div>

app/components/expressions/ExpressionsController.js

@@ -5,5 +5,5 @@ app.controller('ExpressionsController', ExpressionsController);
 
 function ExpressionsController(){
 	this.expressionsStatus = 'Working';
-		this.test = 'Angular is really neat! Look how easy it was for you to connect this string to your view';
+	this.test = 'Angular is really neat! Look how easy it was for you to connect this string to your view';
 }

app/components/expressions/expressions.html

@@ -69,19 +69,19 @@ <h1>Exercises</h1>
 			<li class="list-group-item">
 				<span class="challenge">Write a math equation that Angular can evaluate</span>
 				<div class="answer">
-					{{<!--Your Code Here-->}}
+					{{8 + 8}}
 				</div>
 			</li>
 			<li class="list-group-item">
 				<span class="challenge">Using string concatination get the customary Hello, World! to display on the screen. Don't forget your quotes</span>
 				<div class="answer">
-					{{<!--Your Code Here-->}}
+					{{'Hello, ' + 'World!'}}
 				</div>
 			</li>
 			<li class="list-group-item">
 				<span class="challenge">We have a controller driving this view. The controller is nothing more than an object with properties. One of the properties on the controller object is called test. Render the test property to the screen</span>
 				<div class="answer">
-					{{<!--Your Code Here-->}}
+					{{controller.test}}
 				</div>
 			</li>
 		</ul>

app/components/repeat/RepeatController.js

@@ -1,60 +1,87 @@
-var app = angular.module('angularPlayground');
+var app = angular.module('angularPlayground');
 
 app.controller('RepeatController', RepeatController);
 
 
-function RepeatController(){
-  this.repeatStatus = 'Working';
-  //The cart is an array of items that we are adding from our view
-  this.cart = [];
-  //The store is what we are using to populate our page with
-  this.store = {
-    items: StoreData
-  };
-  //*** No Need to edit anything above this line ****
-
-  this.name = "My BɼokƏn Cart!";
-
-  this.getCartCount = function(){
-    //return the length of our cart
-  };
-
-  /*
-  * Write a calculateCartTotal function
-  * make it assesible to our view
-  * this function should return the total cost
-  * of each item that is in our cart
-  */ 
-
-
-  this.removeItemFromCart = function(item){
-    //Item gets passed in from our view when the user clicks the x button
+function RepeatController() {
+    this.repeatStatus = 'Working';
+    //The cart is an array of items that we are adding from our view
+    this.cart = [];
+    //The store is what we are using to populate our page with
+    this.store = {
+        items: StoreData
+    };
+    //*** No Need to edit anything above this line ****
+
+    this.name = "My BɼokƏn Cart!";
+
+    this.getCount = function () {
+        //return the length of our cart
+        return this.cart.length;
+    };
+
     /*
-    * This function should be able to remove the passed in item
-    * from our cart. You will have to first identify where the passed
-    * in item is in the array. Then you will need to use the correct
-    * Array.method to remove 1 item hint method(i, 1);
+    * Write a calculateCartTotal function
+    * make it assesible to our view
+    * this function should return the total cost
+    * of each item that is in our cart
     */
-  };
-
-  this.addItemToCart = function(item){
-      //item gets passed in to this function from the view
-
-      /*
-      Our cart demands that items being added to it must have the following properties
-      var newItem = {
-        name:'',
-        color:'',
-        size: '',
-        quantity: 1,
-        price:'',
-      }
-      console.log the item being passed in from the view 
-      to figure out which properties from item need to be 
-      remaped to the newItem object. 
-      After building the newItem add it to the cart 
-      */
-
-  }
-
+
+    this.calculateCartTotal = function () {
+        var total = 0;
+        for (var i = 0; i < this.cart.length; i++) {
+            total += this.cart[i].price * this.cart[i].quantity;
+            //console.log(i + " Item:"+this.cart[i].name+" Price:"+this.cart[i].price+" Quantity:"+this.cart[i].quantity + " RunningTotal:"+ total);
+        }
+        return total;
+    };
+
+    this.removeItemFromCart = function (item) {
+        //Item gets passed in from our view when the user clicks the x button
+        for (var i = 0; i < this.cart.length; i++) {
+            if (item.name === this.cart[i].name &&
+                item.color === this.cart[i].color &&
+                item.size === this.cart[i].size &&
+                item.quantity === this.cart[i].quantity &&
+                item.price === this.cart[i].price) {
+                //console.log("Delete " + i + " which is " + item.name + ":" + item.size + ":" + item.color);
+                this.cart.splice(i, 1);
+                break;
+            }
+        }
+        /*
+        * This function should be able to remove the passed in item
+        * from our cart. You will have to first identify where the passed
+        * in item is in the array. Then you will need to use the correct
+        * Array.method to remove 1 item hint method(i, 1);
+        */
+    };
+
+    this.addItemToCart = function (item) {
+        //item gets passed in to this function from the view
+        //console.log(item);
+        var newItem = {
+            name: item.name,
+            color: item.selectedColor,
+            size: item.selectedSize,
+            quantity: 1,
+            price: item.price,
+        }
+        //console.log(newItem);
+        this.cart.push(newItem);
+        /*
+        Our cart demands that items being added to it must have the following properties
+        var newItem = {
+          name:'',
+          color:'',
+          size: '',
+          quantity: 1,
+          price:'',
+        }
+        console.log the item being passed in from the view 
+        to figure out which properties from item need to be 
+        remaped to the newItem object. 
+        After building the newItem add it to the cart 
+        */
+    }
 }