WEBVTT 00:00.290 --> 00:04.790 Okay, so hopefully you managed to give that a go and you achieved the bit of functionality that we've 00:04.790 --> 00:06.980 added here just to switch between the different modes. 00:06.980 --> 00:08.990 And how do we accomplish this? 00:08.990 --> 00:14.810 Well, if we go back to the app components, then what we would need to do is we would need to swap 00:14.810 --> 00:21.320 that constant that we had for just dark mode and use the Usestate give it an initial value of false 00:21.320 --> 00:21.890 in this case. 00:21.890 --> 00:25.520 So dark mode is set to false, which means it's going to start off in light mode. 00:25.520 --> 00:28.970 And then we have our function to set it to dark mode. 00:29.390 --> 00:34.580 Now to make it simple, I created a separate function called toggle dark mode, and I set the dark mode 00:34.610 --> 00:41.930 to the opposite of whatever dark mode currently is set to, and then we can pass down the properties 00:41.930 --> 00:45.560 we need to our navbar where the button is located. 00:45.560 --> 00:52.430 So we've got the toggle dark mode function, and we're passing down the dark mode property to the navbar. 00:52.460 --> 00:57.830 Then inside the navbar we create a type of props and we give the toggle dark mode. 00:57.830 --> 01:00.170 We pass that down and give it its signature. 01:00.200 --> 01:03.260 It doesn't take any parameters and it doesn't return anything. 01:03.260 --> 01:05.900 So that's the signature of that function. 01:05.900 --> 01:11.380 And then we've got the property for dark mode, which of course is a boolean, and then we destructure 01:11.380 --> 01:19.810 them inside the arguments for the navbar function, and then it's just a case of using the onclick and 01:19.810 --> 01:24.160 removing the const of dark mode, of course, and then just setting the onclick function to call the 01:24.160 --> 01:25.120 toggle dark mode. 01:25.120 --> 01:29.230 And that gives us our functionality that we see there. 01:29.260 --> 01:31.960 So just a nice simple challenge to start us off. 01:31.960 --> 01:33.970 Hopefully you had success with that. 01:33.970 --> 01:36.970 And this actually brings us to the end of this section. 01:36.970 --> 01:39.520 So that's a milestone that we've now achieved. 01:39.520 --> 01:44.230 And we can now commit and save our changes into source control. 01:44.230 --> 01:51.310 So if we take a look at the changes we've made then react application itself comes with its own. 01:51.310 --> 01:52.900 Gitignore file. 01:52.960 --> 02:00.700 So it ignores things like node modules and many other things that we don't write ourselves or code that 02:00.700 --> 02:01.690 we don't write ourselves. 02:01.690 --> 02:04.090 So we do not need to send it up to GitHub. 02:04.210 --> 02:05.500 But this is the big one. 02:05.500 --> 02:10.600 This one contains thousands and thousands of files that we do not want to save into GitHub, because 02:10.600 --> 02:17.110 we can get node modules back simply by running npm install, and that will go and get all of the packages 02:17.110 --> 02:19.690 we need and populate this at any time we need to. 02:19.720 --> 02:25.780 So as long as we've got a package.json which we do, which we do save into GitHub, then effectively 02:25.780 --> 02:30.250 we don't need any of those files in the node modules folder and a few other things as well inside there. 02:30.250 --> 02:33.040 But this comes when we create our react project. 02:33.070 --> 02:34.210 It comes with its own. 02:34.210 --> 02:35.200 Gitignore file. 02:35.200 --> 02:37.120 So we don't have thousands of files here. 02:37.120 --> 02:39.760 We've got 45 for our react project. 02:39.790 --> 02:41.680 Looks like my store DB was updated. 02:41.680 --> 02:44.380 Don't worry about that specifically. 02:44.380 --> 02:48.400 Unlike I say you can choose to include this or you can not include it with GitHub. 02:48.400 --> 02:49.960 It really doesn't matter. 02:49.960 --> 02:51.880 And I'm going to say that's fine. 02:51.880 --> 02:53.920 So I'm going to stage these changes. 02:53.920 --> 02:58.510 I'm going to give it a commit message of end of section three. 02:58.540 --> 03:00.790 In this case click commit. 03:00.790 --> 03:03.850 And I'm going to sync changes with GitHub. 03:03.850 --> 03:10.090 And it tells me that syncing will pull and push commits to and from origin main I'm okay with that. 03:10.090 --> 03:12.340 So I'm going to say okay don't show again. 03:12.340 --> 03:17.530 And this will get the changes published into our public GitHub repository. 03:17.530 --> 03:19.660 So that brings us to the end of this section. 03:19.660 --> 03:22.030 And next we'll wrap up with a summary.