So, let's dive into these tasks.
And the very first thing, which I did not mention,
but which you have to do, of course,
is that I will include this exercise.js file
into index.html,
otherwise the code won't execute.
And I deliberately did not mention this.
You may be stumbled across this,
but it is something you always have to keep in mind
as a developer.
You should make sure
that if you will use some external file,
no matter if it's CSS or JavaScript,
you have to import it.
You have to link to it from inside your HTML file.
And for JavaScript, we do that
by adding the script opening and closing tags here,
as you learned.
And then on the opening tag, we add the source attribute
and we point at this JavaScript file that should be added,
that should be executed.
And very important here, we have to add defer
to make sure that this script only executes
once the entire content here was parsed.
Without defer, it would execute
right when the browser parses this line.
And that's of course,
before the content down here was parsed
and therefore when we would try to reach out to a button
to add an event listener,
that button wouldn't be parsed yet,
and hence this code would fail.
So defer is important here.
And once that is done, we can finally dive into these tasks.
And of course, I'll start with task number one.
Now here I should select and store these two buttons
and we should select them with different approaches.
So I will start by creating a variable here.
And actually I will create a constant here
because I will never reassign these button variables.
I will never overwrite the values stored in these variables
with different values, with different HTML elements.
That won't happen,
and therefore I can directly mark my buttons here
as constants which will never change
and which should never change.
And keep in mind,
with that I'm always talking about the variable
and the button element as a whole.
It's absolutely fine
if we then change the content of the button,
if we change a property of it, or anything like that.
So here we now need names,
and I'll name the first button "firstButton,"
or "firstButtonElement".
Name is up to you.
It should just describe what's stored in this variable.
And then I will select it
with help of the document variable,
this document object, which it is.
Which gives us a variety of ways
of getting access to the DOM.
And here I should not use the ID.
Hence we need to get access to the button differently.
And one way of getting access here
would be to use the querySelector().
And we could, for example, select by tag,
and select button like this.
Now keep in mind,
querySelector() will return the first matching element.
So it will look for the first button it finds on the page,
in this case, with this querySelector() value.
And that is of course, this first button here.
And since that is what I'm looking for,
this is a perfectly fine approach
of getting access to this button.
Now we also have a second button, the "secondButtonElement",
whoops, without a space.
And here we can and we showed you as an ID,
and therefore now I'll, first of all,
add an ID to this button here.
And I'll name this button "change-bg-btn",
for change background button.
Of course, the ID is totally up to you.
Now we can use this ID to select this button though.
And there are two main ways of doing that,
we can use the querySelector() again,
and then select by ID like this,
by adding a hash symbol here.
Because keep in mind,
querySelector() wants a CSS selector as a value.
And that is how you would select an element by ID in CSS.
But if the idea is what you're looking for,
it's even easier if you use "getElementById" instead,
and you just pass the ID name as a parameter value.
Now without the # symbol.
And that will give us access to this button as well.
And now both buttons are stored in variables,
or constants to be precise.
And hence task number one is solved.
In task number two, we should now addEventListeners.
And for this, of course,
we can reach out to our firstButtonElement variable,
and call the addEventListener() method on it.
That's how we do add an event listener to any element,
including buttons, of course.
And now you learned that addEventListener()
wants two parameter values.
The first value is the event you want to listen to.
The second value is a pointer at the function
that should be executed once that event occurs.
Now the event we should listen to here, is a click event.
And hence as a string, we pass in 'click.'
The second parameter value, separated by a comma,
is the function that should be executed.
And for that I'll add a new function here
and that's the "firstButtonClicked" function,
or better describing what it does,
it could be the "removeParagraph()" function.
Now removeParagraph()
because that's what this first button will eventually do.
Now, before I add the actual function code,
I'll add another function first,
and that will be the function
that will be added to the second button.
And that should eventually change the background color,
so I will name the function "changeBackgroundColor."
And now let's connect this removeParagraph() function
to this event listener.
And for this, as I mentioned,
we just point at this function.
Very, very important here.
Don't add parentheses,
otherwise this would be executed immediately
when this line of code here is parsed,
and that's not what we want.
Instead, we just wanna tell the browser
which functions should eventually be executed,
once that event occurs.
And therefore we just give the event listener
the name of the function,
so that it can be executed on our behalf in the future.
And we should, of course, also add an event listener
to the secondButtonElement with addEventListener(),
and then here the 'click' event.
And then we point at the changeBackgroundColor function
like this.
Now these functions should do something.
They should "console.dir()" the clicked buttons,
but in different ways.
The first function for the first button
should "console.dir()" the button
by using this button variable here, this constant.
The second function attached to the second button
on the other hand, should not use the respective variable.
Now let's start with the first function.
We can "console.dir(firstButtonElement) like this.
And that's then this task solved.
For the second function we also want to console.dir()
but now we're not allowed to use the variable.
And hence we need to get access to the button
in a different way.
But how?
Well, you learned that there is this event object,
which you get automatically as a first parameter value
to those functions which you do connect
with addEventListener().
And this event object, as you learned, describes the event.
And it especially,
also gives you access to the element that cost the event,
with help of "event.target."
And since we added the event listener to a button,
the element that cost the event, of course, is the button.
So outputting "event.target" here will output the button.
And that's then the second task solved.
Now let's see whether it works by saving all the files,
and then, back on the page, we can open the developer tools.
And if I click the first button, I output this button.
If I click the second button, I output this button,
which also has the ID, which is my second button.
So that is both working here and we did successfully solve
these first two tasks.
Now in task number three,
we now also want to select the paragraphs
because we need them in our button function stair.
And since we'll need access to them in our button functions,
I will actually not add my code here,
or at least not like this.
But instead, I'll copy this code from up here
and copy that, and comment it out with that shortcut.
This toggle line comment shortcut here.
And then re-add it here,
below task three, or actually below task four,
because that's where we then will need to adjust
that code in these functions to use the paragraphs we select
and store in task three.
So now in task three,
I wanna select and store the paragraphs,
and we should also select them in different ways
as described here.
So I'll have my firstParagraphElement here,
and we should select this one as well as the second one,
by drilling into the DOM.
And to select this first paragraph here,
what we, of course, could do is,
we could dive into document body
to dive into the body element of our document.
So now we would be on this level here.
And then this first paragraph in this section here
can be accessed by also diving into this section,
and then taking the second child element off that section.
And the section itself, on the other hand
is the third child element of body.
So what we could do here
is we could access document.body.children[2].
This gives us access to the third child of body,
which as I just explained, is this section.
And then we need the access to the second child of section
by accessing children[1] on section.
Since if the index starts at zero,
children[1] will be the second child of this child,
which is the section,
and the second child of that is the paragraph.
And then we can quickly validate this,
by console.dirring the first paragraph.
Or actually just console.logging it,
so that we get this convenience output in the DevTools,
where I can hover over it to have it marked on the left.
And that's looking good.
Now we should also select this third paragraph.
And for this, we can, of course,
copy this and create the second, or actually in this case,
the thirdParagraphElement, I guess.
And access the section of the body, as before.
But then this third paragraph
is actually the fourth child here.
And now that fourth child, of course,
has an index of three, since the index starts at zero,
and then we can output this third paragraph element
with console log.
And if we do that and save,
then this is also looking good.
Now that's one way of selecting it.
There would also be other ways of selecting this.
For example, just to get creative,
I'll comment this out and copy it.
We could also build up on the firstParagraphElement
and then access the nextElementSibling,
which you learned is next HTML element sibling.
So that would be the second paragraph,
and then access the next element sibling of that,
which would be that third paragraph.
So that's also something we could do.
And I'm just doing this so that you get comfortable
with exploring this nested DOM structure.
Of course, in reality,
you would always go for these utility methods
for selecting elements.
But it is super important to understand
the structure of these DOM objects,
and how they are related with each other.
And therefore, this is a good practice here.
Now, if I save this approach,
this is still the correct paragraph
that's being selected here.
And now that these paragraphs were selected and stored,
we can move on to task number four,
where I already re-added those event listeners
and those functions,
to implement the functionality described here.
And for that we, first of all,
wanna ensure that this removeParagraph function here,
removes that third paragraph.
And then for that, instead of console.dirring it,
I'll use my thirdParagraphElement.
And then you learned that we can easily remove it
by calling remove on it.
And that's all, that's all we got to do.
This will remove this element from the DOM
and therefore from the page.
If we save this and go back,
if I click remove paragraph,
you'll see that paragraph was removed.
If I hover over it again,
it's not marked on the left because it's gone.
The other paragraph is, of course, still there.
So that's this first part of task number four.
The second part is that,
we should change the background color
of the first paragraph to blue.
And for this, we can reach out
to the firstParagraphElement,
and then you learned that one way of changing the styling
is to use the style property on an element.
And this style property then gives us a broad variety
of styles that we can change.
For example, we can change the background color
by accessing background color like this,
and I'm not getting all the completion here, by the way,
still, this is correct code,
style and then background color,
and we can change this to blue.
So using this blue shortcut identifier
or of course you mix your own blue color,
you use a hex code, whatever you want,
all just go with that shortcut here.
And with that, if you save this,
if you click that second button,
indeed this background color changes to blue.
And if we inspect this paragraph,
we can see that this inline style,
so this style attribute with the CSS code was added.
And this is this task, number four solved.
In task number five, you should again make that blue,
but now not with blue set as a style
as a background color style,
but instead by adding a CSS class.
And for this we first of all, have to add a class.
So install CSS, we can add a new class,
"blue-bg" could be the name,
and give just a background color CSS property.
Now written like this, all lowercase with a dash,
since this is no longer JavaScript,
but CSS code in a CSS file.
And then here again we can choose blue
or maybe actually, I'll just choose
a slightly different blue tone, whatever you want.
And now the goal is to add this "blue-bg" class here,
to this paragraph whenever this button is clicked.
For that I'll comment out the previous approach
of setting the style property.
And instead here on firstParagraphElement,
we can either set className to this class
which we added to "blue-bg",
so to that class I defined here.
And if I save that, and I then click this button here,
you see that background color gets added.
Or alternatively,
to not overwrite the entire list of classes
that might've been added before,
we can also use this classList object
and call the add() method,
to add our "blue-bg" class like that.
And now again, if I save that,
clicking that button adds that blue background color.
And this is now also, the fifth task solved.
Now I hope this all makes sense.
I hope this is all clear now.
If it's not, definitely revisit the lectures in this section
where I do explain those concepts.
But if it is clear,
then we're ready to move on
and dive into control structures.