All right welcome back.
Let's go ahead and get started on this.
RG be guessing game application.
I'm going to make the h tim file first and the C S S and create this simple grid.
So we're not going to style it with the background colors and the fonts and this little now are here
we're going to just start simple with six squares and give them some background colors maybe a little
spacing between them but we won't do things like add the rounded corners yet we're not going to add
any of the animations.
The fade in and the fade out all we'll do is get six squares and then we'll add the basic logic of quick
events and checking if you get the correct color and so on.
So first we need to make an edge to him file which I have here.
I call that colored game each time so we'll add in our team out here.
The boiler plate.
Give it a title.
I'll do color game.
Let's go ahead and add in the six squares.
So I'm going to make them divs.
Each one is a div with a class of square and we'll use that squared class to style them later.
All right so we'll do div class equal Square and we don't need to put anything inside of it and we'll
have six of those.
And then just to make this cleaner I'm going to put them all instead of another div that we can style
later.
I'm just going to call it container.
So it's not going to do anything upfront.
Eventually we'll use it to make the site responsive and to make the grid shrink.
For now it's just going to group them together so we don't just have 6 squares floating around.
OK so we have our six squares here.
If we open this up in the browser game that edge to him.
We don't see anything of course for a few reasons.
One even though we have six divs they have no With there's no margin there's no color so we don't see
anything at all.
So we're going to start by styling them very basically.
So need to add in a style sheet so I'll link to the style sheet first which I haven't created and make
this a little bigger.
So I'll call it color game see SS and save and then make that file color game C Ss and the first thing
that I'll do is just add a background color to our entire body.
So far the background color and the color I'm going to use is a hex code.
It is 2 3 2 3 2 3 and save make sure that it's connected.
Yep.
So we get the correct background color.
Next up we go ahead and start to style our squares.
We're going to use the same strategy we use to make this VSS for photography portfolio site where we
had that responsive grid of square images.
They were all black and white.
Can you use the same idea here.
So the way that we're going to do this is each one of these is inside of a container and they each take
up 30 percent of that container.
So the container only goes right around these squares.
It's not the entire body here just around the squares.
They take up 30 percent and then we have a margin between them on all sides.
1.6 6 percent.
So that all adds up to be 100 percent of the container.
So we'll do that first square with will be 30 percent.
And if we can just leave it at that and give him a background let's make them purple and save and we
don't see anything still.
And the reason that's happening I'll show you if we inspect our lives are on the page.
They're just still empty.
What we need to do.
Last time we had images and images have some content in them but these divs are empty.
So we're going to add in some space and we're going to use padding bottom.
We could also use padding top though so padding bottom and that's also going to be 30 percent.
So if I refresh.
OK.
We now have six squares although they are all in a line which is not what we want.
We want them to be on the same line.
So we need to float them to the left which is what we did with the image grid as well.
So float left and save we refresh.
And now we end up with this massive grid here.
Oh go ahead and at the margin in so that you can see what's happening.
So we're going to have margin 1.6 6 percent and save.
Now you can see we have our grid here and this grid does take up the entire screen.
So I am going to change that a little bit.
We don't want it to be so huge.
And what we can do is use that container that we provided this div ID container.
So if we style that the div with the idea of container which we would select just like this and we can
start by just telling it that its maximum width should be.
And I think I went for 600 pixels.
We can play with that number.
Now if I refresh Now you can see it's much smaller.
So that's part of it.
And then what's also Center this.
So we'll 2 margin.
0 auto.
Remember this trick the zero margin on the top and bottom of the container and auto on the left and
right will make it so that it's the same size on either side.
And now we have this nice center grid.
All right.
And let's do one more thing which is at our H-1 so I'm going to have an H1 here and it's just going
to say the great R.G. be color game and we'll just start like that.
And if we refresh of course it's really hard to see.
So let's make it white H-1 color white and save.
And we'll start with that.
So now let's use some javascript.
We're going to set javascript up to give each one of these a different color.
So let's go and make a new file and we'll call it color game.
J.S. and save.
And like I always want to do let's add in our alert that says connected.
Now let's add the script in source equals colored game.
Yes save refresh the page and we get our connected alert.
OK so I'll resize the window there.
Now let's add the code to give them different colors.
So in the end result in the end game.
Every time the page loads it picks six random colors and then it assigns each color to one of the divs.
We're going to start with out the randomized aspect and we're just going to assign six colors that are
always the same.
And then we'll move on to randomizing them.
So let's go to my color game Yes and I'm going to start by making a list of colors and I'll just call
it colors.
It's an array.
And remember in our end product this will be a random list of colors.
For now I'm going to just add some of my own.
So G-B and I'll start with all red.
So 2 5 5 0 0 and just to make this legible for you I will Let's do this all on separate lines.
So we'll have six of these.
And the first one will be all red and then we'll have another one that's all red and all green which
would make yellow.
And then the next one will be 0 red and all green.
And then the next one after that will be zero red or green and all blue and then will also do.
So you read 0 green 255 blue and then we'll do 255 red 0 green 255 blue and that will give us an array
of six colors as strings.
And then what we want to do is select all six of these squares loop through them and then assign one
of these colors to each one's background.
So to loop through first we need to select so far and we'll call it squares equals document and we have
a lot of choices here.
I'm going to use a query selector all.
So I make sure to get all six of them rather than just the first one.
And we're going to select based off of the class square.
If we had just done div remember that we have a container div and we don't want to select that one.
We only want these six square divs so square and then we'll loop through four var equals zero.
I less than squares length and I plus plus instead of here we will then say squares I dot style dot
background equals and this is the interesting part we're going to take that eye and use it to access
colors.
Either this is Colt I'm here with a little fix that I'm adding after the fact.
Just a quick note.
It's much preferrable preferable to your style background color so background color one word with an
upper case C rather than style dot background which is what I'm using in this video.
So any time you see styled up background change it to background color.
And the reason for that is that it will work in all browsers currently style but background does not
work in Firefox so it technically works in style.
That background will work in Chrome for example just fine and the game does work but I've been getting
a lot of questions about what's going on in Firefox and this is really the main culprit styled background
color.
Also I'd like to think Del Anderson one of the students in the discussion forums for pointing this out
most recently I'll get back to coding.
So what we're doing we have six squares and our eye is going to go from 0 1 2 3 4 5 and that will loop
through each square.
And then when I get to the first square I'm going to take zero and give it the background color of colors
zero which is right here.
So that would be right.
And then we keep going and we take one for the second div and we give it the second color with index
of 1 and we keep doing that until we get to the end.
So we're basically going in order that the divs are on the page is the order that they will be colored
using these colors from the array.
And if we save refresh you can see we get our six basic colors.
So we have red yellow green cyan blue magenta.
So that's fine for now.
We will focus on randomising colors later.
But as a preview although we need to do is generate three numbers three different numbers from 0 to
255 and then we combine them.
So it's just three different channels all randomized.
And then we make them into one big string with r.g B and parentheses around them.
But we're going to go with these colors for now.
The next thing that we need to do is every time that the page loads.
I show you here not only are six colors picked.
One of those colors is selected to be the goal or to be the color that we're looking for.
So in this case this is a color that's picked.
So we're going to do that as well and we're going to start Portus hard coding it and then we'll randomize
it afterwards.
So we're just going to start by saying the gold color is cyan.
So that's the fourth color index of three.
So all right the variable here var picked color equals the colors array index 3.
And that will pick Suyin or this color here R.G. B.
0 2 5 5 2 5 5 and it's a string remember then what we wanted to do is update our page so that it says
that right here just like we have it here.
Obviously not styled the same way but we want it to say R.G. B.
And then in parentheses 0 2 5 5 5 5 to do that we're going to have to change or to him out a little
bit if you can think back to the scorekeeper game where we had an H1 and we are changing the.
Player one player two scores initially.
We just had a plane H-1 And when we updated it it automatically overwrote everything else that was in
there.
But we don't want to do that.
We want to keep the text the great and color game and our color just goes here but we don't want to
have a separate H-1 or something because those would go on separate lines.
So we're going to use a span just like we did in the scorekeeper game and just add in R.G. be there
as a placeholder.
So nothing looks different but if we inspect.
You can see we now have a span which means you can easily select it and manipulate the text.
And we're going to give it an idea just to make it even easier.
So we'll give it id.
And let's just call it color display.
Then we'll go to our javascript and select that.
So far color display equals document and we'll to get element by id just for variety sake kid element
by ID.
And it was color display.
And we'll save and make this a little bit bigger.
Save the file and then we want to update color display so that it says this color that we picked.
So that's going to be color display text content equals pick it's color just like that and will refresh.
And now we end up with our color here.
Great.
Let's add the logic now for the click events.
So when I click on one of these squares we want to run some code that's going to figure out which color
the square is that we clicked on.
And once we have that color we're going to compare it to the pix color.
This one right here.
And if they're different We're going to change the background color of that square so that it goes to
the same color as the background of the body.
And if they are the same then that means that the player has one.
And we need to do some special things.
And if they're different that means a player picked the wrong color and will also have to handle that
to start.
Let's add just a plain click event handler that just alerts when we click.
So we're going to add an event handler to every single one of the squares so we can just use the same
loop that we have.
So I'll add a comment here add initial colors to squares and then the next part will be click listeners
two squares.
So another one of these squares I dot add event listener.
It's time for Click and our callback function.
All we'll do is alert quite a square and make sure all six of them will alert us.
All right click the square.
All right it looks like they all work just fine just how they need to.
So now what we need to do is grab color of clicked square and then compare color to pick color.
The variable picture color which we defined appear so we'll start to get that color.
Remember we can use this that refers to the item that was clicked on the square.
So we can say this that style of background.
And let's just do another alert here and let's see what we get.
So if I click on the red one it alerts me.
RG B 2 5 5 0 0 and if I click on assign one R G B 0 2 5 5 2 5 5.
So this is working.
So what we'll do now is save this to a variable we'll just call it clicked color just like that.
And then we're going to write an IF statement to compare Quick's colors so if it's color triple equals
pick the color nice rhyme there if that's the case we will alert correct.
And if they don't match with or else we will alert wrong.
Let's give it a shot refresh.
I click on this one.
Wrong.
And the true test.
I click on the right one it says correct.
So our logic is working even though we don't have any of the random colors in what we do have is an
array of six colors that are hard coded in and we're assigning a color to each square and then we're
picking.
In this case cyan and this will be random of course but we're picking one color that is our answer.
And then we're adding an event listener to every square when the user clicks on that square or any square.
We compare the color of the given square to the picture color if they match.
We do one thing.
If they don't match we do something else in the next video we're going to talk about what we actually
do if they match.
And what we do if they don't match.