WEBVTT 0 00:00.350 --> 00:01.670 Okay, so here we are. 1 00:01.880 --> 00:03.800 We're picking up from the previous lecture. 2 00:03.890 --> 00:06.770 It's going to be a little bit complicated, but not so much. 3 00:07.010 --> 00:10.190 And I'll walk you through exactly what I'm doing. Right now, 4 00:10.190 --> 00:15.500 we've got our content, but if I want to change the background color, for example, to a red, nothing 5 00:15.500 --> 00:16.220 happens. 6 00:16.220 --> 00:17.780 So how can we go about doing it? 7 00:17.780 --> 00:21.710 Well, the first thing is in our code we need to add JavaScript. 8 00:22.070 --> 00:25.250 So we do that by wrapping everything within this script tag. 9 00:25.250 --> 00:29.300 And let me just remove myself so I don't hide any code from you. 10 00:29.450 --> 00:30.230 Adios. 11 00:31.470 --> 00:35.460 The very first thing I want to do is I want to grab all of our color pickers. 12 00:35.490 --> 00:36.150 How do we do that? 13 00:36.150 --> 00:42.090 Well, if we scroll up in our CSS, we can see we've given all of our inputs with type color, a class 14 00:42.090 --> 00:43.920 of input-color-picker. 15 00:45.200 --> 00:46.190 Can you see it? 16 00:47.430 --> 00:48.510 So it's very easy. 17 00:48.510 --> 00:52.250 And if you've done my DOM courses, you'll know exactly what I'm doing here. 18 00:52.260 --> 00:57.410 But I want to define a variable called dynamicInputs, right, 19 00:57.420 --> 01:00.240 or dynamicColorPickers, whatever you want to call it. 20 01:00.240 --> 01:06.870 And in order to put it into this variable, I'm going to be using the document.querySelectorAll() 21 01:06.870 --> 01:13.650 method. And we want to select all of what? All inputs, right, where its class is 22 01:13.650 --> 01:15.870 input-color-picker. 23 01:17.060 --> 01:20.540 And I'll prove this to you, if we console.log this out to the screen. 24 01:20.540 --> 01:23.180 I just want to go slowly so you understand what it is we're doing. 25 01:23.930 --> 01:25.220 Let's go to our browser. 26 01:25.250 --> 01:28.760 Let's inspect this console, Console. 27 01:28.760 --> 01:29.500 And there we go. 28 01:29.510 --> 01:30.800 We've got a nodeList. 29 01:30.800 --> 01:35.990 And if we open that up, there are our two inputs of type color. 30 01:37.560 --> 01:38.670 That's all we've done so far. 31 01:38.970 --> 01:40.590 Let's go back to our code and let's continue. 32 01:40.620 --> 01:41.670 We don't need this. 33 01:41.910 --> 01:46.470 And now this is where it gets interesting, because what do we want to do? 34 01:46.500 --> 01:50.310 Well, on each color picker, remember we have a NodeList? 35 01:50.310 --> 01:54.750 If I go to the browser here, we've got this NodeList, we've got that NodeList. 36 01:54.780 --> 01:56.010 It's a collection. 37 01:56.010 --> 02:01.950 So what we want to do is on every single item in that list, or in that collection, we want to attach 38 02:01.950 --> 02:02.400 an event 39 02:02.400 --> 02:08.130 listener. Again, I went into a lot of detail on this in my DOM courses, but just think about events 40 02:08.130 --> 02:13.140 as a browser firing off events when certain things happen. 41 02:14.110 --> 02:18.310 And when we're dealing with input of type color, we've got a few events. 42 02:18.310 --> 02:21.250 The one we can use here is the input event. 43 02:21.250 --> 02:26.980 So every time that user changes that color widget, an input event gets fired. 44 02:26.980 --> 02:29.350 We then want to listen for that input event. 45 02:29.380 --> 02:35.710 We want to grab that color that the user has chosen, and we want to replace it in our HTML. Effectively, 46 02:35.710 --> 02:38.260 we want to change the CSS properties. 47 02:38.470 --> 02:39.790 Let me show you how to do that. 48 02:40.820 --> 02:42.050 Let's go back to our code. 49 02:42.380 --> 02:44.150 And this is the crux of it. 50 02:44.300 --> 02:46.640 We want to grab our variable, 51 02:46.640 --> 02:48.290 remember it's that NodeList. 52 02:48.910 --> 02:51.690 And we want to use the forEach method on this. 53 02:51.700 --> 02:56.530 If you're not sure what the forEach method is, please check out my JavaScript Grandmaster Course ♟. 54 02:56.530 --> 03:03.700 But basically it allows us to loop through that entire list, not the for method, the forEach method. 55 03:04.150 --> 03:06.730 And I'm just going to be using the arrow syntax here. 56 03:08.580 --> 03:11.970 Each loop gives us access to each item in the loop. 57 03:11.970 --> 03:15.690 And I've just called that item "item", for lack of a better word. 58 03:15.690 --> 03:19.410 And like I mentioned, we want to add an event listener. 59 03:19.410 --> 03:21.310 We want to listen for that input, right? 60 03:21.330 --> 03:27.630 So we're going to grab the item, in our case the color widget, and we're going to add an event listener. 61 03:27.660 --> 03:33.300 The event we want to listen to is the input event. 62 03:34.090 --> 03:37.890 And then we want to now deal with the callback. 63 03:37.900 --> 03:41.530 What happens when that event of "input" is fired? 64 03:41.560 --> 03:46.870 The first thing you need to realize is that every time an event is fired, we get access to the object 65 03:46.870 --> 03:48.040 that fired the event. 66 03:48.040 --> 03:51.730 And it's just common practice for developers to put it into a variable called "e". 67 03:51.850 --> 03:55.300 We could call this the eventObject ... 68 03:55.370 --> 03:59.200 it could be anything we want, but let's just call it "e" to stick with convention. 69 03:59.200 --> 04:01.600 And there's a few things we want to happen. 70 04:01.630 --> 04:05.680 Firstly, we want to know whether the user clicked on ... 71 04:05.710 --> 04:10.960 if we scroll up our HTML here, we want to know whether the user clicked on the background color picker 72 04:10.960 --> 04:12.790 or the text color picker. 73 04:12.820 --> 04:13.990 How can we do that? 74 04:14.260 --> 04:18.640 Well, exactly, my dear students, we can target that data-id attribute. 75 04:18.670 --> 04:20.380 This is why I had it here. 76 04:20.410 --> 04:22.530 This is why it becomes so important. 77 04:22.570 --> 04:30.070 So if we scroll down, what we can do is we can define a variable called cssPropName. 78 04:30.160 --> 04:35.940 And I just want to show you something quickly before, you know, I give you the final solution. 79 04:35.950 --> 04:39.760 I just want to access the object that fired the event, right, 80 04:39.790 --> 04:48.460 that "e" variable. On there, there is a "target" property and that basically gives us the HTML element that 81 04:48.460 --> 04:53.020 triggered the event, which in our case is the input of type color. 82 04:53.020 --> 04:59.350 But on this, we want to access another method straight out of the box called getAttribute(), attribute. 83 04:59.350 --> 05:06.370 And the attribute we want to get is the data-id. And if I just console log this out, you'll see why 84 05:06.370 --> 05:07.880 we have this in our HTML. 85 05:07.880 --> 05:09.310 It's so, so important. 86 05:11.540 --> 05:11.810 Right. 87 05:11.840 --> 05:12.920 Let's go to the browser. 88 05:12.950 --> 05:14.060 Let's clear everything. 89 05:14.060 --> 05:18.020 And let's let's change this color to red. 90 05:19.400 --> 05:20.300 How awesome is this? 91 05:20.330 --> 05:25.070 We know now that we are changing the textColor property. 92 05:25.160 --> 05:30.830 Of course, if we go to the background and we change that, we know we are targeting the bgColor. 93 05:31.040 --> 05:37.250 And this is exactly why, my dear students, this is exactly, exactly why I put these data attributes 94 05:37.250 --> 05:42.680 on each color picker, because now we know what CSS property to effect. 95 05:42.680 --> 05:46.670 But there's a slight nuance. If we inspect this page, 96 05:47.060 --> 05:48.980 let's just zoom out a little bit here. 97 05:49.010 --> 05:52.130 Can you see at the far right of the screen? 98 05:53.620 --> 05:55.060 Let me just scroll down here. 99 05:55.880 --> 06:02.750 Can you see we've got these root CSS properties. And this is the syntax -- primary-bgColor 100 06:03.490 --> 06:05.320 And -- primary-textColor. 101 06:05.620 --> 06:08.860 We need to affect those properties. 102 06:08.920 --> 06:15.670 So the first thing I want to do is I want to grab our page, and then I want to change the property of 103 06:15.670 --> 06:20.740 the primary-bgColor or the primary-textColor to whatever the user's chosen. 104 06:22.230 --> 06:22.800 I know. 105 06:22.800 --> 06:26.850 I know, a lot of words, but let me show you exactly what I mean. 106 06:27.030 --> 06:30.540 So the first thing I want to do is 107 06:31.890 --> 06:32.850 get our root. 108 06:33.480 --> 06:37.040 And by "root" I just mean the actual HTML of our entire page. 109 06:37.050 --> 06:43.260 So we can just document.querySelector(), but we don't need [querySelectorAll()], there is only one root. And I want to 110 06:43.260 --> 06:44.070 grab our root. 111 06:44.100 --> 06:45.060 Now, 112 06:45.060 --> 06:49.230 the CSS prop name is not in the correct format. 113 06:50.030 --> 06:53.390 We need this to be in the format, remember, 114 06:53.390 --> 06:56.660 like this: --primary and then bgColor. 115 06:56.690 --> 06:58.970 That's the format we require it to be in. 116 07:00.260 --> 07:05.120 But currently it's not. So let's just add some temperate literals here. 117 07:05.180 --> 07:10.340 All we can do is, let me just cut this out, and we need it to be in this format ... --primary 118 07:11.160 --> 07:15.960 and then with the dollar sign and curly brackets, we can then put in our variable. 119 07:16.530 --> 07:19.170 It's really, really as easy as that. 120 07:19.320 --> 07:21.240 Now, that should be in the correct format. 121 07:21.240 --> 07:25.800 If we console log this out, console log, cssPropName. 122 07:26.550 --> 07:27.550 Let's see what we get. 123 07:27.570 --> 07:28.550 Clear the console. 124 07:28.560 --> 07:29.760 Let's change the color. 125 07:29.940 --> 07:30.870 There we go. 126 07:31.050 --> 07:35.400 So that variable name, --primary-textColor. 127 07:36.230 --> 07:42.130 If we got our Elements [tab], that will match the CSS properties on our main root page. 128 07:42.140 --> 07:42.860 Can you see it? 129 07:42.860 --> 07:43.970 --primary-textCcolor. 130 07:43.970 --> 07:45.230 --primary-textCcolor. 131 07:45.460 --> 07:51.560 That's all I've done. Now finally, to finish this off, all we need to do is we need to grab our root document, 132 07:51.560 --> 07:53.510 we need to affect its style. 133 07:53.510 --> 07:58.190 And on this object we have a property called setProperty. 134 07:58.550 --> 08:00.290 And which property do we want to set? 135 08:00.320 --> 08:04.670 Well, we want to affect the cssPropName, right? 136 08:04.670 --> 08:12.830 If I go to the browser, and we go to the Elements [tab], we want to set the property of the CSS --primary-textColor 137 08:12.830 --> 08:15.170 name or --primary-bgColor name. 138 08:16.500 --> 08:17.610 So that's what we're doing here. 139 08:17.610 --> 08:19.620 And what value do we want to set it to? 140 08:19.650 --> 08:24.510 Well, what's very cool is that we've got this object right, that's given to us. On that, 141 08:24.510 --> 08:28.110 we've got the target property, which is the item that actually triggered the input event. 142 08:28.110 --> 08:33.490 And on there we've got a value property and that gives us the value that the user has selected. 143 08:33.510 --> 08:36.690 We can delete this console, it's just providing more noise. 144 08:37.050 --> 08:40.470 And my dear students, I think this should work. 145 08:41.100 --> 08:44.400 Go to the browser and we start changing the color. 146 08:44.550 --> 08:50.410 Look at that! You can see our transition property makes it really nice to transition. 147 08:50.430 --> 08:56.040 Let me just zoom out here so you can see nicely. When we change the color, can you see that we are literally 148 08:56.040 --> 09:03.300 affecting on our root document, that CSS property called --primary-textColor? 149 09:04.100 --> 09:05.780 Right, you can see it in real time. 150 09:05.780 --> 09:08.060 How awesome is this? 151 09:08.670 --> 09:11.360 And of course we can do exactly the same with the background. 152 09:11.370 --> 09:12.960 Let's say we want a dark blue ... 153 09:13.990 --> 09:19.170 we are changing the --primary-bgColor on our root document itself. 154 09:19.180 --> 09:20.560 Well done for sticking with me. 155 09:20.560 --> 09:22.420 I hope you have stuck with me through this. 156 09:22.570 --> 09:25.270 If anything is unclear, please ask on Q&A. 157 09:25.300 --> 09:30.270 You know I'm here to help you, but we are still not quite done. 158 09:30.280 --> 09:34.330 I want to do a few more challenges with you, which I'm super, super excited about. 159 09:34.360 --> 09:35.170 See you now.