I told you, I'm going to be sticking with this cup of coffee ☕ through these challenges.
So, so fun.
Anyway, it's a really fun challenge because as I mentioned in the intro to this challenge, what's
really cool, is the skills
you're learning about forms you can apply even outside of forms.
Very, very cool.
But now, because we're going to be dealing a lot with CSS, I do want an external CSS file in this
example.
Okay.
So firstly, let's just set up the HTML.
You can see I've got an index, an empty index.html file and an empty styles.css file.
So let's set up the basic structure and then we'll start coding the CSS together.
Have fun.
As always, let's start off with our HTML.
Let's have a head. Within the head,
we can just do a title saying Color Theme ...
how about Picker?
There we go.
And then of course, as I mentioned, I don't want to write all our CSS inline.
It's just going to be a bit messy.
So let's just link to our CSS file, called styles.css.
There we go.
What is the first thing I want to do?
Well, the first thing I want to do, is remember in our introduction, we had kind-of that banner at
the top that had our background picker and our actual font-color picker.
So let's wrap that in a div, with class of wrapper.
Very very simple
And let's now set up our background picker.
And again, what I want to do is I want to wrap this in another div with class picker, and it's very
useful to wrap things in containers because then when you apply CSS, it becomes so, so easy and you'll
see how in a second within this div I want us to have a label.
Okay.
Very, very simple.
And all I want to say is I want this to be clear that we're dealing now with the background.
And how do we create that actual picker?
That's right, my dear students.
It's input where its type is set to color.
We don't need a name or an ID, but what I do want to have is I want to have a class.
Okay.
Because we're going to be styling this with CSS, and let's just call it "input-color-picker".
And what else?
I want to also have this data-id, okay.
And you're going to see how we use this later.
If you don't know this word "data", it's just a "data" attribute in CSS and it's used to style elements using
attribute selectors.
Whaat? 🙄 What is this data-id?
Let me just scroll up here.
I think that's above my head.
Why am I putting this data-id attribute inside our HTML?
Well, you're going to see how we do this a bit later, but we are going to be using JavaScript and
in the CSS file I want to set some root variables, color variables, and we're going to have two color
pickers.
Remember, we're going to have one for the background color, which here I'm calling bgColor and I
have to use the same kind of setup, the same word in my CSS file, which I'm going to show you shortly.
So we've got bgColor for background color.
The second widget we're going to have is for the text color.
So I'm going to have textColor as the other data-id attribute.
And later on, what we're going to have to do with CSS is whenever the user, let's say the user clicks
on the background color widget, we're going to have to see what that color is in the widget, then
tell JavaScript to change the color to whatever the user has selected, and that in turn will change
the actual background color itself.
So what I'm going to be doing is, we're setting up two color widgets, right?
One for the background and one for the text color.
Here we're dealing with the background, which is why I've set the data attribute in CSS to bgColor.
And what I'm going to be doing later with JavaScript is I'm going to target the CSS root variable that
I've defined, which I'll call bgColor, and I'm going to then replace its value with whatever the
user's picked.
So you'll see how we use it shortly.
I'm going to be doing something very similar for the text color.
I know it can seem quite daunting, but don't worry, we're going to go through it together shortly.
Let's get back into it.
So there we go.
That's our background picker.
I want to do something very similar now, but now I want to do our color picker ...
actually let me be explicit, our
text color picker.
The one above here is our background color picker.
Always good to label your code.
Again, I'm going to wrap it in a div with the same class of picker.
And then we're going to have a label.
This time the label is going to be color.
Meaning text color.
Then we're going to have an input
you guessed it, of type color.
We don't need a name and we don't need an ID.
What I do want to do, though, is I want to give it a class of input-
color-picker.
The same class as our background color picker.
I want them styled the same.
But remember what I just said.
We're going to have this data attribute in CSS and it doesn't have to be "id",
I'm just calling it "id". But when you see the data word here with a dash, we are creating a CSS data
attribute and we can just target this later.
It's pretty neat and I don't want to call it bgColor. Here,
we're going to call it textColor.
All right.
Pretty straightforward.
Should we see what this looks like in the browser?
There we go.
We've got a background and a color picker.
We can already see it's starting to take shape.
So that's kind of the banner. We've dealt with
the banner.
Now, what I want to do is I want to deal with our content.
Again, what I want to do is I want to wrap everything within a div, this time with class of "main".
Then we have a few sections within this.
We can create another wrapper, this time with class of content, because that's where our content is
going to go.
And let's wrap this in an element called <main>.
Why not?
Just so you know, my dear students, this <main> element basically depicts or demarcates the main dominant
content on your page.
It's just semantically providing meaning to whatever it is we're doing.
So here I want an H1 tag.
This is your main page.
Uh, then let's have a paragraph, and we can say this is a great example of using
and here I want a code element,
okay.
Now what I want to do, is within this code element, I want to type the input of type color, right?
But I cannot use the less-than and greater-than signs directly like this, because HTML will interpret
this as meaning it's an element.
In other words, they are reserved characters.
So we need to use a character reference entity, which we've learned about in this course ages ago,
and the character reference entity for less-than is "lt"
believe it or not.
So there we go.
Less than.
And then I want to type the words "input of type color".
Pretty straightforward.
And then I can't do greater-than,
so we're using the & symbol and then "gt" for greater than.
This should work. If we have a look at our browser.
There we go.
Let's put the proper syntax in there.
How cool is that?
All right, let's continue with this.
This is a great example of using input of type color outside of a form.
And then I'll just emphasize.
Cool, right?
And then let's just have another paragraph element here.
And in here we can just type,
although this course is all about forms and hence,
and hence we're learning
about form widgets,
the skills you learn will give you the ability to use these widgets in many different applications.
There is our paragraph.
What else can we do?
We can set a footer.
And we can say a cool, tiny project by me,
Clyde.
If we go to our browser, we can see it's starting to take shape.
Right?
How cool is this?
The next step, my dear students, is to style this nicely with CSS and you'll see,
now, surprisingly, the CSS is very simple.
The kind of thought aspect of this comes when we write JavaScript.
So first let's jump over to our styles.css page and let's start now typing up the CSS together.
Then we'll get on to the harder aspect of JavaScript.
Let's expand this and let's scroll to the top.
What did we call it?
We called it styles.css.
So let's open this up and let's start styling CSS.
What I'll do is I'll have the browser displayed to the right so you can see the effects as we go on.
As I mentioned earlier, I want to define some root CSS variables, right?
And again, there are many ways to do things when it comes to programming.
This is just how I'm doing it.
The first thing I want to do, is define our primary bgColor.
This bgColor is very specific.
It has to match what we set on this data-id attribute, bgColor.
They have to be the same
okay.
You'll see shortly
why.
Because I'm going to be using JavaScript.
And let's just pick a very easy color.
Just like a gray.
And then I want to do the same thing,
but we're going to be doing our primary textColor.
And here we can just do one, two, three, four, five, six.
How's that? White and gray.
Pretty straightforward.
Okay, let's affect the styling of our body quickly.
Font size 20 pixels.
Padding,
I always like removing padding on the body because then we can be more explicit.
Margin zero.
There we go.
And the background of the entire body can be ... 🥁 drumroll 🥁 ... you guessed it, our --primary-bgColor.
And if we save this, there we go.
It's kind of this gray looking color.
The next thing I want to style is the wrapper.
If we go to the index page, I want to style this wrapper.
Kind of call it the banner.
Okay.
Very, very easy to style.
All we need to do is target the class of wrapper.
We can define its width as being 100%.
We can change its background color because I don't want it to be the same
dark gray.
224, 224, 224.
There we go.
It's like a light gray.
It's looking nice.
Let's give it some padding.
There we go.
And you can see now on the banner, the background picker and the color picker are below each other.
The reason it's below each other is because they are displayed by block, or they're displayed as block
by default.
So let's just quickly change that.
And remember, we gave them the same class name.
What was it?
Actually, let's go to our index file.
Let's just have a look here.
We gave it a class of "picker".
We've wrapped them in a div, with class of picker.
So it actually makes it very, very simple for us because all we have to do is target the picker class.
And we can set its display property not to block, which is by default, but to inline.
And now it's really cool.
Now they're displaying next to each other.
And what about the main content?
Obviously with the dark gray background, it doesn't look nice having a black so we can target our main
class, which is the main content, right?
And we can change its text color to, you guessed it, our variable, but this time our textColor variable.
There we go.
Now, my dear students, when the user clicks on this, call it, the color picker, for example, and they
start now picking red, I want the text color to change to red, but I want it to transition nicely.
So let's add a transition property to this and we can apply this transition to all CSS that's changed
on this element.
And I don't know, 0.16 seconds.
And how about ease-in, and ease-out?
Very very simple.
Obviously nothing happens now, right?
Because we haven't done any JavaScript, but you'll see how it fits in nicely later.
Let's just give this some padding.
Yeah, I think that looks nice.
Um, what else can we do?
We can target the content class, and here we can give it a width of 50%.
I think that'll look better.
And then we can center it.
Margin zero auto.
How does that look? Let's expand the browser,
I think this looks pretty neat.
I really do.
Woo hoo!
So we're getting there.
We're coming along very, very nicely.
I'm super excited.
We've set everything up now, but we've got the hard bit and that is writing JavaScript.
Don't worry though, it is intuitive once you understand it, but I'm going to pause the video here.
Actually, I'm going to stop this lecture and I want you to just think about don't think about how to
write the code because you know, you might not understand how to write the JavaScript, but think about
the steps that we need to create.
We need to somehow get the CSS variables that we've defined.
Let me go to the file.
Right.
We need to somehow target the primary bgColor and we need to make that dynamic.
So when the user toggles that widget, opens that background widget, that color widget, and changes
the color, we need to somehow change this.
We need to do it dynamically.
So in the next lecture, let me write up the JavaScript for you and show you how it's done.
I'm super, super excited.