transcript.txt

intro
0:00
hey everybody so in today's video we're
0:02
going to use JavaScript HTML and CSS to
0:05
create a dice roller program this is an
0:07
optional project you will need some
0:09
images of dice to work with if you're
0:11
able to find some images of dice I would
0:14
save them somewhere maybe on your
0:15
desktop once you have images of your
0:18
dice we're going to create a new folder
0:20
new folder I'll name my folder dice
0:23
uncore
0:25
images then take all of your dice images
0:28
move them to that folder
0:31
and now we are ready to begin we'll
HTML
0:33
create all of the HTML elements that
0:35
we'll need I will create a div section
0:38
this div will have an ID of container to
0:41
contain our
0:43
program I'll include an H1
0:47
heading with text of dice
0:51
roller after this H1 element I'll create
0:55
a
0:56
label the label will have text of number
1:00
of
1:02
dice afterwards I'll use an input
1:06
element I'm going to zoom in a little
1:08
bit
1:09
temporarily with this input element I'll
1:12
type in a number of dice I would like
1:14
such as 1 2 3 however I can type in
1:18
characters which I would like to avoid I
1:20
will set the type attribute of the input
1:23
element to be number we're indicating to
1:27
the user to select a number and not type
1:30
in anything although there are ways to
1:32
circumvent this this will be good enough
1:34
for now for the input element we can set
1:37
a default value I will set the value
1:39
attribute to equal one for the
1:42
default we can go below zero I'll set a
1:45
minimum with the Min attribute Min
1:49
equals
1:50
1 we can't go below one but we can
1:53
select any number one or
1:56
above now we'll create a
1:58
button
2:01
the button will have text of roll
2:06
dice the button will have its onclick
2:09
attribute I keep on spelling on lick
2:11
onclick attribute set to a JavaScript
2:15
function let's say roll dice we'll still
2:18
need to Define this function in
2:20
JavaScript after our button I'll create
2:23
two div
2:25
sections the first will have an ID of
2:28
dice result this will display some text
2:32
the numbers of the dice we roll the
2:34
second development will be for the
2:37
images ID dice
2:41
images and that is all the HTML that
2:43
we'll need let's head to our CSS file
CSS
2:47
and I'll Zoom back to
2:48
100% let's select our ID of container #
2:54
container I will change the font family
2:58
to ass sance sah font F such as Ariel
3:01
with a backup of s
3:04
serif I will text a line
3:09
Center increase the font
3:11
size in this project I'm going to use RM
3:15
instead of em because we'll be working
3:18
with a lot of different font sizes em is
3:20
the font size relative to the parent RM
3:23
is for the root for this specific
3:25
project I'll stick with
3:27
RM and I will set the font weight to be
3:32
bold let's style our button
3:35
next we are selecting our button I'll
3:38
increase the font size of the button to
3:40
be 1.5
3:42
RM I'll add a little bit of padding 10
3:46
pixels by 15
3:49
pixels I will set the Border radius to
3:51
round the
3:53
corners 10
3:56
pixels remove the Border because it's
3:58
ugly
4:00
border
4:02
none pick background color for the
4:07
button I'll pick something blue but I
4:10
like using hsl
4:15
values something like that looks good I
4:18
will change the font color to be
4:22
white and I will set the font weight to
4:25
be
4:26
bold not bad when I hover my cursor over
4:30
the button I will change the cursor to
4:33
be a
4:36
pointer let's change the background
4:38
color of the button when we hover over
4:40
it we are selecting the hover suda class
4:44
of the
4:45
button let's take our background color
4:49
I'll increase the lightness by
4:52
10% so that should change when we hover
4:54
over the button now when I click on the
4:56
button I'll increase the lightness even
4:58
more to show that it's active with our
5:02
button we will select the active pseudo
5:04
class I'll set the lightness to be
5:07
70% so when we click on the button it
5:09
should flash momentarily which it is
5:12
let's style the input element CU I can
5:14
barely see
5:15
it with our input element I need to
5:19
scroll
5:20
down let's increase the font size to two
5:27
RM I'll set a width of 150
5:32
pixels text align
5:37
Center and font
5:41
weight
5:43
bold with our HTML file we do have two
5:46
empty div elements currently we'll style
5:49
these at the end once we get our images
5:51
to populate we'll style that last with
JavaScript
5:54
the onclick attribute of the button we
5:56
set a function of r dice now we need to
5:58
define it
6:00
within our Javascript file we will
6:01
Define a function to R dice we have a
6:05
lot of constants to declare I'll create
6:07
a constant for the number of dice we
6:09
would like what's the value of this
6:11
input element I will
6:14
Define const num of dice what is the
6:19
number of dice we need to roll
6:22
equals document. getet element by ID the
6:28
ID of this input element
6:30
is I actually forgot what was it oh we
6:33
didn't set an ID okay let's do that okay
6:35
so for the input element the ID will
6:39
be num of
6:45
dice num of
6:48
dice but I would just like the value I
6:51
will access the value of whatever this
6:54
input element is for the next constant
6:57
we're going to get the dice result
7:00
this empty div
7:02
section const dice result equals let's
7:06
copy this line of
7:08
code but we don't need the
7:10
value we just need that ID dice
7:15
result then let's do this with dice
7:19
images so we can copy this paste it
7:23
const dice
7:25
images the ID was dice images
7:30
I'll create two empty arrays const
7:35
values this will be an empty array we'll
7:38
store all of the dice rolls the numbers
7:41
then we'll need an array of images const
7:45
images this will be for the images of
7:47
the dice at this point in time we're
7:50
going to create a for Loop that will
7:52
Loop once for every dice that we roll we
7:55
have to generate a random number between
7:56
1 and six for each dice we're rolling if
7:59
I'm I'm rolling three dice I need a for
8:01
Loop to iterate three times let's create
8:04
a for
8:05
Loop let I equal Z continue this as long
8:09
as I is less than the number of dice
8:13
then increment I by One during each
8:16
iteration I need to generate a random
8:18
number between 1 and six I'll store that
8:21
within a constant const value that will
8:25
be the random number
8:27
equals math random method this generates
8:31
a random number between 0 and 1 but I'm
8:34
going to multiply it by six to give us a
8:36
random number between zero and five it's
8:39
not going to be a whole number though so
8:41
I'm going to round it using math.
8:44
floor then enclose this part of our
8:47
equation now we should get a random
8:49
number between zero and five but I need
8:52
a random number between one and six so
8:54
I'll add one to the End plus one so now
8:58
we'll get a random number number between
8:59
1 and 6 just to be sure that this all
9:03
works temporarily I'm going to
9:06
console.log our value if I roll one dice
9:10
we should get one random
9:12
number one let's try three
9:17
dice
9:19
546
9:21
324 all right we don't need this
9:23
console. log statement anymore we know
9:25
that it's
9:25
working with these values I'm going to
9:28
push them into our array of values take
9:32
our array of values use the push
9:35
method add our value that we randomly
9:38
generate during each iteration and let's
9:41
see if this
9:42
works I'm going to
9:45
console.log my array of values just to
9:48
be sure that there's some numbers in
9:49
there let's roll for dice
9:53
inspect console I have an array of four
9:56
elements the number 6 32 2 six so that
10:01
does
10:02
work all right here's the tricky part I
10:05
need to take my array of images use the
10:08
push method I will create a string
10:11
representation of an HTML element I need
10:14
to get one of the images found within
10:16
the SCE images
10:18
folder using angle brackets I will
10:20
create an image
10:22
element I will set the source equal to
10:26
that folder name so my folder name was
10:29
dice uncore
10:31
images dice uncore Images
10:35
slash so with my images it might be
10:38
different for you mine are labeled
10:40
appropriately you know for one two for
10:43
two three for three so on and so forth I
10:46
will use a
10:47
placeholder add our value this number
10:52
then follow this with the file extension
10:53
of the images my images are PNG images
10:57
do pay attention to that after after we
10:59
exit this for Loop we should have an
11:01
array of HTML images then we're going to
11:04
take our dice result
11:07
constant change the text content to
11:11
equal all of the values I'll use a
11:14
template string I will display the word
11:17
dice at a placeholder I'm going to join
11:20
all of the elements together all of the
11:22
values to do that you can take your
11:24
array of values use the built-in join
11:27
method and I will join them all by a
11:30
certain character or characters I will
11:33
join all of these numbers by a comma and
11:36
a space let's see if this works I'm
11:39
going to roll one dice yep dice I rolled
11:43
a
11:44
one I rolled a four I rolled a three
11:47
let's roll two dice I have 2 comma 5
11:50
four comma 6 2 comma 2 comma 3 6 comma 3
11:55
comma 2 then we have to get the images
11:59
let's take our dice images constant
12:02
access the inner HTML set this equal to
12:07
take our array of images use the
12:10
built-in join
12:11
method I'm not going to join them by any
12:13
character I'll join them by an empty
12:16
string and let's see if this works I
12:18
would like one dice yeah there it is two
12:23
and three now for some reason if your
12:26
dice isn't displaying with our image
12:28
element I will set the alt attribute to
12:31
equal a string of dice space at a
12:37
placeholder
12:39
value let's say I get the folder name
12:41
wrong I will rename this as dice image
12:45
I'll attempt to display one dice dice
12:47
three dice four dice three so in case
12:51
our image can't display for some reason
12:53
we'll at least display the alternative
12:55
text this is good for troubleshooting
12:57
and for screen readers for exess
12:58
accessibility let me correct the name of
13:00
the folder
13:02
again so with our dice images at least
more CSS
13:05
for me they're kind of big and I'd like
13:07
to space them out a little bit our last
13:09
step is we're going to go back to our
13:10
CSS
13:11
stylesheet I will select the ID of dice
13:16
result that's going to be for this title
13:19
right here I'll add some margin around
13:21
this text right now it's kind of
13:23
compressed I will set margin of 25
13:27
pixels then with our dice images ID dice
13:32
images with my ID of dice images take
13:36
each child
13:38
image set a width of 150 pixels should
13:43
be
13:45
good yeah they're a lot smaller now I'll
13:47
add a little bit of margin
13:49
too margin 5
13:53
pixels yeah that's not a bad looking
13:56
program all right everybody so that was
13:59
a dice roller program you can make using
14:02
JavaScript HTML and CSS impress your
14:05
friends and that's pretty much
14:10
it