- 00:00:00 [Music]
- 00:00:01 welcome to this video it's Christmas
- 00:00:04 time again and recently we released our
- 00:00:06 24 of course the course about web
- 00:00:09 components and stencil just in case
- 00:00:11 you're interested now 24 and Christmas
- 00:00:14 well there was something right because I
- 00:00:16 thought why don't we take the chance and
- 00:00:18 build a little calendar together
- 00:00:20 something like this right here so this
- 00:00:22 is the calendar and if I click onto it
- 00:00:25 we can see that the doors are created
- 00:00:26 dynamically in JavaScript and if I click
- 00:00:29 onto one of these doors then as you can
- 00:00:31 see it right here
- 00:00:32 one of the logos of our courses is
- 00:00:34 opening right here so that's what I
- 00:00:37 would like to build in this video we
- 00:00:39 will do this by just using javascript
- 00:00:41 HTML and CSS that's all we need and with
- 00:00:45 that let's get started with this little
- 00:00:46 Christmas project you could say we will
- 00:00:52 get started with this code right here
- 00:00:54 this is basically an HTML boilerplate I
- 00:00:56 just added the link to the CSS file and
- 00:00:59 here to our JavaScript file and I
- 00:01:01 changed the title to a calendar hmm
- 00:01:04 Kettleman calendar whatever and then I
- 00:01:07 got em tjs and CSS files and I got this
- 00:01:10 folder right here I call the courses and
- 00:01:12 there I have the logos for the 24
- 00:01:15 courses feel free to take any logo of
- 00:01:17 your choice right here and one calendar
- 00:01:20 imaged that will be the actual
- 00:01:21 background image you saw that image with
- 00:01:24 dead Santa Claus on it but enough of two
- 00:01:26 talking let's get started now because as
- 00:01:28 I said I would like to create the
- 00:01:30 majority of the calendar dynamically in
- 00:01:32 JavaScript but we will need some HTML
- 00:01:35 code to display the basics the basics
- 00:01:38 will basically be this part right here
- 00:01:40 so this button right here and this
- 00:01:42 calendar and all this so if I click onto
- 00:01:45 this and if we get the doors and if we
- 00:01:47 can click on to it to display the images
- 00:01:49 this will be rendered dynamically with
- 00:01:51 JavaScript however we have to achieve
- 00:01:54 this first so let's go back to our code
- 00:01:56 and let's get started with the HTML file
- 00:01:59 for that I will first add a button right
- 00:02:03 here and this button can be named create
- 00:02:06 calendar like that and this button
- 00:02:09 should also have a class to better
- 00:02:12 interact with you
- 00:02:14 later so I will just call it button –
- 00:02:16 start like that let's see so we should
- 00:02:19 have a button right here maybe a bit
- 00:02:21 bigger this one right there not
- 00:02:23 beautiful we'll work on that
- 00:02:24 in a few seconds the second thing we
- 00:02:26 need is the actual diff that contains
- 00:02:29 the the complete calendar you could say
- 00:02:31 for that I will add a diff no content
- 00:02:35 needed right here because the actual
- 00:02:36 content will be added later and the
- 00:02:39 class could be something like container
- 00:02:41 that's quickie format that right here
- 00:02:43 and with that we are done with the HTML
- 00:02:46 part of this video already and before we
- 00:02:49 go to the dynamic part in JavaScript
- 00:02:50 let's maybe add some basic styling
- 00:02:52 already so let's go to the CSS file and
- 00:02:55 let's first add this asterisk selector
- 00:02:58 right here which basically adds a
- 00:02:59 specific rule to all elements on our
- 00:03:02 page by the way I won't dive too deep
- 00:03:04 into the CSS part right here in case
- 00:03:06 you're new to CSS or want to dive deeper
- 00:03:08 make sure to have a look at our CSS
- 00:03:11 complete guide however back to this code
- 00:03:14 right here so we will use this asterisk
- 00:03:17 and I will just add box-sizing order box
- 00:03:23 right here this simply means that if we
- 00:03:25 talk about sizes Heights and Woodfin
- 00:03:28 something like that this will also
- 00:03:29 include the border in the calculation
- 00:03:33 when it comes to the width of the ha or
- 00:03:35 the height of the element as I said more
- 00:03:37 about that in our complete guide so
- 00:03:40 let's now dive into the styling and
- 00:03:43 let's first style our button which has
- 00:03:46 the button start class right here and I
- 00:03:50 would like to have a background color
- 00:03:51 for this button maybe of our Academy and
- 00:03:55 orange this is the fa9 to free F hex
- 00:03:57 code I would like to have a color for
- 00:04:00 the text on the button of white like
- 00:04:03 that and I would also like to have a
- 00:04:07 border around this button this could be
- 00:04:09 maybe two pixels solid and maybe D five
- 00:04:13 to one seven five one like that and I
- 00:04:18 would like to have these rounded edges
- 00:04:20 for our button for that I will use the
- 00:04:23 order radius property right here
- 00:04:27 this could be something like I don't
- 00:04:28 know maybe 15 pixels anything like that
- 00:04:31 if I go back and reload the page you can
- 00:04:34 see that we have this rounded button
- 00:04:36 right here with the orange background
- 00:04:38 and all the styles that we used so far
- 00:04:40 I'm still not happy with the actual size
- 00:04:43 of the button and with its positioning
- 00:04:44 because actually this button should be
- 00:04:46 displayed in the center of the screen so
- 00:04:48 somewhere right here for that we can
- 00:04:50 simply add margin and now let's first
- 00:04:53 define a top margin of maybe I don't
- 00:04:55 know 15 pixels and a left and right
- 00:04:58 margin that's the important one of auto
- 00:05:00 with that our element should be centered
- 00:05:03 automatically but in case of the button
- 00:05:06 we also have to add this play block
- 00:05:09 right here if we do this we will see it
- 00:05:12 at margin Auto takes effect and as you
- 00:05:15 can see now we centered our button
- 00:05:17 easily I'm still not happy with the size
- 00:05:19 of the button so let's maybe also add a
- 00:05:22 width right here you could now also
- 00:05:24 stick to pixels but as a bit like to use
- 00:05:26 some different units in this project I
- 00:05:28 will now maybe change to REM so let's
- 00:05:31 say we use 10 REM right here by default
- 00:05:34 10 rembu be equal to 160 pixels by the
- 00:05:37 way but that's just a side note and the
- 00:05:39 height should be maybe 2 REM something
- 00:05:43 like that if I now go back and without
- 00:05:45 the page yeah you can see our button
- 00:05:48 looks a lot better now with that we are
- 00:05:50 also done with the button now let's work
- 00:05:52 on this container element that we just
- 00:05:54 created for that I'd select the
- 00:05:57 container class right here and now let's
- 00:05:59 start with the width and the height for
- 00:06:01 the calendar to define a fixed area for
- 00:06:04 this container I don't want to create
- 00:06:06 any responsive design right here I just
- 00:06:08 think the calendar should have a fixed
- 00:06:10 height width and that's it it's more
- 00:06:11 about the actual content so adding these
- 00:06:13 doors and displaying the images right
- 00:06:15 here for that I will add a width of
- 00:06:17 let's say 800 pixels as you can see I'm
- 00:06:21 now switching back to pixels here we use
- 00:06:22 trim I do this on purpose as I said so
- 00:06:24 feel free to use any unit of your choice
- 00:06:27 right here and for the height I might
- 00:06:29 use something like 900 pixels because I
- 00:06:32 would like to have this portrait style
- 00:06:34 of the calendar additionally I would
- 00:06:37 like to have a border around my calendar
- 00:06:39 and
- 00:06:40 I would like to have a thicker border so
- 00:06:42 let's maybe use five pixels a solid
- 00:06:44 border and like one maybe like that
- 00:06:47 because I would like to add a shadow
- 00:06:49 later so this black border with the
- 00:06:51 black shadow well I think this could
- 00:06:52 kind of look nice and of course I also
- 00:06:55 want to Center my calendar so let's
- 00:06:57 March it button let's use margin once
- 00:06:59 again this could be 15 pixels again and
- 00:07:02 auto for the second value right here if
- 00:07:05 we now go back and we load the page and
- 00:07:07 maybe zoom out a bit once more maybe we
- 00:07:12 can see that we got our a basic template
- 00:07:14 for the color and for the calendar
- 00:07:16 created already what's missing now of
- 00:07:19 course are two things the first thing is
- 00:07:21 the background image that we want to
- 00:07:22 have right here and the second thing are
- 00:07:25 the doors as I said the doors will be
- 00:07:28 created in JavaScript but we have to add
- 00:07:31 the basic structure for this doors right
- 00:07:33 here in CSS already welcome back through
- 00:07:36 the doors in a few seconds let's focus
- 00:07:37 onto the background image first and well
- 00:07:40 as I said it already for that we will
- 00:07:41 use the background image property right
- 00:07:47 here and now we need to specify the URL
- 00:07:50 of the image that should be displayed
- 00:07:51 right here our image is located right
- 00:07:54 here in the courses folder and it's this
- 00:07:56 calendar PNG image for that we simply
- 00:07:59 add dot slash courses like that and now
- 00:08:02 the calendar PNG file don't forget to
- 00:08:05 add the PNG ending and de quotation
- 00:08:08 marks at the beginning and at the end of
- 00:08:10 our URL right here with that we should
- 00:08:14 see our image let's see it yep this is
- 00:08:16 working I'm not happy with the actual
- 00:08:19 way our image is displayed right here
- 00:08:21 for Dad I will simply add background
- 00:08:23 size and set it to cover if I do that
- 00:08:27 and we load the page
- 00:08:29 you can see that our image now occupies
- 00:08:32 the entire space available in our
- 00:08:34 container and it's also displayed
- 00:08:36 correctly right here at the moment of
- 00:08:38 course I prepared this image so feel
- 00:08:40 free to use any kind of other image
- 00:08:41 right here and also to change the
- 00:08:43 background size property according to
- 00:08:45 your needs however with that we got our
- 00:08:48 basic structure right here and if we
- 00:08:50 switch back to our template yeah I think
- 00:08:52 we are pretty close all right
- 00:08:54 what's missing now of course are the
- 00:08:56 doors and as I said if I click right
- 00:08:58 here
- 00:08:58 I want these doors to be created
- 00:09:00 dynamically with JavaScript that's
- 00:09:02 something we will focus on to in a few
- 00:09:04 minutes but as you can see somehow
- 00:09:07 JavaScript knows where these doors
- 00:09:09 should be positioned and we will kind of
- 00:09:13 define this positioning template and the
- 00:09:15 size and the width of each door already
- 00:09:17 in CSS and for this purpose I will use a
- 00:09:21 special CSS feature the CSS grid now
- 00:09:26 let's dive into that now and for that
- 00:09:28 let's go back to our code right here and
- 00:09:30 first we need to turn our container by
- 00:09:33 the web you're missing a curly brace
- 00:09:34 right here like that now it's working so
- 00:09:37 for that we first have to add this play
- 00:09:39 grid right here this will turn our
- 00:09:41 container into a grid structure you
- 00:09:44 could say and as mentioned in the
- 00:09:46 beginning of this video I don't want to
- 00:09:48 dive too deep into CSS but so that in
- 00:09:51 case the grid is totally new make sure
- 00:09:52 to have a look at the course I mentioned
- 00:09:54 previously but generally with the grid
- 00:09:56 we can basically build 10 blades
- 00:09:58 regarding a specific row and column
- 00:10:01 structure so we could build a grid as
- 00:10:03 the name actually says now what this
- 00:10:05 means for us is we can simply define a
- 00:10:07 fixed amount of rows and columns and
- 00:10:09 also specify the height and the width of
- 00:10:12 each column and each row and weld a
- 00:10:14 combination of rows and column and
- 00:10:15 specific Heights
- 00:10:16 well this will basically build our grid
- 00:10:19 structure that we need for the different
- 00:10:21 doors in our calendar now this sounds
- 00:10:23 kind of abstract so let's simply get
- 00:10:25 started now and for that I will first
- 00:10:28 define our columns so I will just use
- 00:10:30 grid template columns right here and now
- 00:10:33 we've repeat right here we cannot
- 00:10:36 specify the amount of columns that would
- 00:10:38 like to have in our grid container right
- 00:10:40 here and the width of each column as we
- 00:10:43 have 24 doors and a portrait style
- 00:10:46 calendar I would say that four columns
- 00:10:48 and six rows so six times for 24 this
- 00:10:51 works might be a good solution right
- 00:10:53 here so we need four columns which you
- 00:10:55 can enter right here now we have to add
- 00:10:58 a comma and now we have to specify the
- 00:11:00 width each column should have we will
- 00:11:03 use a pretty straightforward approach
- 00:11:04 right here as we need an equal width for
- 00:11:07 each car
- 00:11:07 we can simply say that each column
- 00:11:10 should occupy 25% of the space available
- 00:11:13 now with that we should have our columns
- 00:11:16 defined now we can continue with our
- 00:11:18 rows and for the rows will also use grid
- 00:11:21 template right here but this time for
- 00:11:23 the rose now we've repeat we can again
- 00:11:26 define how many rows we would like to
- 00:11:28 have in our calendar well in our case
- 00:11:30 this will be 6 but now I don't want to
- 00:11:33 use any percentages or something like
- 00:11:35 that I will use the F our unit right
- 00:11:38 here F R stands for fraction and it
- 00:11:41 simply allows us to well tell our code
- 00:11:44 that we want to give a certain amount of
- 00:11:47 the space available to our row now this
- 00:11:51 sounds kind of complicated if you think
- 00:11:53 about it from our six rows perspective
- 00:11:55 that if I would add one F R here then
- 00:11:58 this would mean that each row gets one
- 00:12:00 unit of the space available now in this
- 00:12:03 case this would mean that each row has
- 00:12:06 the same height basically if you would
- 00:12:08 assume that you have two rows here and
- 00:12:10 you would give the first row one fr one
- 00:12:14 fraction and the second row two fr-s so
- 00:12:17 two fractions then the first row would
- 00:12:19 have one third of the available space
- 00:12:21 the second row would have two first of
- 00:12:24 the available space now in our case we
- 00:12:26 have six rows which should occupy the
- 00:12:28 same space therefore we can use one fr
- 00:12:30 right here now let's see if we go back
- 00:12:34 to our page and we loaded you can't see
- 00:12:36 any change but if you now select inspect
- 00:12:38 tool and hover over a calendar you can
- 00:12:41 see that the grid right here is already
- 00:12:43 shown by our dev tools we didn't add any
- 00:12:46 borders yet to our grid but that's just
- 00:12:49 a default feature that we have right
- 00:12:50 here and as you can see we have four
- 00:12:52 columns each column occupying 25% of the
- 00:12:56 available space right here and we have
- 00:12:59 six rows each row containing one
- 00:13:02 fraction of the available space so we
- 00:13:05 basically have six rows with an equal
- 00:13:07 height for each single row so this
- 00:13:09 basically works fine we now have the
- 00:13:11 structure for our doors at least we made
- 00:13:14 sure that our CSS code somehow
- 00:13:17 understands that we would like to have
- 00:13:18 these different doors right here but the
- 00:13:20 is that we cannot access a specific door
- 00:13:23 now because each doorknob is kind of
- 00:13:25 existing but I would like to be able to
- 00:13:28 give each door a name so this would be
- 00:13:31 door one door two or free and so on so
- 00:13:34 we need an option to be able to name
- 00:13:36 these doors at least internally and then
- 00:13:38 I would like to use JavaScript later to
- 00:13:40 make sure that I can add the image with
- 00:13:42 the number one two door one the image of
- 00:13:45 – number two – tor – and so on this
- 00:13:47 should happen dynamically but for that
- 00:13:49 we first have to make sure that we can
- 00:13:51 identify the doors you could say for
- 00:13:53 that we'll also use our grid template
- 00:13:56 right here let's go back to the code and
- 00:13:58 let's set the semicolon right here and
- 00:14:00 now I would like to use grid template
- 00:14:04 areas right here this property this
- 00:14:07 simply allows me now to recreate the
- 00:14:09 structure we built so far so the four
- 00:14:12 column and six rows grid and then name
- 00:14:15 each part of the grid individually so we
- 00:14:19 have 24 different parts and algorithm
- 00:14:22 could say and each part so the doors in
- 00:14:25 our case can be accessed individually
- 00:14:28 then they're giving them a unique name
- 00:14:29 you could say now for that let's start
- 00:14:32 right here and let's add key quotation
- 00:14:34 marks and let's now add door door door
- 00:14:38 and door right here now why door well
- 00:14:41 because these are basically the four
- 00:14:43 columns we have and each column has a
- 00:14:46 door so what I basically see right here
- 00:14:48 are these four doors so this first row
- 00:14:52 now if we take this code and go to the
- 00:14:56 next row and paste it then we build a
- 00:14:59 structure for the second row in our grid
- 00:15:01 now for the third the fourth the fifth
- 00:15:03 and the six all the same
- 00:15:05 now the problem still is that we now
- 00:15:08 lamed each door the same way internally
- 00:15:11 in our grid that's okay we could do that
- 00:15:13 but if we now add a specific number to
- 00:15:16 each door well then we basically have an
- 00:15:19 option to kind of access each door
- 00:15:21 individually so what I will do now is I
- 00:15:23 will simply add the numbers from 1 to 24
- 00:15:26 – each door name so this could be door
- 00:15:28 one door 2 3 and so on I will quickly
- 00:15:33 fast forward because I don't think
- 00:15:34 that's really exciting here so now with
- 00:15:36 the grid template areas being finished
- 00:15:39 we are almost ready to dive into the
- 00:15:42 JavaScript part now because we have this
- 00:15:44 grid structure and we can now basically
- 00:15:46 identify the different doors but we also
- 00:15:49 have to add content to each of these
- 00:15:50 doors because at the moment we just see
- 00:15:53 the grid structure because of the dev
- 00:15:54 tools but actually the doors are not
- 00:15:56 existing yet now as I said I will use
- 00:15:58 JavaScript later to create the doors
- 00:16:00 dynamically but now would like to create
- 00:16:03 such a door element in HTML quickly to
- 00:16:05 see how it works to style it quickly and
- 00:16:07 then to jump on to javascript so for
- 00:16:10 that we go to the index.html file and
- 00:16:12 now inside our container I will simply
- 00:16:16 add 1 DF right here this diff will have
- 00:16:19 a class of image because it will contain
- 00:16:24 the actual course image in the end no
- 00:16:26 content though and inside this div I
- 00:16:30 would like to have another div this time
- 00:16:32 with the class text I will come back to
- 00:16:35 that in a few seconds and the text will
- 00:16:37 be oops the text will be one now what
- 00:16:40 did I create right here well as I said
- 00:16:42 we have our calendar and inside our
- 00:16:44 calendar we have a specific door each
- 00:16:46 door will be represented by such a div
- 00:16:49 in the end and this door has a
- 00:16:51 background image but on top of this
- 00:16:53 background image we actually have nested
- 00:16:56 inside of it the actual well or you
- 00:16:58 could say the cover of the door where I
- 00:17:00 would like to add the number of the day
- 00:17:02 so in the end we will dynamically create
- 00:17:05 numbers from 1 to 24 in JavaScript later
- 00:17:07 if I go back now and you load the page
- 00:17:10 you can see the first element right here
- 00:17:13 so we have our div image in the top left
- 00:17:16 part of our grid right here it was edit
- 00:17:19 there automatically by the way
- 00:17:20 so let's now style these elements and
- 00:17:22 let's also have a look at this grid
- 00:17:24 logic before we can then continue with
- 00:17:25 the JavaScript part for that inde CSS
- 00:17:28 file we have to add two selector first
- 00:17:30 so let's add this dot image selector
- 00:17:33 right here so for the image we first
- 00:17:35 need a background oops
- 00:17:37 a background image here of course we use
- 00:17:44 that property before so if we enter your
- 00:17:46 L now we can specify
- 00:17:48 our URL which could be courses or would
- 00:17:50 be courses slash may be course one so
- 00:17:54 this file right here let's see if we
- 00:17:56 reload the page yeah we can see that we
- 00:17:58 basically added the image but not
- 00:18:01 perfectly so let's work on the styling
- 00:18:04 first we need background size cover we
- 00:18:09 use that before for our calendar image
- 00:18:12 so let's reload yeah looks better but
- 00:18:16 for this image as I said I prepared this
- 00:18:19 one so we didn't need this value right
- 00:18:21 here or this property right here here we
- 00:18:23 need it so we also need to Center the
- 00:18:25 image for that we use background
- 00:18:27 position this should be Center if we do
- 00:18:31 so and we know the page you can see that
- 00:18:34 we have our year six logo displayed
- 00:18:37 right here so before we continue with
- 00:18:38 the text on the image so this one right
- 00:18:41 here for example let me quickly show you
- 00:18:43 how we cannot use the grid template to
- 00:18:46 kind of define the position of each
- 00:18:49 image for that we can simply add grid
- 00:18:52 area down here and now we can simply
- 00:18:55 specify one of the names that we added
- 00:18:57 right here to our grid template area for
- 00:19:00 example let's say that we want to
- 00:19:02 display the current image at the
- 00:19:04 position of tour five then we simply add
- 00:19:07 door five right here if I now go back
- 00:19:10 and reload the page you can see that the
- 00:19:13 image is displayed now down here at this
- 00:19:15 position and if we inspect that we can
- 00:19:18 see that this is basically the fourth
- 00:19:20 row and the third column and if we go to
- 00:19:22 the fourth row and the third column then
- 00:19:25 we are exactly at door five right here
- 00:19:27 that's just a quick demonstration we
- 00:19:29 don't need that feature right now but I
- 00:19:32 just wanted to show you how we can use
- 00:19:33 this feature later in JavaScript – as I
- 00:19:36 said define the position of the
- 00:19:38 different images now let's get rid of
- 00:19:40 that and let's not work on the
- 00:19:42 formatting of the text on our door for
- 00:19:45 that I will refer to the text class we
- 00:19:47 just created and we first basically
- 00:19:51 define the height of 100 percent and the
- 00:19:54 width of 100 percent right here this
- 00:19:57 wasn't required for the background image
- 00:19:59 but in case of the text we can do this
- 00:20:02 then I would like to change the color of
- 00:20:03 the text this should be white maybe him
- 00:20:05 let's see this should look better
- 00:20:07 already
- 00:20:07 yep then I think we can add some padding
- 00:20:11 like this I think it could be something
- 00:20:14 like ten pixels so switching back to
- 00:20:16 pixels again and also a border maybe one
- 00:20:20 pixel solid and also black because the
- 00:20:24 border of our calendar up here is also
- 00:20:26 black so this might make sense let's see
- 00:20:28 yeah I think it looks better now we have
- 00:20:31 this number a bit more position a bit
- 00:20:34 better and we have this really slight
- 00:20:37 border almost invisible here but I think
- 00:20:39 it's better to have maybe let's add two
- 00:20:42 pics to border then to make it better
- 00:20:44 visible yeah I think now you could see
- 00:20:45 it so we have added this border right
- 00:20:47 here to our image looks nicer I think
- 00:20:49 and with that I think we finished our
- 00:20:52 HTML and CSS part at least majority of
- 00:20:55 it so what we can do now is we can
- 00:20:58 actually delete this div or D sniffs
- 00:21:02 right here because we will now create
- 00:21:04 these dynamically in JavaScript so let's
- 00:21:06 reload the page so this should be clean
- 00:21:08 again
- 00:21:08 and well yeah let's now simply recreate
- 00:21:12 that structure and make sure to create
- 00:21:14 these two divs dynamically for that in
- 00:21:17 JavaScript we first need to define two
- 00:21:19 variables I need two constants right
- 00:21:21 here the first one is the calendar
- 00:21:23 button let's call it like this which
- 00:21:27 should be equal to document query
- 00:21:31 selector like that and it should select
- 00:21:34 the button start class so the button we
- 00:21:38 created because I would like to be able
- 00:21:40 to click this button to create the
- 00:21:42 calendar doors and talking about
- 00:21:45 calendar doors I would like to be able
- 00:21:47 to also access the calendar because the
- 00:21:49 doors are located on the calendar so we
- 00:21:51 need calendar access for that I will add
- 00:21:54 another variable right here so this
- 00:21:56 should be calendar maybe container which
- 00:22:00 should be equal to query selector this
- 00:22:09 was I think the container class right
- 00:22:11 here so if these we should not have
- 00:22:14 access to the button and the car
- 00:22:15 or Excel itself which is nice and then
- 00:22:19 we need another constant which should be
- 00:22:22 the amount of calendar days because I
- 00:22:25 would like to be able to loop through
- 00:22:28 the different days on the calendar and
- 00:22:29 well the amount of days in total should
- 00:22:32 be 24 so we got these constants now now
- 00:22:35 the next step is to make sure that if we
- 00:22:37 click on to the create calendar button
- 00:22:39 that all images are created at once for
- 00:22:43 that we need a function and we need a
- 00:22:45 for loop basically because I would like
- 00:22:47 to say that if I click on to the button
- 00:22:49 our code should loop through the
- 00:22:53 different days we have so 1 to 24 and
- 00:22:55 for each day it should create two
- 00:22:58 elements the image and the text element
- 00:23:01 where the position of the image element
- 00:23:03 should be defined according to our grid
- 00:23:06 template area so we need to create an
- 00:23:09 element which has the grid area value of
- 00:23:12 Thor 1 then I would like to add this
- 00:23:15 element at this position and after that
- 00:23:17 I would like to add the second div which
- 00:23:20 contains our text so the day of the
- 00:23:23 calendar day so the day actually some 1
- 00:23:26 to 24 which should be added on top of
- 00:23:29 this diff so we have to nest the text if
- 00:23:31 inside the image div as we did it before
- 00:23:34 when we hard-coded it in the HTML file
- 00:23:37 now let's simply write the code to
- 00:23:39 better understand this for that I need
- 00:23:42 another constant right here which could
- 00:23:45 be create calendar like that don't need
- 00:23:50 any arguments here and now we need a for
- 00:23:53 loop
- 00:23:54 so what loop do we need well for I equal
- 00:23:59 to 0 our starting point I is smaller
- 00:24:03 then then what well our calendar days
- 00:24:07 right here because we want to loop until
- 00:24:09 we reach a maximum amount of 24 days so
- 00:24:12 it should be smaller than the calendar
- 00:24:15 days and should be increment incremented
- 00:24:19 by 1 after each iteration then I would
- 00:24:23 like to make sure that we create two
- 00:24:27 things we first create the Const
- 00:24:29 and let's maybe name it calendar door so
- 00:24:34 the actual door that contains the image
- 00:24:36 which should be equal to document create
- 00:24:41 element because that's we're going to do
- 00:24:43 here do you want to create an element
- 00:24:44 and what kind of element well it should
- 00:24:47 be a simple diff you remember that's the
- 00:24:49 diff there should be created which has
- 00:24:51 the class image on it we'll add the
- 00:24:53 class in a few seconds in addition to
- 00:24:55 the Kalimdor
- 00:24:56 we need another element let's give it
- 00:24:59 also a variable name right here
- 00:25:02 so calendar door text so 1 2 24 which
- 00:25:06 should be equal to document create
- 00:25:11 element and also a div right here now as
- 00:25:15 I said let's first work on the actual
- 00:25:17 calendar doric set itself I mention it
- 00:25:20 already we have to add a class to this
- 00:25:22 element so calendar door should get a
- 00:25:26 class so used class list property right
- 00:25:28 here and we want to add this class and
- 00:25:31 the class name should be image as I
- 00:25:34 mentioned this is exactly the same logic
- 00:25:36 that we had before when we created that
- 00:25:38 element manually now with that we have
- 00:25:42 the element and we have the class now we
- 00:25:44 need to make sure that this element is
- 00:25:46 positioned correctly so door one two
- 00:25:48 door 25 in our grid template what does
- 00:25:52 this mean well as you saw we need to use
- 00:25:54 the grid area property right here and
- 00:25:57 define a specific name of our template
- 00:26:00 so one of these names right here as the
- 00:26:03 value for this property of the
- 00:26:05 corresponding element for that we simply
- 00:26:09 access the style property of this
- 00:26:13 element and specifically the grid area
- 00:26:16 property right here and the value for
- 00:26:19 this property should be equal to door we
- 00:26:24 have a door is not totally correct right
- 00:26:26 because door is not a value we are using
- 00:26:28 so far because it should be door one two
- 00:26:30 door 25 well but now we can make use of
- 00:26:33 our for loop right here because we start
- 00:26:36 with I equal to zero and we start as
- 00:26:38 soon as I is smaller than 24 so we have
- 00:26:42 I equal to zero
- 00:26:43 until I equal to 23 so if we simply say
- 00:26:47 that door that the grid area well you
- 00:26:49 should contained or plus brackets I 0 to
- 00:26:54 23 no I plus 1 1 to 24 then we would
- 00:26:59 exactly give the grid area property of
- 00:27:03 this element the name door 1 to 2 or 24
- 00:27:07 for each loop that we go through so with
- 00:27:11 that we made sure that the element is
- 00:27:13 positioned correctly according to our
- 00:27:15 grid area and now we simply make sure
- 00:27:18 that the element is also added to our
- 00:27:21 done well for that we can simply refer
- 00:27:24 to our calendar container so the
- 00:27:28 constant right here we simply want to
- 00:27:30 append our child right here and the
- 00:27:32 child of course is our calendar door
- 00:27:37 element that we just created so with
- 00:27:40 that we got our first part of the
- 00:27:42 function finished already
- 00:27:44 let's now see if this works by simply
- 00:27:48 executing the function right here so we
- 00:27:50 say our calendar button should get an
- 00:27:52 event listener so this button right here
- 00:27:56 so the button that we created should get
- 00:27:59 an event listener we want to listen to a
- 00:28:01 click event and once this click event of
- 00:28:04 course we want to point to the create
- 00:28:09 calendar function that we just created
- 00:28:12 so if we go back and reload the page and
- 00:28:15 click right here yeah it seems to work
- 00:28:18 we always have the same image that's
- 00:28:21 just simply due to the fact that we
- 00:28:22 still have our background image right
- 00:28:25 here set to course 1 so if I were
- 00:28:27 changed to course 2 right here all
- 00:28:29 images should change if we click yeah
- 00:28:31 this is working correctly and if I look
- 00:28:33 for our numbers we can see that we
- 00:28:36 finish with the 24th door Dalia so this
- 00:28:39 is basically working correctly the
- 00:28:41 problem now still is that we always have
- 00:28:43 the same image displayed and that we
- 00:28:45 don't have the actual well content on
- 00:28:47 the calendar doors or the numbers let's
- 00:28:50 maybe first set this play image right
- 00:28:52 here to non for now because we need to
- 00:28:54 create or add the image dynamically so
- 00:28:56 if we now reload
- 00:28:57 once again create the calendar you can
- 00:29:01 see that the elements were created but
- 00:29:04 we don't have any content now that's
- 00:29:06 fine and let's also work on the well
- 00:29:09 text on top of each door let's maybe
- 00:29:12 start with the text first so let's go
- 00:29:14 back to our JavaScript code and let's
- 00:29:16 add this down here maybe because now we
- 00:29:21 need to access our calendar or text
- 00:29:24 variable this one right here because we
- 00:29:26 want to make sure that each time our for
- 00:29:30 loop is executed we want to access
- 00:29:32 calendar door text whoops and actually
- 00:29:37 it's the same logic that we had right
- 00:29:38 here we want to add the class of text
- 00:29:44 this time right because that's the class
- 00:29:46 that we defined in our CSS code the
- 00:29:49 position doesn't have to be added right
- 00:29:51 here because we are already defined that
- 00:29:53 right here for the image and we will
- 00:29:55 append this text element to the
- 00:29:57 corresponding door element you could say
- 00:30:01 with the door element being positioned
- 00:30:03 correctly with the image element you
- 00:30:05 could say the text will also be
- 00:30:06 positioned at the right position what we
- 00:30:09 have to add here though is some text on
- 00:30:12 this element this should be the numbers
- 00:30:15 from 1 to 24 so we simply enter a
- 00:30:18 calendar door text now in HTML and this
- 00:30:24 should be equal to I plus 1 right same
- 00:30:27 logic that we saw before we simply want
- 00:30:29 to make sure that the numbers of 1 to 24
- 00:30:32 are edit right here now we simply want
- 00:30:35 to append the child but this time we
- 00:30:38 won't append a child to the container
- 00:30:39 but to the door right here so we have to
- 00:30:42 add calendar door append child and now
- 00:30:47 what should be appended well our
- 00:30:49 calendar door text this one right here
- 00:30:53 with that if we reload the page and
- 00:30:57 create the calendar and yes I think this
- 00:31:01 looks kind of ok now we can see that we
- 00:31:03 created our doors for a calendar and we
- 00:31:07 don't have any background image set
- 00:31:08 that's why we changed it to non-veg
- 00:31:10 so this looks fine so we basically see
- 00:31:12 the image for the entire calendar now
- 00:31:15 and we created all the different fields
- 00:31:18 dynamically in JavaScript so this works
- 00:31:20 also final so this means we only have to
- 00:31:24 add one last feature because now we also
- 00:31:26 want to be able to click onto one of
- 00:31:28 these doors and to make sure that once
- 00:31:30 we click onto these doors one specific
- 00:31:32 course image is displayed for that I
- 00:31:36 first want to make our course path a bit
- 00:31:38 more dynamic because actually we only
- 00:31:41 need to change one thing in our URL and
- 00:31:44 this one thing is that's why I prepared
- 00:31:46 it like this by the way is simply the
- 00:31:48 number and for the courses we also have
- 00:31:51 numbers from 1 to 24 so what could be
- 00:31:54 used right here of course our eye so
- 00:31:57 basically our very variable that's
- 00:31:59 increasing each time all for loop is
- 00:32:02 executed for that we go back to our
- 00:32:05 trace file right here and first make
- 00:32:08 this path a bit more dynamic so we could
- 00:32:11 for example say that the course number
- 00:32:13 is equal to I plus 1 right so 1 to 24
- 00:32:17 once again same logic and that the
- 00:32:19 course path right here should be well
- 00:32:23 it's still dot slash courses slash well
- 00:32:27 let's say course 1 JPEG but that's not
- 00:32:30 really correct because we actually need
- 00:32:31 to we need this number right here to be
- 00:32:34 a bit more dynamic so this should
- 00:32:35 actually be our course number right here
- 00:32:38 and for that we can simply use template
- 00:32:40 strings right here so let's first add a
- 00:32:43 dollar sign right here and now replace
- 00:32:46 one with curly braces and the variable
- 00:32:51 name so course number and now we simply
- 00:32:54 replace our normal single quotation
- 00:32:56 marks with these back text right here at
- 00:33:01 the beginning and I know maybe like that
- 00:33:03 then like this so at the beginning and
- 00:33:06 at the end this is called template
- 00:33:08 strings and es6 feature I don't want to
- 00:33:11 dive too deep into that now the
- 00:33:12 important thing is now that we were
- 00:33:14 simply able to add this very variety
- 00:33:16 variable right here to our string and
- 00:33:19 with that we now created a more than
- 00:33:22 make course path because this simply
- 00:33:24 means now that each time we run that for
- 00:33:26 loop the course path simply changed
- 00:33:29 specifically the image selected changes
- 00:33:32 and that's actually what we want right
- 00:33:34 here now we need to add the logic that
- 00:33:36 allows us to react onto a click onto a
- 00:33:39 door and then execute a specific
- 00:33:40 function which we also have to create
- 00:33:43 because the function should then simply
- 00:33:45 add the image with a specific number as
- 00:33:48 the background image for that let's
- 00:33:50 first add the event listener and this
- 00:33:52 listener should be on our calendar door
- 00:33:57 text right here so add event listener
- 00:34:00 and the event is a click event once
- 00:34:03 again right here and once this event
- 00:34:11 occurs we want to execute a specific
- 00:34:13 function we want to point to a specific
- 00:34:15 function to be a bit more precise right
- 00:34:18 here let's create this function maybe
- 00:34:20 separately and let's maybe call it open
- 00:34:23 door right here so we created that
- 00:34:25 pointer and now let's first create that
- 00:34:28 function before we dive deeper into the
- 00:34:30 syntax here so let's create it right
- 00:34:32 here constant open door this function
- 00:34:36 will accept the default event so we can
- 00:34:38 add this right here now what should this
- 00:34:40 function do whenever we click on to our
- 00:34:43 calendar door text right here on to the
- 00:34:45 well door of the calendar basically then
- 00:34:48 the background image property off and
- 00:34:51 that's important the calendar doors are
- 00:34:53 not the calendar door text but the
- 00:34:55 calendar door should change because we
- 00:34:57 want to make sure that the value changes
- 00:34:59 from none to the URL that we just use
- 00:35:02 for the corresponding iteration of our
- 00:35:04 for loop so for example we want to load
- 00:35:06 the first image for the first iteration
- 00:35:09 for that we can simply use our default
- 00:35:11 event that we get back right here and we
- 00:35:13 can now access our target now the target
- 00:35:16 in our case is not calendar door but the
- 00:35:18 calendar door text so the element which
- 00:35:21 stores the actual number of the calendar
- 00:35:24 now in our case as we just talked about
- 00:35:26 this is not the element we want to
- 00:35:28 interact with at this stage we want to
- 00:35:31 interact with the calendar door element
- 00:35:33 so the element that contains the
- 00:35:35 background image
- 00:35:36 property therefore we will use
- 00:35:37 event.target parent node in that case
- 00:35:41 because the parent node of our calendar
- 00:35:44 door text is well Kellan the door and
- 00:35:46 therefore exactly the element that we
- 00:35:49 want to interact with and off this
- 00:35:50 parent node we want to target the style
- 00:35:52 dot background image property right here
- 00:35:55 and this background image property
- 00:35:57 should be changed too
- 00:35:59 while we did that before the URL but
- 00:36:03 this time this URL should be equal to
- 00:36:06 our course path down here and now we
- 00:36:10 kind of have a problem because the
- 00:36:12 course path is defined right here inside
- 00:36:15 our function and now we have to kind of
- 00:36:18 get the information that we have stored
- 00:36:20 in here into this function up there how
- 00:36:22 can we do this well the answer is we can
- 00:36:25 simply change our code down there if we
- 00:36:29 use bind right here like that then we
- 00:36:32 can simply use this bind method here to
- 00:36:34 kind of pass the information in here to
- 00:36:38 our function created up there for that
- 00:36:41 we have to make sure that we follow the
- 00:36:43 correct syntax syntax the first argument
- 00:36:45 of our pine method would be this right
- 00:36:49 here we don't use this so this could
- 00:36:52 also be equal to null right here and not
- 00:36:55 important
- 00:36:55 the second argument right here is our
- 00:36:58 course path because that's exactly what
- 00:37:02 we want to pass to our other function
- 00:37:04 this course puff here should be
- 00:37:06 available up here in our function we are
- 00:37:09 just creating now with that connection
- 00:37:12 being in place we have to make sure that
- 00:37:15 we also add the argument up here in our
- 00:37:17 open door function the default event we
- 00:37:20 get back must be the last argument right
- 00:37:23 here in a potential rows of arguments so
- 00:37:26 we leave it right here and add the
- 00:37:29 powerf argument as the first one now we
- 00:37:31 can use this path so we basically
- 00:37:33 connected this course path right here
- 00:37:36 with our function you could say so we
- 00:37:38 pass the information right here and now
- 00:37:41 we can simply use our syntax where
- 00:37:43 before so we add the curly braces at
- 00:37:45 path right here and replace our single
- 00:37:49 quotation marks
- 00:37:50 with our backticks we did that before
- 00:37:52 already and as you can see with our a
- 00:37:54 bind method on here we are able to pass
- 00:37:58 the information right here to our new
- 00:38:00 function and then also to use the path
- 00:38:05 for our image right here to make sure
- 00:38:07 that the background image changes
- 00:38:09 according to the current image that code
- 00:38:12 should be selected based on the well
- 00:38:14 iteration we went we are going through
- 00:38:16 in our for loop now let's see if this
- 00:38:20 actually works so let's go back and
- 00:38:22 reload the page and click on to create
- 00:38:24 calendar this is working we know that
- 00:38:26 and if I now click on 2:16 we can see
- 00:38:30 the progressive web app logo if I click
- 00:38:32 on 2:10 we can see the react native logo
- 00:38:35 doesn't look too bad actually let's have
- 00:38:37 a look at our images so we selected 10
- 00:38:40 this react native and we selected 16
- 00:38:45 this is progressive web apps so with
- 00:38:48 that this logic is actually working
- 00:38:50 correctly we can now simply click on any
- 00:38:53 kind of image in our calendar and make
- 00:38:55 sure that the corresponding course image
- 00:38:57 is displayed that's quite cool actually
- 00:39:02 as I would say there is only one last
- 00:39:05 thing that I don't like right here so if
- 00:39:07 I reload the page and create the
- 00:39:08 calendar once again and hit 2 for
- 00:39:10 example then the image is displayed
- 00:39:12 immediately so we are kind of missing
- 00:39:14 any you could say any kind of transition
- 00:39:17 right here to make this a bit smoother
- 00:39:18 additionally we can still see that even
- 00:39:21 after we opened our calendar the day is
- 00:39:24 still visible also not something really
- 00:39:26 realistic so let's also change that and
- 00:39:29 I would like to solve this as follows
- 00:39:32 regarding the number right here I would
- 00:39:34 simply like to change the opacity
- 00:39:36 because at the moment the number is
- 00:39:38 visible so the opacity is equal to 1 but
- 00:39:41 if ever change to past T to 0 then the
- 00:39:43 number would disappear let's do this
- 00:39:45 first maybe for that we go back to our
- 00:39:47 JavaScript file and right here into our
- 00:39:50 open door function right here we can now
- 00:39:53 again access our element now the target
- 00:39:58 element so now the element that is
- 00:40:00 basically clicked so the open door
- 00:40:02 element and there are simply would like
- 00:40:04 to change the opacity right here CT and
- 00:40:09 I would like to change it to zero like
- 00:40:12 oops
- 00:40:13 like that if we do this and we load the
- 00:40:16 page let's see yeah
- 00:40:18 it disappears it disappears immediately
- 00:40:20 though so we also have to add a little
- 00:40:22 transition right here for that I'll go
- 00:40:25 to the style.css file and now simply add
- 00:40:28 transition right here i want to access
- 00:40:32 the opacity property which should have a
- 00:40:36 kind of transition time so the change
- 00:40:39 from opacity one which is the default
- 00:40:41 value to opacity zero should take a
- 00:40:44 while and let's maybe say this should be
- 00:40:47 say 2.5 seconds if I do that lets see
- 00:40:51 lets click yeah and as you can see now
- 00:40:55 the number is fading out smoother this
- 00:40:57 looks cool I also would like to add
- 00:40:59 another thing once I click the image I
- 00:41:02 want to add a background image to our
- 00:41:07 text tool right here so to the element
- 00:41:09 that includes the number and this should
- 00:41:12 pop in immediately and then fade out
- 00:41:15 over the 2.5 seconds so the same
- 00:41:17 duration we have for the opacity because
- 00:41:20 of that we get that fate in effect for
- 00:41:22 our background image therefore we again
- 00:41:25 go to the name JavaScript file right
- 00:41:27 here and now say that event target style
- 00:41:34 background color should be equal to
- 00:41:37 let's say again five two one seven five
- 00:41:44 one right here you know that already and
- 00:41:45 if I now go back to our calendar because
- 00:41:48 we don't need to add any transition
- 00:41:50 right here because the opacity of the
- 00:41:52 entire element is affected right here
- 00:41:55 therefore the element kind of disappears
- 00:41:56 you could say so if I now reload the
- 00:41:58 page and click on to create calendar
- 00:42:02 yeah you can
- 00:42:04 that we have this nice effect right here
- 00:42:06 actually I thought we could also use the
- 00:42:08 orange but I think we should stick to
- 00:42:10 that purple I think this looks nice one
- 00:42:13 less thing I would like to add though is
- 00:42:15 a little box shadow around our calendar
- 00:42:18 for that we go back to our style.css
- 00:42:20 file right here to the calendar and
- 00:42:22 simply enter box shadow now we have to
- 00:42:26 specify the x-axis value so how far we
- 00:42:28 go from the position of the element to
- 00:42:30 the right so let's say this could be I
- 00:42:32 don't know maybe six pixels same thing
- 00:42:35 for the y axis value and we also need
- 00:42:37 some blur so maybe twenty pixels and
- 00:42:39 maybe some grayish color I don't know
- 00:42:41 let's see if I go back now and we load
- 00:42:43 yeah I think now this looks cool so with
- 00:42:47 that we finished our calendar as you can
- 00:42:50 see we did this all with the core basic
- 00:42:53 tools of app development HTML CSS and
- 00:42:56 JavaScript and with that I hope that you
- 00:42:59 like the project that you maybe learn
- 00:43:00 even something and yeah that you also
- 00:43:03 liked the academy and calendar the
- 00:43:05 calendar and yeah as always after such
- 00:43:08 videos I can only say thanks so much for
- 00:43:10 watching and I hope to see you in one of
- 00:43:12 the next videos or one of the many other
- 00:43:14 videos that you can find right here on