Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.9 Color Switching

One of the UI features created in the course Up and Running With Foundation for Apps is the ability to choose one of several colors for any task. You’ll add this functionality to your controller in this lesson.

Related Links

2.9 Color Switching

Hi. Welcome back to create a foundation for apps control a using angular J.S. in this lesson. We're going to set up some functionality in application that will allow people to change the color of the tasks. Now we're working with the card UI element that comes stocks ended with foundation for. And one of the features of those cards is the ability to change their color just by adding a class name onto the card. So you can see here some of the colors that can be added just by changing that class name. And these are what we're gonna take advantage of. So we're gonna set up the ability to change the class name that's applied to one of these cards. Thereby switching its color to one of the colors that you see here. Okay so down here I've just set up a basic button, we'll have a few of these and each one will change the color of the task card when it's clicked, and we're starting with the default color button. So if somebody has changed the color of a task they can change it back to that original white pressing this default button. So as we've done a couple times so far we're going to use ng click. And we're going to have a call a function name set task color and we're going to have this function pass two arguments. The first is going to be the ID of the card that we're trying to change the color of so we know which one to alter. The second is going to be the class name that we wanna apply to the card in order to change the color. So for example, if we add the class name success to our card, it will turn green and if we have no added class name, the card will just be the original default white. So first we'll pass and then because this is a default button, we're just going to pass an empty string to say that we don't want an extra class added to the card when this button is pressed. Again now let's make a copy of the HTML for this button, and use it to set up a success color switch button. So we'll change the button text to read success. And this time for a second argument we want to pass the class name success. And when that class name gets attached to our code, it will turn green and will do one more. This time setting up a warning color button would change the text to read warning and the second argument to warning. And this button is going to turn our task orange. There's one more thing that we need to do before we head back into our app .JS file. That is to scroll up to the Div. that's creating our cot and we're going to add N G class equals task.color and what's going to happen is when someone presses one of these color switching buttons. It's gonna fire off the set.task color function. and then that function is going to set the color property of our task. So if the color property is changed to success for example then this task.color here will equal success. And then, because we're using N G class here angular will take that string that says success and it will add that word as a class name to our div. So let's save that and head into our app.js file and create our set task color function. All right, so let's set up our function. We'll add scope.SetTaskColor = function Function, and we're going to pass the ID of the task and the color that we're switching to. Now just as we've done a few times so far we're going to filter through our tasks and find the one that's being targeted by our function. So we'll start filtering and we'll set up our callback function. We'll set up and if else check to find the task that we want to target and to written any other tasks back into the right unchanged. Then once we find the task that we're targeting for color change. We're gonna modify its color property and we're gonna change it to the value that has been passed through our color argument. And then, we'll return that element back into the array, and there that's done. We're gonna update local storage for our saved tasks and we're just using the same code to do that as we have each time so far. And then the last thing that we need to do is just set an initial color for each task when it's first created. So we're gonna go back up into our create task function, and then after we set up the task ID we'll set up task.color. And we just set it to an empty string so the color of a task is just the default white when it's first created. Right. So let's save that and go back into our app and see how everything looks. All right, so we're back in our app. I just added a couple of extra tasks to help us see the effect of the colors a little bit more clearly. And now, if we scroll down at the bottom of each of our tasks we have our three color changing buttons. If we hit the success button, we change the color of the task to green and the warning button. Change this color from turquoise to orange and each individual task can be a different color. And then if you don't like the custom color you can just switch it back to default. And because we have that color setting being automatically changed into local storage we can refresh the color of the tasks will still be in place. OK, so now we're almost there just as we're laying a bit of groundwork for later U.I. enhancement with our Color changing functionality. We're also going to add the ability to set task status, so that means the ability to set a task to complete status or incomplete, so that as a person is working through their tasks they can check them off. And by adding this functionality in now in the is design phase it'll be possible to do things like filtering out all the completed task, so you're only looking at the incomplete tasks. And to change the presentation of a task depending on if it's complete or incomplete. And we're going to add that sort of switching functionality in the final lesson of this course. I'll see you there.

Back to the top