In this guide, we will be adding our clear mad lib button and we will style it as well. We will also utilize scss mixins to reduce the amount of code in our scss files and make it a lot more readable. If you head over to our completed app you'll see that when we tap generate this clear mad lib button appears. We want to add this clear mad lib button into our app once we hit generate and we'll also be applying the styles.

So the first thing you want to do is I'm just going to make this a little bit thinner so we can see our code and I'm just going to be showing you it like this. So in here, we need this to have another button in here when we hit generate the way we can do that is by rendering another one in there so we don't want to put an input we want to put in a tag. The first thing you want to do is type out a clear button like this. Let's give it a className="clear-button" and let's give it an onClick handler this.handleClick and let's just call it Clear Mad Lib.

I believe that's what we have in the completed app, yeah clear mad lib. Another thing you'll notice is in our completed app we don't have it using the columns properly but we're developing it correctly this time anyway and you'll see that our clear button is there and when we click it nothing happens. You open up the console there might be an error. Looks like there's not. So basically let's add our handle click the way we can do that is like this. Let's Well also bind it and in here we are going to be setting our state. So the reason we're going to set our state is because we need to clear this form. So we want to set it to its initial state. So you might just think you can copy this over and just do it like that. But again the documentation told us never to modify state directly like that and to treat it like a constant instead. So the way we have to do this is by typing this.setState and then wrapping this in parentheses. And that should be good.

So now if you reload the app or wait for it to reload and then we click it. You won't notice a difference because we haven't typed anything in but if we type something in and then we clear it should clear the form. Awesome so it clears the form but we don't just want this clear mad lib button there we want to see our generate button and then we want it to go back to the generate button when we hit clear. So the way we can do this is instead of just generating it right here we can just copy this whole thing and return it from a function when we call it. So let's call that {this.renderButton()} and this is pretty similar to a functional component except for there's no reason we make it into a whole separate component because it's just two different options and we're not going to use them anywhere else.

So the way we can do this is by typing out our function which is renderButton = function() and in here let's copy this in and then we just want to return these.

So when we first start up the app we want it to return our generate mad lib button so if we uncomment this and just return.

So reload the page and you'll see our generate button has appeared there. So now you might be thinking okay how do we get this to appear and how do we tell it when to appear and that goes back to when we set completed form. So you'll notice that when we hit generate or you might not notice it but what is actually happening is in our handleSubmit we're setting the state to completed form is true. So in here, we can do something like if(this.state.completedForm) then I want to return the clear button because the form is complete.

So when this runs it's going to return it's initially in return this and then we're going to set our state and just like the docs told us which we went over in a previous guide render is going to run all over again because state has been modified so that means that it's going to go down here. It's going to call render button and it's going to say okay this.state.completedForm is true let's return our anchor tag. So go ahead and save that wait for it to reload and we can test it out and you'll notice that it works.

All right so we hit generate, the clear buttons are there we are clear and the general button is there. Let's try putting in some input and see if that affects anything so you'll see generate doesn't do anything with the input which is what we want and then clear it gets rid of it. So that's exactly what we want. So the next thing we want to do is style our clear mad lib button to match this. So it's going to look a little nice like that. And the way we can do that is by first heading over to our madlib_form.scss file and if you look at our generate button we have these set of styles. Basically we can copy these styles over into another tag and get the same effect but it's going to be a little bit different since this is an anchor tag and not an input. So the first thing we want to do is just copy this

and then down here type in our class which is clear-buttonand then just put in these styles and save it.

Let's see what it looks like, all right so generate clear mad lib is looking pretty similar. There's a bunch of differences though that we can make to replicate it a little closer. So the first thing we want to do is we actually want to add a box shadow to this generate button because you'll notice in our completed app that there's a little bit of a box shadow behind these. So let's go ahead and go into generate-buttonand a nice little box-shadow.

All right that should be good. Let's also move down our button a little bit from our inputs so let's give it a margin-top: 42 px;. Let's save that reload our page and let's see what happens. All right so we have our margin for the generate but not for our clear button. So let's go ahead and copy that into our clear button

