hey guys welcome back so first things
first a new version of Bulma version
zero point six point two came out this
week so I’d like to update the
dependents in a project here so let’s go
back to Adam if you go to package.json
we’ll just gonna update from zero six
one two zero six two let’s save the file
let’s do npm install and that’s gonna
replace the dependency for us so once
that’s done let’s do empty em start
let’s open the dev tools very good right
back in the project here let’s go to
come down GS so the next thing I’d like
to do is I’d like us to create a set of
buttons so one has to create a pause
button as well as a resume button so
that you can stop the timer as well as
resume it a very simple idea that’s
gonna help us in exploring the idea of
properties as well as parent-child
communication so what’s creating new
component here let’s call it controls
yes and that’s to import react from
Ria’s that’s the first thing we always
have to do and next let’s create a
function we’re gonna call it controls
I’m gonna use arrow functions as usual
and it’s going to receive properties
okay and there’s only one argument to
the function props next thing is let’s
do let’s see let’s go to the
documentation of Bowmont
let’s see documentation and let’s go to
elements and I believe buttons so for
button this is basically what the
buttons look like and what I’m actually
looking for is let’s see a button group
there we go I’m just gonna copy that
over we’re gonna have two buttons here
let’s see look dad that’s just the
styling here just a love it that’s so
we’re gonna have two buttons
okay it looks good one of the buttons
just going to be cause and the other one
is going to be resumed okay it looks
good so let’s see let’s make one of them
is danger and by the way if you go back
to the dogs you can see all the classes
here I pretty much know them by heart by
now but if you’re not sure you can
always go back see here for example if I
wanted to use a red button it makes
sense for like a pause button or a stop
button we can use is danger class and
for a resume button I guess we’re gonna
use success which is basically green so
it’s gonna be his success class so let’s
go back is danger the other one is going
to be is a success the other thing you
could also do is we could do is outline
twelve in fact let’s go back to the
application itself let’s see what we
have here okay so we don’t have anything
yet and that’s because we need to put
the controls in the countdown timer
right so let’s go in here and of course
can forget to do export default controls
that’s gonna be our functional component
and back in here let’s do it’s going to
here let’s do import controls from
controls during basically on the same
level so if we just use a relative path
like that and let’s go in here let’s see
we put time let’s put them just below
the session so I’m going to do controls
like so if you go back you can already
see them here okay the one thing we
forgot to do though is we need to make
sure we replace class with class name
because class is not a valid well it is
a valid property because class and any
a6 identifies a class as we saw right
and countdown for example that’s a class
right so we can use class because it’s a
reserved keyword I think I mentioned it
before so we need to use class name
and classname is exactly what we need so
back in here we got our buttons and the
other thing I’d like to do with them so
let’s go back to controls okay the other
thing I’m going to do is I’m gonna add a
class is outlined and let’s see what
that looks like that’s basically going
to add and helplines to the buttons as
you can see right there and you can see
the same thing in the docs right here
this is the class I’m using his outline
okay so that can the editor the other
thing I want to do is I’m also going to
add his rounded class and this is a new
class that’s been added let’s see is
rounded exactly six point two that’s the
version when this class was I that’s why
I wanted to pull it in and this is
basically going to make the buttons
rounded
now the next thing is because the
contrast between red and blue isn’t
really that nice I think what we’re
gonna do is back in app G is actually no
and come down Jess I’m going to change
from is info to is dark this is going to
make the background basically dark and
it looks much better now when come down
GS the next thing I’ll do is I’ll change
from dim section let’s see where’s that
div just gonna hide that so I want to
change from a div to a section because
section makes more sense semantically in
fact if you open up the dogs let’s go to
overview see I’m gonna go to layout
section that’s what they recommend using
if you have a section so an element with
a class of section it makes sense to use
a section wrapper so just a small thing
it doesn’t really affect spelling in any
sense but just semantically makes more
sense so that looks good to me the only
thing is what to make these buttons
centered there’s actually a class for
that so if you go back to buttons and
the section that we looked at was the
section for buttons that were actually
grouped if I could just find it right
there is good but there’s also another
class that’s called is group centered
and if you go to the forum
and let’s search for Center has that on
center there we go so we have a div here
with a class of field and also is group
so if you add a class that’s known as is
group centered that’s basically going to
center the Block in this case the block
with buttons and this is precisely what
we want so it’s at that class as well
and here we go we’ve got the buttons
next I’m gonna add a class is medium
that’s gonna make the buttons a little
bit larger for us to see like so well
that’s good okay so this is pretty much
it so not the idea is basically that the
buttons need to be able to control the
state of the counter so whenever you
click on the pause button this is
supposed to make the countdown stop and
if you click on resume that’s basically
going to resume the countdown
so back in countdown Jia’s let’s add a
new property here and I’m going to call
it paused okay and by default it’s going
to be false and we’re gonna pass that
property to our control okay so in the
past it paused properly and it’s going
to be and it’s going to be this state
paused in fact you can see here that we
have a duration we’re basically using
this structure in order to get that we
could also get paused so that we don’t
have to do this sort of thing so if you
just call cost directly but also instead
of using anchors like links let’s
actually use buttons you’re gonna see
I’m only why that makes a lot more sense
so it used buttons okay and the reason I
switched from anchors to buttons is
because of the disabled attribute so the
idea here is basically the following we
want to disable the pause button if
become don’t timer is paused right to
make sense to enable the resume button
so that you can click on it and resume
the timer at the same time if the Kelvin
summer is not paused or meaning active
it’s the currently active it makes sense
to disable the resume button but keep
the pause button alone totally makes
sense and what’s actually go in here and
implement it so like I said it makes
sense to disable the pause button if
the pause property is true it makes
sense
to disable the resume but if the pause
property is not true and in fact because
we only have one property let’s also use
restructuring here so I’m gonna have
pause here as the only argument and I’m
going to remove the props from in there just gonna keep it as a single variable
first a new version of Bulma version
zero point six point two came out this
week so I’d like to update the
dependents in a project here so let’s go
back to Adam if you go to package.json
we’ll just gonna update from zero six
one two zero six two let’s save the file
let’s do npm install and that’s gonna
replace the dependency for us so once
that’s done let’s do empty em start
let’s open the dev tools very good right
back in the project here let’s go to
come down GS so the next thing I’d like
to do is I’d like us to create a set of
buttons so one has to create a pause
button as well as a resume button so
that you can stop the timer as well as
resume it a very simple idea that’s
gonna help us in exploring the idea of
properties as well as parent-child
communication so what’s creating new
component here let’s call it controls
yes and that’s to import react from
Ria’s that’s the first thing we always
have to do and next let’s create a
function we’re gonna call it controls
I’m gonna use arrow functions as usual
and it’s going to receive properties
okay and there’s only one argument to
the function props next thing is let’s
do let’s see let’s go to the
documentation of Bowmont
let’s see documentation and let’s go to
elements and I believe buttons so for
button this is basically what the
buttons look like and what I’m actually
looking for is let’s see a button group
there we go I’m just gonna copy that
over we’re gonna have two buttons here
let’s see look dad that’s just the
styling here just a love it that’s so
we’re gonna have two buttons
okay it looks good one of the buttons
just going to be cause and the other one
is going to be resumed okay it looks
good so let’s see let’s make one of them
is danger and by the way if you go back
to the dogs you can see all the classes
here I pretty much know them by heart by
now but if you’re not sure you can
always go back see here for example if I
wanted to use a red button it makes
sense for like a pause button or a stop
button we can use is danger class and
for a resume button I guess we’re gonna
use success which is basically green so
it’s gonna be his success class so let’s
go back is danger the other one is going
to be is a success the other thing you
could also do is we could do is outline
twelve in fact let’s go back to the
application itself let’s see what we
have here okay so we don’t have anything
yet and that’s because we need to put
the controls in the countdown timer
right so let’s go in here and of course
can forget to do export default controls
that’s gonna be our functional component
and back in here let’s do it’s going to
here let’s do import controls from
controls during basically on the same
level so if we just use a relative path
like that and let’s go in here let’s see
we put time let’s put them just below
the session so I’m going to do controls
like so if you go back you can already
see them here okay the one thing we
forgot to do though is we need to make
sure we replace class with class name
because class is not a valid well it is
a valid property because class and any
a6 identifies a class as we saw right
and countdown for example that’s a class
right so we can use class because it’s a
reserved keyword I think I mentioned it
before so we need to use class name
and classname is exactly what we need so
back in here we got our buttons and the
other thing I’d like to do with them so
let’s go back to controls okay the other
thing I’m going to do is I’m gonna add a
class is outlined and let’s see what
that looks like that’s basically going
to add and helplines to the buttons as
you can see right there and you can see
the same thing in the docs right here
this is the class I’m using his outline
okay so that can the editor the other
thing I want to do is I’m also going to
add his rounded class and this is a new
class that’s been added let’s see is
rounded exactly six point two that’s the
version when this class was I that’s why
I wanted to pull it in and this is
basically going to make the buttons
rounded
now the next thing is because the
contrast between red and blue isn’t
really that nice I think what we’re
gonna do is back in app G is actually no
and come down Jess I’m going to change
from is info to is dark this is going to
make the background basically dark and
it looks much better now when come down
GS the next thing I’ll do is I’ll change
from dim section let’s see where’s that
div just gonna hide that so I want to
change from a div to a section because
section makes more sense semantically in
fact if you open up the dogs let’s go to
overview see I’m gonna go to layout
section that’s what they recommend using
if you have a section so an element with
a class of section it makes sense to use
a section wrapper so just a small thing
it doesn’t really affect spelling in any
sense but just semantically makes more
sense so that looks good to me the only
thing is what to make these buttons
centered there’s actually a class for
that so if you go back to buttons and
the section that we looked at was the
section for buttons that were actually
grouped if I could just find it right
there is good but there’s also another
class that’s called is group centered
and if you go to the forum
and let’s search for Center has that on
center there we go so we have a div here
with a class of field and also is group
so if you add a class that’s known as is
group centered that’s basically going to
center the Block in this case the block
with buttons and this is precisely what
we want so it’s at that class as well
and here we go we’ve got the buttons
next I’m gonna add a class is medium
that’s gonna make the buttons a little
bit larger for us to see like so well
that’s good okay so this is pretty much
it so not the idea is basically that the
buttons need to be able to control the
state of the counter so whenever you
click on the pause button this is
supposed to make the countdown stop and
if you click on resume that’s basically
going to resume the countdown
so back in countdown Jia’s let’s add a
new property here and I’m going to call
it paused okay and by default it’s going
to be false and we’re gonna pass that
property to our control okay so in the
past it paused properly and it’s going
to be and it’s going to be this state
paused in fact you can see here that we
have a duration we’re basically using
this structure in order to get that we
could also get paused so that we don’t
have to do this sort of thing so if you
just call cost directly but also instead
of using anchors like links let’s
actually use buttons you’re gonna see
I’m only why that makes a lot more sense
so it used buttons okay and the reason I
switched from anchors to buttons is
because of the disabled attribute so the
idea here is basically the following we
want to disable the pause button if
become don’t timer is paused right to
make sense to enable the resume button
so that you can click on it and resume
the timer at the same time if the Kelvin
summer is not paused or meaning active
it’s the currently active it makes sense
to disable the resume button but keep
the pause button alone totally makes
sense and what’s actually go in here and
implement it so like I said it makes
sense to disable the pause button if
the pause property is true it makes
sense
to disable the resume but if the pause
property is not true and in fact because
we only have one property let’s also use
restructuring here so I’m gonna have
pause here as the only argument and I’m
going to remove the props from in there just gonna keep it as a single variable
Please follow and like us: