All right.
Welcome back.
In the next few videos we're going to focus on building a substantial application something that has
a lot of moving pieces longer h t m l more CSSA a lot of styling and most importantly a lot of dominant
population and event handly what we're going to build is an R.G. be colored guessing game.
So it's not only a great demonstration of how all these pieces fit together but it's also a really nice
tool for you to have.
And for you to practice R.G. be colors because the RGV color system is a little bit unintuitive at first
.
It's very different than most color systems that people are used to working with.
So let me show you how it works.
We load up the page and we get six random colors here.
These are always different.
And one of those colors is listed up here the name of the color in our GP.
And our job is to pick which one.
Remember that there are three channels red green and blue and each one ranges from 0 to 255 and all
that we need are those three colors to make every single color that we could ever want.
Black white yellow orange purple all of those are actually made by combining red green and blue.
So if we take a look.
I have Wikipedia open we can see how additive color mixing works in this diagram.
So we have red green and blue and to make yellow we actually combine red and green which is maybe a
little different than what you're expected to make magenta.
It's blue and red.
And to make Cyan is light blue color it's green and blue.
And then lastly to make white we combine all three.
So here's another diagram done here that makes it a little easier.
We have red green and blue and then magenta yellow cyan and white and then no color is black.
So if we go back we can use that to try and figure out what color this is.
So if we take a look we have a bunch of red almost all red.
Up to 255 so almost There are a lot of green and very little blue.
So a lot of red in a lot of green if you remember from this chart red and green makes yellow.
So if we had 255 red 255 green it would look like this.
But we have less than 255 so it's not going to be as bright.
So let's go back.
Hopefully you can tell which one is the correct answer based off of the diagram we just looked at but
I'm going to guess something wrong first to show you what happens.
So this one is definitely wrong.
This is all red and very little green.
I click and it goes away and it tells me try again.
So let's keep guessing some wrong ones like that one.
This one's wrong.
OK.
Knowledge's guess the correct one.
Red and green it's going to be very yellow.
So this is correct.
I'll click and notice that all six squares come back.
They all change to the correct color and our background appear changes to be the correct color as well
.
And to get a message that says correct and if I want I can click on play again and that will generate
new colors.
My screen goes back to blue up here and I get six new squares and a new random color here.
And then what I can also do is change the difficulty.
So if I want easier I only have three colors to pick from.
This can get a little bit challenging when we have all refresh a few times like here we have two shades
of blue that are very similar.
Now after you play this game for a while you should be able to determine which one is correct based
off of these three pink shades or these two blue shades.
And that's really the point here.
But to start out you might just want two colors to pick from.
So here's another one.
Let's do it a little bit of red.
Almost no red.
A little bit of green.
Not very much.
And a lot of blue of course it's going to give us very pure blue.
Let's go back to hard mode.
One other point that I'll show here is that it's a responsive site so I can resize it and my squares
move to the middle.
Watch this little naff bar here.
The space between them on the sides will increase and decrease.
And if I have a message so let's click on one of these That's wrong.
I get try again.
Notice how these move closer together.
And then I can move them apart and we get some more spacing in there.
So to wrap up before we actually start creating it I just want to summarize a few things.
It's going to be a pretty large app to be a lot of javascript about a hundred ish lines quite a bit
of success as well and some aged him too.
We're going to start kind of bare bones very little styling and we're just going to get the functionality
going and then we'll go and add some styling on top of it.
The other thing.
And then once we finish it hopefully you can use this quite often to brush up on your R.G. skills even
just making this for the course has helped me quite a bit to brush up on some of my RGV skills.
I've noticed that I tend to rely too much on RGV colored pickers.
So this is great for me as well to get some practice and to remind myself how RGV works.
So the next video we're going to start writing some code