and you'll notice that our color on our clear button actually isn't working. And that could be because we're not referencing the anchor tags so let's reload that and see if that works. It might also be because the style is being overwritten so we hit generate. Yeah, it looks like it's still not there so let's go ahead and mark this important and basically what this important thing does is it says don't ever change this for this attribute for this HTML. So go ahead and reload that and we'll see if it's working. All right, so it's working. Now you'll notice there's a couple differences here. We know this is not centered and it's not in the middle. We can change that by first adding a padding-top: 9 px; and then we can center it by going text-align: center; so that should align it. And then while we're at it let's just change this to our blue color that is in our variables.scss file which is called $clearBlueI believe. The reason it's called clear blue is because it's for this clear button. So save that reload and we'll see if it's working. Awesome so it's working. Now you'll notice that there's a lot of duplicate code here. And thankfully since we are using scss we can utilize mixins. So the way we can do this is by first checking which code is the same and we'll see that background color is the same but it's different. We're both using background color but the values are different so let's just get that out of the way so we don't remove that. You'll notice the color is the same. It doesn't matter if we mark our generate button white important since this is a very small project. Generally you don't want to use the key word important because then anywhere else in your app you might want to change something then you'll be wondering why nothing can change and I actually ran into this issue the other day when I first started in a Wordpress app and I could not get this color to change. And it's kind of ironic that we're dealing with colors because this literally happened a couple of days ago but I couldn't get it to change and then I found out like two hours later that from inspecting the element which I should've done before I found out that we were using a template a theme and a bunch of styles that are marked important. I didn't realize that that's how the themes worked in Wordpress so I mean that's nice for consistency. But for example in a project if another developer had no idea that you had a bunch of styles marked important he might try and be changing things and he can't so you've got to be really careful with this with this tool. It's a good tool but you got to use it correctly or you're going to run into a lot of problems and be wondering what the heck is going on so let's just see what is the same. And let us make a mix in our font-size our color our border-radius our width our height it's all the same. So let's just copy and oh we also have a margin and let's have this box shadow in here as well just because we need to do that. So let's go ahead and copy all this and let's throw it into a mixin. So right above generate-button let's type in this @mixin buttonStyles and let's just throw those in there. Now we can get rid of all these in our generate-button so we can get rid of margin, box shadow, font size, color, border-radius, width, and height. Awesome so go ahead and fill that out or unfill it out rather. And then we just need to import our mix in or include it rather so @include buttonStyles and then up here we need to do the same thing and generate-button @include buttonStyles. And let's get this out of the way so we can focus more on buttons.

Save that reload the page and you'll notice that nothing has changed except for our box shadows that we added. So that's really awesome. It reduced the amount of lines of code we had probably not by a lot but in bigger projects, you'll notice this very quickly. And it also has made it more readable. So when calling generate button we just have to import our button styles and we want to make another button just our button styles and then we can make the appropriate changes that we want. So you'll also notice if I type in color is like I don't know blue or something. We want our clear button to have a color of blue for the text. You'll notice when we reload this it's still white and if this mix in was in a different file so for example if we x this out created the new file called itmixins.scssand threw this mix in here. Let's also say this is mixins.scsshit save and then up at our in our main form scss we used @import 'mixins'; and then save this and then try and make our color blue. We'll be wondering why the heck it's not changing blue and that's because we said this is important.

So you got to be really careful with the important word in scss. So let's go ahead and delete that.

Now another thing you might notice is that when we hit clear it clears and then we hit generate there's this weird border that happens to go around the button when we click which is pretty standard across buttons but it's kind of bad for our specific app for this specific experience. So let's go ahead and figure out how to remove that and you'll notice as well that there is a border around the text box which we also don't want in there. So the way we can remove this is by is by adding in a scss selector and setting outlying to none. So the way I figured this out was I googled it. I literally googled how to remove input selection style scss and then I clicked on the first Stack Overflow link and I was brought to this and I tried out the first one. You'll notice if you try it out it does not work. And this is just to show you how to google to find answers so when you're done with this course you can still kind of find solutions to your problems so you'll notice it doesn't even work for input doesn't work. And that's because he says in your case so it's specific to this person's case. So I then copy this over.

And I noticed that it worked. But this is another thing you want to watch out for. Notice that it works and that's all great but we don't need a couple of these selectors and we don't need select: focus; and textarea: focus:.

So the reason I'm saying this is because it's really important not when looking for solutions you don't just copy things over like it's not bad to copy things or and see if it works but you really need to know what's going on because you might copy a whole bunch of styles for example that doesn't even do anything in your specific app that just makes it more code and less readable and more confusing. And on top of that if you wondered how it actually works then you don't have to google for it the next time you run into a similar issue. So that's just an example of how to find a solution using Google and Stack Overflow. I'll leave this in the guide nodes below so you can take a look at it. Yeah, that's a good way of finding solutions so our button doesn't have that outline around it and our inputs now look a little cleaner in some specific apps I would want to leave the input box around it. But for this one I think it's good to keep it a little bit sleeker and minimal.

All right so that's it for this video and the next video we will be creating our content component so we can see the content of our mad libs app and we might not get around to the styles but we'll get as far as we can in that video and if not in the next video. After that, we will finish up the styling and then we will be done with our application. See you in the next video.

Resources

source code
https://stackoverflow.com/questions/1457849/how-to-remove-the-border-highlight-on-an-input-text-element