Okay, so here we are.
We're picking up from the previous lecture.
It's going to be a little bit complicated, but not so much.
And I'll walk you through exactly what I'm doing. Right now,
we've got our content, but if I want to change the background color, for example, to a red, nothing
happens.
So how can we go about doing it?
Well, the first thing is in our code we need to add JavaScript.
So we do that by wrapping everything within this script tag.
And let me just remove myself so I don't hide any code from you.
Adios.
The very first thing I want to do is I want to grab all of our color pickers.
How do we do that?
Well, if we scroll up in our CSS, we can see we've given all of our inputs with type color, a class
of input-color-picker.
Can you see it?
So it's very easy.
And if you've done my DOM courses, you'll know exactly what I'm doing here.
But I want to define a variable called dynamicInputs, right,
or dynamicColorPickers, whatever you want to call it.
And in order to put it into this variable, I'm going to be using the document.querySelectorAll()
method. And we want to select all of what? All inputs, right, where its class is
input-color-picker.
And I'll prove this to you, if we console.log this out to the screen.
I just want to go slowly so you understand what it is we're doing.
Let's go to our browser.
Let's inspect this console, Console.
And there we go.
We've got a nodeList.
And if we open that up, there are our two inputs of type color.
That's all we've done so far.
Let's go back to our code and let's continue.
We don't need this.
And now this is where it gets interesting, because what do we want to do?
Well, on each color picker, remember we have a NodeList?
If I go to the browser here, we've got this NodeList, we've got that NodeList.
It's a collection.
So what we want to do is on every single item in that list, or in that collection, we want to attach
an event
listener. Again, I went into a lot of detail on this in my DOM courses, but just think about events
as a browser firing off events when certain things happen.
And when we're dealing with input of type color, we've got a few events.
The one we can use here is the input event.
So every time that user changes that color widget, an input event gets fired.
We then want to listen for that input event.
We want to grab that color that the user has chosen, and we want to replace it in our HTML. Effectively,
we want to change the CSS properties.
Let me show you how to do that.
Let's go back to our code.
And this is the crux of it.
We want to grab our variable,
remember it's that NodeList.
And we want to use the forEach method on this.
If you're not sure what the forEach method is, please check out my JavaScript Grandmaster Course â™Ÿ.
But basically it allows us to loop through that entire list, not the for method, the forEach method.
And I'm just going to be using the arrow syntax here.
Each loop gives us access to each item in the loop.
And I've just called that item "item", for lack of a better word.
And like I mentioned, we want to add an event listener.
We want to listen for that input, right?
So we're going to grab the item, in our case the color widget, and we're going to add an event listener.
The event we want to listen to is the input event.
And then we want to now deal with the callback.
What happens when that event of "input" is fired?
The first thing you need to realize is that every time an event is fired, we get access to the object
that fired the event.
And it's just common practice for developers to put it into a variable called "e".
We could call this the eventObject ...
it could be anything we want, but let's just call it "e" to stick with convention.
And there's a few things we want to happen.
Firstly, we want to know whether the user clicked on ...
if we scroll up our HTML here, we want to know whether the user clicked on the background color picker
or the text color picker.
How can we do that?
Well, exactly, my dear students, we can target that data-id attribute.
This is why I had it here.
This is why it becomes so important.
So if we scroll down, what we can do is we can define a variable called cssPropName.
And I just want to show you something quickly before, you know, I give you the final solution.
I just want to access the object that fired the event, right,
that "e" variable. On there, there is a "target" property and that basically gives us the HTML element that
triggered the event, which in our case is the input of type color.
But on this, we want to access another method straight out of the box called getAttribute(), attribute.
And the attribute we want to get is the data-id. And if I just console log this out, you'll see why
we have this in our HTML.
It's so, so important.
Right.
Let's go to the browser.
Let's clear everything.
And let's let's change this color to red.
How awesome is this?
We know now that we are changing the textColor property.
Of course, if we go to the background and we change that, we know we are targeting the bgColor.
And this is exactly why, my dear students, this is exactly, exactly why I put these data attributes
on each color picker, because now we know what CSS property to effect.
But there's a slight nuance. If we inspect this page,
let's just zoom out a little bit here.
Can you see at the far right of the screen?
Let me just scroll down here.
Can you see we've got these root CSS properties. And this is the syntax -- primary-bgColor
And -- primary-textColor.
We need to affect those properties.
So the first thing I want to do is I want to grab our page, and then I want to change the property of
the primary-bgColor or the primary-textColor to whatever the user's chosen.
I know.
I know, a lot of words, but let me show you exactly what I mean.
So the first thing I want to do is
get our root.
And by "root" I just mean the actual HTML of our entire page.
So we can just document.querySelector(), but we don't need [querySelectorAll()], there is only one root. And I want to
grab our root.
Now,
the CSS prop name is not in the correct format.
We need this to be in the format, remember,
like this: --primary and then bgColor.
That's the format we require it to be in.
But currently it's not. So let's just add some temperate literals here.
All we can do is, let me just cut this out, and we need it to be in this format ... --primary
and then with the dollar sign and curly brackets, we can then put in our variable.
It's really, really as easy as that.
Now, that should be in the correct format.
If we console log this out, console log, cssPropName.
Let's see what we get.
Clear the console.
Let's change the color.
There we go.
So that variable name, --primary-textColor.
If we got our Elements [tab], that will match the CSS properties on our main root page.
Can you see it?
--primary-textCcolor.
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,
we need to affect its style.
And on this object we have a property called setProperty.
And which property do we want to set?
Well, we want to affect the cssPropName, right?
If I go to the browser, and we go to the Elements [tab], we want to set the property of the CSS --primary-textColor
name or --primary-bgColor name.
So that's what we're doing here.
And what value do we want to set it to?
Well, what's very cool is that we've got this object right, that's given to us. On that,
we've got the target property, which is the item that actually triggered the input event.
And on there we've got a value property and that gives us the value that the user has selected.
We can delete this console, it's just providing more noise.
And my dear students, I think this should work.
Go to the browser and we start changing the color.
Look at that! You can see our transition property makes it really nice to transition.
Let me just zoom out here so you can see nicely. When we change the color, can you see that we are literally
affecting on our root document, that CSS property called --primary-textColor?
Right, you can see it in real time.
How awesome is this?
And of course we can do exactly the same with the background.
Let's say we want a dark blue ...
we are changing the --primary-bgColor on our root document itself.
Well done for sticking with me.
I hope you have stuck with me through this.
If anything is unclear, please ask on Q&A.
You know I'm here to help you, but we are still not quite done.
I want to do a few more challenges with you, which I'm super, super excited about.
See you now.