3.7 Create a Flash-Card Component

Now we're gonna start to add in the functionality to be able to view the flashCards that are associated with each one of these quizzes. So the first thing that I wanna do is I want to create a New component, because I like to have all of these things clean and self contained. So, we're gonna create a FlashCard.vue component and then within here we'll just drop our templating. And really all we wanna do now is just be able to display the term and the definition. This is kind of a study tool, so all I wanna do is see the term and the actual definition. So we're going to start by creating a very simple template here, and all we're gonna do is create another card, like we've done before, and this time I'm only gonna specify it as a ui card. I'm not gonna make it centered anymore, and I'm gonna show you why because I'm gonna kinda structure this a little bit differently, and make the UI look just a little bit different than it has so far. Then we're going to create a div in here that's gonna have content, and then we're gonna create two things in here. We're gonna have a header just like we've done before, and this is going to contain the card dot term cuz remember back in our app.vue when we were defining these cards, we have two properties a term and a definition. So that's what we're looking to in corporate here, then we're going to create another div and this is going to be the description. So it's gonna look slightly different than it has so far, and this is going to be our definition like that, so we can save that. Now remember, in order for me to display this card information, I have to be able to pass it in to this component. So I have to use my props collection here and I'm gonna be passing in a card. And obviously in order to do that we need to start from somewhere that has access to these cards, so that I can pass it in to this flashCard component. And right now these things are all kind of stemming from our quiz list, and we'll just put it in here for now. And you can obviously move it around as you wish, but I think this is pretty simplistic and how we want to handle this. So for right now, we're gonna keep this kind of simple, and we'll add in some logic about when to show which group of cards. But for now we're just gonna come down here and we're going to just display these cards so you can see them all. So what I wanna do right now, is I want to display all of the cards that you would see for, let's say, the first quiz, which is really all that we have any sort of data in for right now. We have two cards in here, two flashCards in here for quiz number one. So that's the only one we're gonna worry about at the moment, but we'll add in some additional logic pretty soon. So let's come back into our quiz list, and what we need to do now we need to import our FlashCard component and that's coming from /FlashCard, just like that. And we're going to include this component, our FlashCard, and let's save that. So now up here, I can say that I'm going to have my flash-card component, just like that. And now I need to be able to bind to something again remember, we're looking to bind to all these, and we wanna loop through all of the cards that are associated with that first quiz. So what we're gonna do is we're gonna say v-for and we're gonna set that equal to for each card in quizzes and I wanna refer to the first quiz because that's the one that has all the cards in it right now in cards. And we don't have it yet but we should add it in there, we're gonna specify a key, and we're gonna have that be equal to card.id so we should add that in right now as well. So we'll say we have an id, this is gonna be 1 and we're gonna have an id here too, that is going to be 2, we'll save those. Just to kinda keep in line with best practices, and then we need to bind. So we'll say v-bind:card and we're gonna set that equal to card like that so we'll go ahead and save that. So now as you can see, we want to display all of the FlashCards basically under our list of quizzes. And then we can come back over here and we can see that we have Some Word, SomeDefinition, Another Word, and a definition of another word. Now, the reason why I didn't say centered, is because I wanna changed this app just a little bit. And you could leave it in center then maybe we'll play with that a little bit, but this kind of vertical stacking, I don't really like it. I want to adjust it a little bit and I wanna make it more horizontal base so I can fit several horizontally crossed and then create several different rows of those. Now, the way that we do that is actually by using another div in Semantic UI and this is going to be ui cards. So now I have these cards collection here and I can take this FlashCards and I can cut this out and I can stick them in here and safe that. And by doing that, I'm gonna get them to stack horizontally as many as will fit and then they will start to stack downwards. And yeah, so maybe leaving the centered out didn't look very good, so we'll go back to the FlashCard and we'll stick centered back in here, just because it's gonna look a little bit better there we go. So now it's gonna stack them nicely this way, and we can do the same thing with our quizzes and we'll get to that and start to clean that up a little bit later. But as you can see now, we're able to display the FlashCards that are associated with this Chapter 1. Now, this is good, but the problem with this now is that this is, once again, showing all the time and I don't necessarily want that. So what we're gonna handle next is the transitioning a little bit between states, where we are going to kind of hide this cards until one of these quizzes is clicked on or selected. And then we'll figure out which one has been selected and then will transitioned using some cool fade in and fade out stuff. So we can then make this a little bit more appealing and a little bit more polish when the end user wants to use it.