Coding

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