3.3 The "Create Quiz Form" Component

At the end of the previous lesson, we talk about adding in some interactivity for the end user to start to add in new cards that we're gonna represent new quizzes and new lists of FlashCards. So, imagine you, as a user, coming on to this page and saying, okay, I like that I have Chapter 1 and Chapter 2. But I need to add a Chapter 3 or I need to add some other collection of FlashCards, how can I do that? So the first step to that is, I need to be able to create the basic UI components that will facilitate that functionality. So what I wanna do, in my mind, anyway is, I wanna be able to add a button. And when the user clicks that button, a new form is going to be displayed that's going to allow me to create a new chapter, or new quiz list, if you will, and give it a title and a description. So the first thing we want to do is we want to build that UI. So let's come over to our code and the most logical place to put it, I think, is right underneath here/ Now granted, this layout is not perfect, and we'll adjust it over time. But, just imagine that we have a button at the bottom of all of these quiz lists that's going to be a plus sign or any sort of button you really want. But we're gonna use Semantic to be able to create a button with a plus sign in it, so that when the user clicks it, it's gonna display the form, so let's begin by adding that plus button. So the first thing that I wanna do is I want to create some markup underneath my quiz list. Now honestly, as I mentioned before, we probably don't wanna do it in here, just writing raw code, because we're gonna clutter up this App.vue file. So, the next logical thing to do is to create a component. So let's come over here to our Components folder and let's go ahead and add a New File. Now, this file is going to be CreateQuiz.vue, and once again, this is going to be a component. So let's go ahead and create the different pieces that we're going to need to create a component. So the first thing is we're going to need a template. So we'll go ahead and create that section, then we'll go ahead and create our script section. And within here, we're going to do our normal export for our modules, so we're gonna have our export default. And then underneath here, let's close off the script and then we'll go ahead and do some style, and we'll just leave it like that. Okay, so this is our basic component called CreateQuiz. Now what we're gonna need to do is we're gonna need to be able to add some markup to our template that's going to represent what this button and this form is going to look like. Well, as I mentioned before, I would like to start with the button. So like everything else in Symantic, everything is gonna start with a div. Now, what I want to do is I want to create this one collective div that's going to contain both of these UI components, both the button and the form. So let's begin by simply creating that wrapper, and that wrapper is going to dictate where this is going to be, how everything is going to be aligned, and all that sort of stuff. So we're gonna start by creating a div here and this is going to be a ui basic content div, and it's going to be center aligned. Which means all of the text inside it's going to be center aligned, and it's gonna be a segment, so we're gonna see what all that looks like here in just a moment. Now the first thing that I wanna do is I want to create a button, and like everything else in Semantic, we are going to apply some classes to this. So this is going to have a class of ui basic button, and it's gonna be an icon. So then inside here, what I wanna do is I want to create that icon. And that icon is also going to have a class of plus icon, so basically, all we've done is created some markup. And that's really all that's necessary to get started for this part of the UI. So now that I have something that I can actually display, let's go ahead and start to display that on our main page so we can see what it's going to look like. So I have this new component called CreateQuiz, so let's go over to app.vue because that's where it's going to live. And let's go through the basic steps to once again add a component, just like we did with our QuizList. So our first step is we want to import our CreateQuiz and we're going to import that from our ../components folder and the /CreateQuiz file. The .vue is kind of understood, and then we're gonna come down into our module here in components and we're going to add in our CreateQuiz component. And then in order to use it, we simply come up to where we wanna use it within our template and create the appropriate markup, or element that represents that component. And once again, since it's a two-word component, we're going to use a hyphen, just like we did with QuizList. But this time, it's going to be create-quiz, just like that. And then we'll close it off, create-quiz, just like that, and let's go ahead and save that. So if everything has worked properly, now underneath our chapters, underneath our quizzes, we should see a plus button and we do. So we can click on this and nothing's gonna happen, but that's pretty much understood at this point, since we haven't added any interactivity, but we'll get to that part. So now that we have our button, we also want to have a form that we can display to the user when they click that button, so then they can add in a new title and description for the new quiz list. So let's come back over to our CreateQuiz.vue and let's add that in. So now within our parent div, but underneath the button, we're going to add in a new card that's going to contain this new form. So just as we did before, let's create a div that's gonna be a ui centered card, once again, so we've seen that, that's nothing new. And then remember, inside here, we have content, so we specify the content. And whereas before, we were saying we were going to create a header and some meta and some extra content and things like that. We're gonna change things up a little bit here and instead we are going to create a ui form. And that form is going to contain a couple of fields that we can fill in and then submit and then process here on our application. So let's start by creating a couple of divs. These are going to be fields, and then within here, I want to create a couple things. I wanna create a label, and I want to have this label be titled, since that's what we're creating at the moment. We want to add the title, and then we're going to add an input. Now, we're going to not worry about all these more traditional attributes inside of this element. Since, basically, all we want to say is that this is going to be a text input, and that's all we're gonna care about. We don't really need all the extra markup, cuz simply, we're gonna be processing all of this in JavaScript. So we don't really have to worry about that too much, but we'll add some Vue.js isms in here in an upcoming lessons. So now, we have this first field, so let's go ahead and save that so we come back and see what that looks like. All right, so I've got a Title and an input text box, so that's a good start. Now I wanna put another one underneath it, so let's just copy this and then we'll paste it underneath here. But this time, this is going to be for description. And this is once again gonna be an input type of text box, so let's come back over, and now we have Description. So then you can see what our form is going to look like. Now, this is a pretty dull form since there's really not a lot of interactivity, because we don't have any buttons to do anything yet, so that's what we want to add next. So, down at the bottom here, I'd like to add two buttons. And I want those two buttons to be kind of the positive and the negative, saying OK or Save or Create and a Cancel, and we'll have some corresponding colors for those actions. So let's come back over here, so we wanna stay within our form, underneath our second field, we're going to create a place for our buttons to live. So once again, we're going to create a wrapper div here. This is going to be a ui two button attached buttons, all right, so let's see what this is gonna look like. So we're going to create our two buttons, just like this, and let's copy these two guys here like that. And, we're going to once again apply some classes, so that we want this to be an ui basic green button. And we want it to be green cuz this is going to be the positive, and we'll just call this Save. And then we'll come in here and we'll give this a class. And we're going to say, this is going to be ui basic and this time we want this to be a red button, because we want this to be a negative, so it's gonna say Cancel. So let's save that and we'll come back over, and there we go. So we've got our form all created now. We have our button that's going to display our form, and then we have our form that's going to input a Title, and a Description, and then we have a Save and Cancel button down at the bottom. So things are looking pretty good here although, this is obviously not what we want it to look like. We need to make this a little bit more dynamic where we only want the button to show up in the beginning, and then when we click on it, we want to display this bottom portion, we want to display this form. So in the next lesson, I'm gonna show you how we can use Vue to handle that type of dynamic interactivity within our new component.