So it's time to, again,
practice what you learned
and therefore attached,
You find this exercise-2 zip file,
which contains three files,
which you can simply add
in a subfolder to your project
as I did it here.
So simply add that extracted folder
to your project folder
for example,
by simply dragging and dropping it here
into visual studio code,
or by opening this project in the windows Explorer
or a Mac finder
and adding the extracted folder there.
And now in that folder,
as you can see,
I got an HTML,
a JavaScript,
and a CSS file.
The CSS file just has some basic styles
for a button
or a section.
And the index HTML file
just has a basic skeleton.
And then a bit of text,
a couple of paragraphs
and a couple of buttons in there.
Now you can simply open this
with the live server extension again.
And once you did that,
you will see this here on the page.
That's the content I prepared for you.
And out of the box,
these buttons don't do anything by the way,
they just sit there,
but they don't do anything.
Please note that these buttons are also not part of a form
because here we will not use them for submitting
or validating any user input.
But instead,
I want to use these buttons
to trigger some non form related actions.
Now, which actions should be triggered
is actually described in this text,
but also in the exercise.js file.
In there, you won't see any JavaScript code yet.
Instead you only find a written instructions.
And here's what I want you to do
in the next minutes.
And in the lecture thereafter,
we are, of course,
going to solve this together.
So that you also see my solution
and you can compare yours to mine.
Now, what I want you to do,
is I want you to select the two button elements,
which you find in this index HTML file.
So these two buttons,
you should select them
and store them in two different variables.
And I'm calling it variables here.
But of course you can also consider using constants here
if the values never change.
Now, you should actually select the first button
without adding or using any ID to it.
So you will need to find a different way
of selecting the button.
And you should select the second button
by using an ID.
So by adding some ID to this button,
it doesn't have one yet,
you will have to add one.
And then you should select that button
with help of that ID.
And then store it in a variable.
That's task number one.
Now in task, number two,
you should use these buttons
to add click event listeners
to the buttons.
And those two click event listeners,
which you add should trigger two different functions.
So you'll need two functions,
two different functions that should be triggered.
And, for the moment,
both functions should output console.dir,
the clicked button elements,
but the first function for the first button,
to which you added a listener,
should actually output that button
with help of the variable,
which you created in one in task one.
The second button
and the event listener
attached to that button
should actually output that button
without using that variable.
So you'll have to find a different way
of getting access to the clicked button.
In task number three,
I then want you
to also select and store
the paragraphs mentioned in the text.
So if you read the text,
you see that that will be this paragraph.
And the first paragraph,
I also repeated here,
you should select these two paragraphs
and store them in variables as well.
But here I want you to select both paragraphs
by drilling into the document.
So not with query selector or anything like that,
but with help of drilling.
And you should then simply find a way
of selecting these two different paragraphs
and storing them in variables.
And if you struggle with that,
then you can fall back to using these utility methods,
but definitely try to select them with drilling.
Once you completed task three,
in task four,
I want you to change the functions
that you created that in task two,
which currently only outputs to click buttons,
such that the first button,
so this button here,
actually removes this paragraph
when it's clicked.
So you should find a way of doing that.
And the second button,
so this here, of course,
should actually change this first paragraph,
such that it adds a blue background color to it.
That's what these buttons should do,
once task four is completed.
Now in task number five,
I want you to repeat four
or this second part of four,
to be precise,
but instead of changing the inline styles
of that paragraph,
you should now try to add a blue background
by adding a CSS class to that paragraph
once the button is clicked.
Now here's an important note.
You'll have to add the CSS class two,
because installed CSS,
there currently is no predefined clause
that would do that.
And that's it.
These are my tasks for you.
Definitely try them on your own, first.
In the next lecture,
we'll do them together.