All right, everyone.
So let's start our project.
So I will also be having a final version of the same project inside of Ola,
and we will be creating our project from scratch.
So let's add a new and next stable file.
This is the standard name for SD email files.
And let me quickly add our boilerplate and let's add the title.
So let's call it as ping pong project.
And let's move to the body part.
Now, in the body part, let me see what we need.
So here we have a title, and here we have a card
and we can wrap it around our deal.
So let's create a def with the idea of container.
So we can add a hash symbol and we can name the idea of our Dave.
So can container and let's head there.
So this will create our def section.
And inside this section, what is the first element that we need?
The first element that we need is h one bag.
So the h when beng so let's call it H1
and here we need to write scoreboard.
Now this is a very general thing that you should know.
So we have completed our this statement H1.
Now we need to move to a new line.
So what you should think you should do, you should either go to the end of this
line, click on here and then click and or and you will be on a new line.
But ah, or else what you can do to save
your time is being on this same line or being on any point in this line.
You can use the hotkey control enter
and you will be shifted to a new line.
So this is a very cool and handy stuff that you should know right now.
Next thing that we have is a card, and
I think we can also wrap around this card in a day.
So let's create a new level.
And basically for this project
I will be only using eighties for the sake of specificity.
And if you want, you can also work with classes, right?
So let's call it as card.
Now inside this div, what we need
are the first thing that we need is a H1 bag.
And inside this H1 we have the scores.
So let me create each one.
Basically that's not one, that's H1.
And here in H1 we need two scores to be selected
using group because we will be changing it, are using script.
So what I will do is I will use a span element
and I will just add it as a span element.
So span with the idea of player one score of B when simple
and our initial value will be zero for the first player from zero to
we have the span for player two that is span with the idea of P2
and the initial value for this will be zero as well.
Now let's move to our new line
and let's see if we can add something to this H1.
I think that that's said for the H1.
Now let's create a new element. So
the new element that we have is a winning score.
So let me just set it as a paragraph and we can give some added to this paragraph.
Maybe a winning score.
And inside this we can write.
No, that's fine.
Let's hit and control.
Enter Now, after this paragraph, we need a select option
and basically it will contain pal values from 1 to 10.
So let's add a select bag and
we can give the idea for this select tag.
So first of all, we need to give the name.
So name will be winning score and the idea will be,
let me call the ideas W. S.
Now let's more or so we need ten options
here and options will range from 1 to 10.
So this is the point where I'm going to teach you some new steps, right?
So the first way that you can add the options is you can basically type
in option and this will give you option name with a value and you can
then manually add the value one and the place will as one
and you can do it ten times, but that will be very hard working.
So what else you can do is you can look with just the odds.
So let me just remove this line.
And after that, the second way, what that you can do is you can write
it again option and you can just duplicate this line ten times.
So you is the hotkey or shift down
arrow to repeat this line ten times
and you can just then place the values and the place rule.
But what we will be doing here is omit abbreviation.
And let me show you the elevation for the same.
So we need option.
And inside the option we need an attribute of value.
And the value attribute will range from 1 to 10.
And we need a place holder as well.
So with of place value will be ranging from 1 to 10.
So we need the attribute and we have the attribute
and so we need option.
And the attribute for this will be value.
So attribute are basically in it is represented under this large bracket.
So in this large bracket we need the attribute of value
and the value will range from 1 to 10.
So we need to give it a variable so we can add a dollar sign here.
And after that we need a place for low values
and a place for low value will go from 1 to 10 as well.
So let me add a dollar sign here
and we need to repeat it ten times.
Basically, let's do it 15 times and let's hit Babo and go.
And this will create the 15 instances of option and value great self.
Now let's move in to the next line and let's see, what else do we need?
So we need three buttons here and we can
similarly grab these three buttons inside our div.
So let's add them with the idea of buttons.
And inside
this all we need to add first two buttons.
It says Press one player one and place to player two
so we can also do it using M8.
But before that, let me show you the normal version of doing the same.
So we will add the button and then you have to manually add
an ideal class or you can type in something
like button and player one player
one button for all, button of player one
and then you can type in the value here or we will be doing very smartly.
We will be making an elevation, so be it in for the button.
And after that we need the idea value.
And in the idea value, all we will be giving you the idea like A, B and B, So
the one will change for the first player and the second player.
So we need a variable here.
So variable is represented using dollar sign
and before button and inside this we need a place with low value.
So the place for low value will be plus one
player and available as well.
So the variable will change from 1 to 2 and we need two times.
So two times and let's hit enter.
So we have got to balance the first one with the idea of B when B
and the value of player one plus one.
And the second we're done with idea of B2B and the value that we are required.
So let me just indent it properly.
And I think that this is what our structure by now.
Let me just open it as a lighter.
So this one is a very small project and I already know the structure for it.
But what I will recommend you while you're working with this achievements
is in our script that you should first open your project as a live so
and as you keep on working, you should see the changes yourself.
Right?
So this is the HD for our project
and in the next lecture we will be doing CSF spot.
So see you in the next one.