WEBVTT 0 00:00.150 --> 00:00.510 All right. 1 00:00.540 --> 00:04.200 So it's time to practice what you've learned so far. 2 00:04.230 --> 00:10.260 Go ahead and head over to the course resources, get the link for this practice session and then open 3 00:10.290 --> 00:11.760 up in your browser. 4 00:11.970 --> 00:18.030 And then of course fork it so that you have your own copy of it in your sandbox and then go ahead and 5 00:18.120 --> 00:21.740 look through these comments and try to complete this challenge. 6 00:21.780 --> 00:25.200 We're going to be creating a React app from scratch again. 7 00:25.440 --> 00:29.260 It should display two paragraph HTML elements. 8 00:29.370 --> 00:36.180 The first paragraph should say, "Created by..." and then we're going to add in a constant with your name, and then 9 00:36.180 --> 00:38.580 the second one is a little bit harder. 10 00:38.730 --> 00:43.520 It should say the copyright of your website and the current year. 11 00:43.650 --> 00:49.230 I have a bit of a pet peeve of websites which have the copyright which is hard coded. 12 00:49.380 --> 00:56.340 So I really want you guys to dig through your knowledge of JavaScript and if you've dug and you can't 13 00:56.340 --> 01:03.510 find anything then head over to Google and try to see if you can figure out how to get this copyright 14 01:03.630 --> 01:06.690 to be a dynamic date. 15 01:06.690 --> 01:15.840 So instead of having it hard coded as 2019 when we enter 2020 or 2021 whichever year it may be right now, 16 01:16.200 --> 01:22.860 the copyright should actually be updated using your Javascript code. 17 01:22.950 --> 01:27.690 So there's a bit of React challenge in here, there's a bit of JSX Challenge and there's also a bit 18 01:27.750 --> 01:31.440 of plain vanilla Javascript challenge for you. 19 01:31.440 --> 01:37.430 I hope you'll give it a go. Pause the video and then come back here and we'll go through the solution together. 20 01:42.840 --> 01:43.140 All right. 21 01:43.170 --> 01:50.230 So we're getting quite a lot of practice creating React apps from scratch and there's good reason behind 22 01:50.230 --> 01:55.340 this because it means that when you create it yourself, it's going to be a lot easier and it's going 23 01:55.340 --> 01:56.560 to be like second nature. 24 01:56.980 --> 02:03.730 So I've just imported React and ReactDOM from our two modules over here and then I'm gonna go ahead 25 02:03.790 --> 02:09.330 and use our ReactDOM to render some HTML. 26 02:09.460 --> 02:12.490 So we're gonna display two paragraph elements. 27 02:12.490 --> 02:17.580 So we've got the first one and we've got the second one. 28 02:18.010 --> 02:25.480 So the first one should say something like, "Created by..." and then we're going to put your name or my name 29 02:25.480 --> 02:34.450 in my case. And then we got a copyright and we're going to somehow add in the current year. 30 02:34.450 --> 02:35.800 That's what we're after. 31 02:36.100 --> 02:40.000 And of course we can't render more than one HTML element 32 02:40.000 --> 02:43.880 so I'm going to wrap it inside a div. 33 02:44.120 --> 02:44.430 All right. 34 02:44.460 --> 02:47.150 So now that we've gone what to render 35 02:47.430 --> 02:57.600 let's go ahead and get our document, getElementById and fetch that root div in order to render this 36 02:57.750 --> 02:59.600 inside this. 37 02:59.610 --> 03:07.050 So now we can see our Created by YOURNAME, Copyright CURRENTYEAR which is not very exciting but let's 38 03:07.050 --> 03:11.070 go ahead and insert some javascript into our HTML. 39 03:11.550 --> 03:15.810 So the first constant I'm going to create is going to be a name constant. 40 03:16.350 --> 03:18.350 And it's going to be my name. 41 03:18.570 --> 03:23.970 And then the second constant is going to be a year constant. 42 03:23.970 --> 03:29.730 And for now I'm just going to hardcoded as 2019 so that we can see it inserted in here. 43 03:30.330 --> 03:36.210 So our paragraph is going to get a set of curly braces. In the set of curly braces 44 03:36.210 --> 03:39.300 I'm going to specify the name of my constant right here. 45 03:39.780 --> 03:41.100 So that goes in there. 46 03:41.100 --> 03:42.210 Created by Angela. 47 03:42.660 --> 03:46.050 And then the copyright is going to have the current year. 48 03:46.440 --> 03:49.330 So let's insert that year constant into here. 49 03:49.620 --> 03:51.390 So this is what it should look like. 50 03:51.690 --> 03:54.690 But here comes the slightly more challenging part right? 51 03:54.720 --> 03:58.110 We said we don't want this to be hard coded. 52 03:58.320 --> 04:05.310 So we want to be able to use Javascript to fetch the current year rather than hard coding it in like 53 04:05.310 --> 04:06.330 this. 54 04:06.330 --> 04:08.980 So how can we do that? 55 04:09.030 --> 04:14.040 So if you don't know how to do this or you've forgotten which is perfectly likely when I switch around 56 04:14.040 --> 04:17.010 between different languages I get confused too sometimes. 57 04:17.010 --> 04:22.120 And it's good to know that Google and Stack Overflow are always there for you. 58 04:22.140 --> 04:24.840 So here's a question, get the current year in JavaScript. 59 04:24.840 --> 04:26.970 Sounds pretty much like what we want to do. 60 04:27.030 --> 04:33.090 So we're gonna have to create a new date object and then we call the method getFullYear and they've 61 04:33.180 --> 04:40.590 even very helpfully linked to the Mozilla developer docs here so we can learn a bit more about it before 62 04:40.590 --> 04:42.200 we use it. 63 04:42.210 --> 04:48.840 So this method is supposed to return the year of the specified date and of course you can either create 64 04:48.840 --> 04:57.060 the date yourself or in our case we're going to be using new date and this gives us the current date 65 04:57.090 --> 04:58.350 right now. 66 04:58.350 --> 05:05.610 So if we go back over here and we create a new constant, which is the current date, and we set it equal 67 05:05.610 --> 05:07.130 new Date. 68 05:07.130 --> 05:13.100 So this object should now equal the current date when I am recording right now. 69 05:13.110 --> 05:21.900 So if I go ahead and just log the value of current date and then go ahead and hit save and check in 70 05:21.900 --> 05:30.150 our console you can see that it's Friday November the 8th 2019 and that's this time and I'm on Greenwich 71 05:30.150 --> 05:37.070 Mean Time right now because I'm recording in London. Now that we've got hold of the current date we can 72 05:37.250 --> 05:46.820 get the current year by using that date and calling that method getFullYear. And now because it is a method 73 05:46.820 --> 05:53.300 we of course have to add the parentheses at the end so that we can confirm and check that the year that 74 05:53.300 --> 05:58.260 we've got hold of is indeed 20 19 which is indeed the current year. 75 05:58.820 --> 06:06.950 So now let's go ahead and delete that and instead of console logging it, it's going to be inserted into 76 06:07.040 --> 06:09.020 our paragraph element. 77 06:09.020 --> 06:22.550 And when the date changes say it's now 2022, June the 1st, then we're going to get 2022 inserted into 78 06:22.550 --> 06:29.300 our year because it's going to be dynamically calculated based on the current date. 79 06:29.300 --> 06:30.530 So there you go. 80 06:30.530 --> 06:32.630 Did you manage to get that right? 81 06:32.660 --> 06:40.070 If not, have a play around with the code as you have it here and a link to it as a completed sandbox 82 06:40.400 --> 06:43.040 in the course resources for this lesson. 83 06:43.040 --> 06:49.580 Now one common mistake that students make is they forget these parentheses and what happens in this 84 06:49.580 --> 06:57.230 case is it's not going to work because this is a method. But even worse if we actually tried to put that 85 06:57.230 --> 07:04.130 in here instead of creating that year constant then we actually get a warning from the console saying 86 07:04.520 --> 07:07.790 functions are not valid as a React child. 87 07:07.790 --> 07:12.560 So what this is saying is getFullYear is a function. 88 07:12.860 --> 07:20.270 And if we don't add the parentheses at the end, it's as if we're trying to pass in a function as the 89 07:20.270 --> 07:27.980 value which of course doesn't work because unless we execute the function and call it which is denoted 90 07:27.980 --> 07:34.460 by these parentheses, then it's not going to give us the value that we want. You can of course insert 91 07:34.720 --> 07:44.060 the code inside here as a Javascript expression because it evaluates to a value the 2019 in this case 92 07:44.930 --> 07:51.380 or you can create a constant as we did before where you work it out, assign it to a constant and then 93 07:51.380 --> 07:59.720 put the constant into our HTML element. Either of these ways work and if you want to take a look 94 07:59.840 --> 08:07.700 at this completed code, I've included this sandbox inside the course resources for this lesson in this 95 08:07.700 --> 08:09.290 current completed state. 96 08:09.290 --> 08:15.140 So if there's anything that you're not sure about, have a play around with it and try changing things 97 08:15.140 --> 08:20.420 around until you're comfortable with the code and the JSX and the Javascript that we've covered 98 08:20.510 --> 08:27.680 in this lesson. And then we can head over to the next lesson and we can start learning more about styling 99 08:28.070 --> 08:34.010 our HTML elements using React. So for all of that and more, I'll see you on the next lesson.