Building an Advent Calendar with JavaScript, HTML & CSS

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

00:43:16 our youtube channel or on academy.com
00:43:19 so have a nice day bye

You may also like