Time to add some controls so that a user can actually control which ingredients a burger should have
or should not have, and for that we need to add the build controls and we'll add this component in the
burger folder, I'll add a new subfolder which all name build controls
and there I will add a buildControls.js file.
Now the build controls will be a functional component so build controls is a function which receives
props and which will return some jsx in the end.
Therefore we of course also need to import react from react and we can then export the build control
function as a default.
Now how should build controls look like?
Now of course the study as always is up to you,
I want to have a div which I'll use to give this area some styling and in there, I want to have my various
build controls.
Now let's start with styling that area,
for that I'll create a new file buildControl.css and it will add a build controls,
excuse me,
the file should be named buildControls too
just like that js file, is plural. So in the css, I will add a build controls.
css class
and I want to give my build control to a width of 100% and for the background-color, I picked a
nice orange brownish color
#CF8F2E ,
I like this color for that. The display shall be flexbox to position all these build controls correctly,
I'll set the flex-flow to column to position them beneath each other, so in a column instead of in
a row.
I want to align all the text in the center, I want to give my box a tiny box shadow only at the bottom
1px spread and use this grey as a shadow color.
Margin,
auto and add a padding of let's say 10pxs and 0 from left and right
because text should be centered
anyways. Now this is my build controls area,
of course we should add some content to the build controls area and there I want to have a couple of
build controls,
you guessed it.
Now in my opinion, it makes sense to also outsource these build controls because it's not just one button,
it's a label and then two buttons and it's basically a reusable UI element
so putting it into its own component makes a lot of sense.
So inside the build controls, I'll add the build control folder and there, the buildControl.js file
and already the buildControl.css file for the styling thereafter.
Let's start in the js file though,
build control, this component will also be a function, will receive props and return some jsx, will import
react from react as you always know it and will export build control as the default.
Now we have to decide how a build control should look like,
now I will use a div as a wrapper, also for styling and then my build control should in the end have a div
which contains the text for that build control.
Basically the text, the name of the ingredient I want to add
so there I want to output something dynamically and
I will receive a prop for this and I want to name it label,
you can of course choose any name you want,
you could name it ingredient label, whatever you need. Next to it,
there will be two buttons,
the first button is of course therefore removing an ingredient less
and then I'll duplicate it to also have a more button.
Now I have two buttons which allow me to remove and add ingredients,
now I will need some
css for this build control to look good
so let's head over to the css file and there
let's add build control,
this css class.
I want to use flexbox to position the div with the text and the buttons, flex-flow will be row,
so the default.
I want to distribute them with space between so that they keep some distance from each other and
I will align all the content in the center, for vertical alignment and I will assign a margin of 5px
from top to bottom so that there is some space between the individual build controls but
zero from left to right. Now in the build control,
we have a button of course and the button should be of display block.
Normally it's inline, here I will overwrite this to be a block style button.
I want to inherit the font and set the padding to 5px, margin to zero or 5px. With 80px, it
should look good
and the border will be 1px solid and then #AA6817, excuse me that's also a brown color.
Cursor should be a pointer
and I want to remove that outline you have by default.
Now there are way more styles we can add to style the button and all the labels,
to shorten this, I will attach a file with all the other styles and you can simply add them below here.
Actually the attached file will contain the styles for this whole file
so you may simply replace everything in here with it.
These are all just styles to make sure we have classes to style the
less and more buttons differently and even disable buttons.
With that, let's go back to our javascript file, to the react code for which you're all here I guess.
So let's now import this classes object from our css file so that we can start using these css
classes and let's attach a class to our wrapping div. Here,
this will be the build control class.
I also need a class for my label div, here
I will use classes and then label, this was one of the css classes you just imported. And the buttons
also will receive class names,
the less button, for that I got the less class and the more button, for this button you might not guess
it but there I have that more button, like this.
Now a single build control is styled, the next step which we'll do in the next lecture is to now create
an array of such build controls in the build controls component.
Let's do that together in the next lecture.