So to start off there's a link in the guide notes below and it will bring us to this HTML form and basically the idea here is we have a first name and a last name and a submit button and you can see that there's a form tag here. And then there is an input tag here with type submit. So when we hit submit we can do something with this data and this is the very approach we want to take.

So back in our code let's go ahead and create our form. So looking over that code on W3 schools so we can type

 <form Onsubmit= {this.handleSubmit} id="madlib-form">  </form> 

then put everything in here within the form all of our inputs.

Now below this route, we want to open up another row and this is where we will be storing our generate mad lib button the way we can do this is by typing out an input much like you see here on W3 schools. So back in our code editor here just type in

<input type="submit" className=" generate-button" value="Generate Mad Lib">

and this value is just what it's going to be displaying to the user. So much like you can see here in the browser. If I changed this to Madlib Button and hit run this would now be worth Mad Lib Button. So what we want to do is actually wrap this in a column so write out a column and pop it in there. Now we want this column to be md width of 12. So it takes up the entire column. Your input will not be taking up the entire column. So I'll show you how that works later on. Let's give this a className="button-wrapper".

Now as you can see here our submit values this.handleSubmit. But we don't actually have a handleSubmitfunction yet. So the next thing we need to do is write out that function and we can do that right below our handleChange between our render function and handleChange function by typing on handleSubmit = function. Now we want to type event in so we can have access to our form button. In here let's just console log something so we know it's working real quick. So console.log('trying to handle submit') and then we have to type out event.preventDefaultin order for this to work.
Let's just .bind(this); to our instance so because we're going to be accessing applications state we're going to want to set state in this function and that piece of state is called the completed form or form completed whatever we want to write. The reason we do this is so we can keep track of whether or not the user has submitted the form. So we need to know if the user clicked to generate mad lib or clear mad lib. And the way we can do this is by typing in this piece of state constructor completedForm: false, because obviously the form is not submitted it's not completed until they've hit the button. So let's just first see if this is working so save the app and go into the browser and let's see if it's working. All right so make sure your app is running before you do this my app isn't running so I'm going to open up my terminal down here.
All right so npm start. All right so our app is running if you reload that we will have our generate mad lib button down here.

Let's go ahead and open the console since we have that console log in there. And then just hit the Generate button and you'll see it's trying to handle submit.

That's exactly what we want right now. So let's pop over back into our code editor and let's actually change the state. Let's modify the state so we can tell the application that the form is completed. So in here just type this.setState({completedForm: true}); then just console.log('formCompleted: ${this.state.completedForm.}'); Let's actually put this right above our setState call and I will tell you why. Save that we load the page and hit the generate button you'll see it says false and that's because we put it right above our set state and now we can generate it again. And you'll see that it's true because now it's set to true. So let's go ahead and just delete those two because we know this is working we know setting our state.

Now we'll come back to why we're doing this. Later on with the completed form and how we're going to type this into our application for now just know that we need to have that in there and that that's working. Let's go ahead and style our generate button now you'll see that we gave it a <Col md="12" className="button-wrapper"> and then we gave our input a className="generate-button". So the two tags will be working with here or a button wrapper and generate button. So hop over into our main.scss and let's actually go into our madlib_form.scss and down here let's write out our tags. So .generate-button and .button-wrapper.

So let's start off by giving our generate-button a height: 50px;, width: 300px; and the border-radius: 4px; and you can see over application not this is green. It's the same green as this will just give it a color of background-color: $bottegaGreen; and this is declared in her variables scss file so if you hit save it will generate and you'll see that we're coming along nicely. Here we have a button that says generate Mad Lib. But the next thing that you will notice is that it is black and in here it's white so let's go ahead and add the style for that. So color: white; and let's make the font-size a little bit bigger so font-size:
1.25em;should work and then let's give it a bolder font. So font-weight: 500; should be good. Go ahead and reload the page or wait for it to reload and we have a nice looking button here and it's looking pretty close to this so it looks like the font-weight is a little bit less on that let's just font-weight for now. Alright, so that's looking pretty nice.

Now for the button-wrapper, this is what's going to let it go in the middle and this goes back to flexbox. So if you remember what we did with the inputs to get him in the middle we set our display to flex in our content wrapper. In this case, our button wrapper and then we made our flex direction call them. We also set a line items to center.

So if you save that and reload it then it should be centered. All right sweet so our button is centered and It's looking pretty close to this. Now it looks like we're missing maybe the font so if you look at the 7 and the button the 7 is really noticeable. I think you'll see that it's popping down a little bit on the font and in here it's not doing that. So looks like we have the wrong font so the way we can fix this is by applying our font to the whole body. Right now we actually are importing the font correctly which is right here and are index.html. So the way we can actually fix this is by going up to, let's actually go up to our main.scss. Above this let's write out the body tag and we are actually gonna have to do this after variables since our variables file contains our font so down here just type in

body {
   font-family: $font-primary;
}

and that should apply across our whole application so reload the page and you'll notice that our 7 is looking right our generate button is looking a lot better and overall our app is looking much nicer.

All right so that's it for this video, to end it let's just go ahead and commit our code.

git status
git add .
git commit -m " added a form, added a submit input, added completed state, and styled our generate-button and button-wrapper"
git push origin master

All right so that's it for this video and the next video we will be talking about the clear mad lib button and we will also be styling that button so when we hit this button nothing happens. But in our completed app we hit generate you'll notice the changes to clear mad lib. So let's go ahead and implement this button and then after that let's go over our content component and get the base skeleton of that component laid out. All right I'll see you in the next video.

Resources

source code
https://www.w3schools.com/html/html_forms.asp
https://www.w3schools.com/html/tryit.asp?filename=tryhtml_form_submit