Java, this lesson is going to be a JavaScript refresher showing you and demonstrating how to create
elements as well as how to create interaction and click events on elements that are on the page and
the manipulations for the style contents of the elements and how we can use conditions and JavaScript
to create interactions for Web users.
So we've got a number of things that are happening here.
And if we click this, then this is going to add in another page element.
We also have a counter value for the page content, so that's updating as well.
And we're also adding in event listeners on each one of these newly created elements dynamically so
they all are either adding or removing the box class.
So it's toggling the class when it does get clicked.
And that's where you see the red background and the blue font.
The each one is updating its tax content.
The input field is going to be updating its data type, its type.
So going from number to text that gets toggled.
The Click Me button is going to be generated dynamically with JavaScript code.
So we're using the document create element method.
And this is also kind of an event listener where it's going to add the content that's contained within
the input field and create a new div out of it.
So that div has now just been added to the bottom of the Web page element's selection of some of the
elements on the page.
So what we learned in the last lesson where we can use the document object and in this case we want
to select both of the diffs.
So we're going to use query selector all for this and selecting each one of the matching selectors.
So that gives us both of the divs within the selection.
And for devs using for each will loop through and return back each item within the node list as a div.
And for now we can just cancel, log it out just to make sure that we've selected the elements properly
before we try to make a manipulation of the element so well, referencing that each element as div within
the JavaScript code.
So that means that we can make some updates to it and we can update some of the tax content that's contained
within that element by using the tax content property.
So setting that to if you want to say hello world, we can add that and that will output hello world.
We can also reference and return back to index value.
So concatenating the index value to Hello World so that will output those values.
And another method that we're going to use, another what we're going to use in the upcoming lessons
is going to be the tactics of the template literals.
So this allow us to way to write JavaScript string values without having to worry about the different
quotes.
And if we want to include a variable, we can include it this way.
And if we want to add some JavaScript code, we can include it that way as well.
So we're outputting and then within the curly brackets.
If I was to add one to this, then that would do the formula here.
We're taking the value of index plus one and then that's the end result that we're outputting on the
page.
We can also update the inner HTML.
So if we take the div and we set it's in our HTML and this can also take a string parameter.
So for instance, if we want it to have a world wrapped within an H2.
And for now, we want to do the inner HTML, so that Output's said, if we're doing text content, it's
simply output's that as text content.
I'm going to wrap the view so that we can see the full code.
So if I was to take the same value and instead use the inner HTML, it will format the code as HTML
for that element.
And I would put it on the page.
The result.
There's also if we have inputs, so I'm going to add an input here and set the type of text and set
the value of hello.
So if we want to select the input, let's do a selection and get the input value and using the document
query selector.
And because we've only got the one input that we're selecting, we can make that selection.
We can also be more specific.
So if we wanted to select it with a class and typically you might see that with a class as well.
So let's add in a class value here.
And I'll give it a class of phal, so if one sided with the class, we can do that as well.
And once we select the element as a variable value, then we can interact with it.
So if we want to get the contents that are contained within the value, we can select the in value and
get its property value.
And this is going to return back whatever the current value input value is.
So if I was to now write it, we get a value of Hello V three three thirty three.
So we can also just as we can select the value, we can update the input value.
So let's update the input value with whatever the value of index is.
So it ends up at being zero one, because it starts at zero and then it's won and we can also dynamically
select that value and use it within the JavaScript code so that we were concatenating to a string.
And because we're adding to a string, that's where we get the zero one and one one.
So we could convert this value actually to a number of value.
But by default, coming from the input field, this is going to be a string value, let's add ability
to interact with the elements with a click of the elements.
So adding an event listener.
So first we need to select the element and we'll select the each one.
And then once we have it selected, then we can use it within the JavaScript code.
So selecting the object and then let's add an event listener and then for the event listeners is a number
of different event listeners that you can add.
So the editor's giving me full selection of all the different event listeners.
And mainly we are going to be using the click event and each event can pass over the event object so
you can capture the event object by typing in E and the contents of the event object.
Right now we're just going to output it onto the console.
So now whenever I click the H1 tag, we're capturing the event object and the event object will give
you information on what triggered the event and a whole bunch of information where it's located on the
page for the element.
And also when we look at event target, this will specify which element on the page initiated it.
So if we do want to select the target, we can output the event target whenever it gets clicked and
that's going to reference whatever initiated the click.
If we want to add an event to multiple items on the page, we can do that as we're looping through them.
And just as we've got to develop here, we can select the div object and add an event listener and add
a click event to each one.
So as it loops through, it's going to add the click event and then we can output the target content
as well.
So let's see how that works.
So I click it at selecting the element that initiated the click and it's outputting it on the page.
If we select the output area, it also outputs those.
So depending on which part of the elements and which element is triggering the click event, we can
output the target information on the page itself.
So with the event listeners, we can do quite a bit where we can change the value of the output.
So, for instance, we can check to see if the current target or the tag if we only have the one element
that's represented so we can check to see if each tag text content is equal to JavaScript and have a
condition that if it is equal to JavaScript, then where updates and change the content to equal to
test.
And otherwise, we're going to change it and equal it to JavaScript, so that will give us that toggling
effect where we can when we click on it, it can toggle the values there.
You can also add classes and we do have a class of box.
So we're going to add in and we're going to toggle the class list on the event target.
So in this case, it's a div.
So either way, whether we use the E target or the div, it's going to be referencing the same element
object from the DOM.
So let's select the div and then using the method class list, we can either add, we can remove or
we can toggle a class.
So we're going to toggle the class of box.
So every time it gets clicked, it's going to either add or remove the class from the element and going
into the live view of the current content and see it being updated.
We're adding the classes and we're removing the classes.
In addition to the classes, there's a lot that we can do with the elements and the element of manipulation.
So one of the other things that we're going to be doing in the upcoming lessons is we're going to be
updating the style properties.
So let's once this element gets clicked, we're going to update the color of the tag so each tag and
set the style properties.
And this is another object that has a lot of different property values.
So under style, we can update the background color and if we want to do the background color to red
when it gets clicked.
And you can also have this toggling effect where we can have different values depending on if it gets
toggled and clicked.
We can also update the color value, so if we wanted to color and using either the hex or the named
values, so all of them are available for us, we can also update the attribute types.
So let's select the in value and we'll add an event listener to the in value.
And if it's we'll just keep click as well.
So whenever it gets clicked, we're going to take the input and will update the attribute type so we
can get that attribute, so a console log and using a method from the in value from the elements and
get attribute and the attribute that we want to get is type.
So that's going to right now it's going to put into the console.
So let's go back to the console, clear the console.
So whenever we click it, we can get the attribute type.
And we saw from before, if we can have a method to get it, we can also set it.
So let's do a condition.
Where if the attribute type is equal to taxed, which we saw on the console, it is they were going
to change it and or change the attribute type of in value using that attribute and set the type and
will set the type to No.
And otherwise, we'll set it back to text, so this is going to actually toggle the type of input.
So let's look that out on the bigger screen.
So as we're clicking it, it's updating the type.
And you can also see so the type is down here within the HTML.
And as we're clicking at, we're updating the type and then there's also the different properties for
the type.
So we've got the number, then we've got the indicators to go up or down.
And if we've just got the text, then we don't have the indicators.
So that's the text type.
You can also make it bigger if you want as well.
So if we want it to take the H tag and apply the style and let's do text and actually it's to font size.
So three and also four to apply to in value, then we just need to change the element that we're making
updates to.
So now we've got the input field with a different size.
And just as we saw, we can select elements.
We can also append and create elements dynamically with code.
So if we want to add in a button just next to the input or if we are to append it to the output, we
can do that as well, where we can select the element and add creating a brand new element for the page.
So let's add a button.
So this is the name and then using the document and create element method, specify that type of element
that we want to create and if I cancel log out button, see that we're creating a button, but we don't
have it on the page yet.
You can also add text content to the button and this will just say click me.
So the button is created, so button object is created, but it's not on the page yet, in order to
add it to the page, we need to specify where exactly we want to add it.
So adding it to the page.
And whatever element we want to append it to.
So if we want to spend it to buy each one tag or whatever, for whatever reason and add the button into
the each one, we can use the pend method.
And add the object to the H1, so that will append the content into the H1 and we are updating the inner
turmoil of each one when we click it.
So that's why it's disappearing there.
So right now, the button is there when the page loads, when I click it.
We're updating the H1 and that's why it's being removed.
So let's create another element on the page that we're not updating.
So this can be and I'll just create a span there, so make a selection of the span.
So this is just one span.
And because I am updating the devs interest of creating a brand new element, and now that we've got
the element object, let's append the button to the spane instead of the tag.
So there's our button appended to the spane.
And if you want to make the button clickable, just as we did before with the ADD event listener, we
can add that listener and then whenever it gets clicked, whatever we want to do with the click.
So in this case, maybe what we want to do is create a new element, a new div appended to the body
of the document.
So let's do that where we'll create a new div and using the document to create elements and the elements
type of tag that we're using is creating a div and then the new div.
So you can also use the document body and append to the document body.
And will depend on you, Dave.
And because this is an object, so we can update the content afterwards as well, and it will be reflected
into the div that was appended.
So let's take the content will in text content.
And this content is going to be whatever we have within the input value at this current time.
So it's just going to pen that to the page.
So now it's adding in a bunch of the diffs.
If we look at the page content.
We've got a bunch of diffs that now are appended to the page if we have a value for something like a
counter, so every time we click, it will increment counter, will reset the value.
Or actually, we can append the d'Hiv content.
And using the tactics, so wrap it with the curly brackets.
And let's output the value of counter within that element as well.
So now we're adding a bunch of diffs there and also notice that it's only these elements that were the
original device on the page that have the event listener, because we added that listener afterwards
within the for each.
So there's another way to do this, where we create a function.
My click, and it's going to pass in the event object, and then we can take this content and run this
function code instead of using the div, we need to use the target to toggle the box class.
And then within the click event, we can just add the click event.
And then as we create the new device, let's add the click event to these new device.
So that way, all of the devs on the page will have the same functionality.
So let's see if we can add the new device.
And now when we click the new device, we're able to toggle the class on those elements.
So there's the elements and we can click it and they're working the same way as the initial device did,
we were able to toggle the classes on those elements and there is a difference between append and append
child.
So with append, do a vowel one and consed vowel to and for most of the lessons, we are going to be
using the append child, but we can also append where we're using append not append child.
And the difference between the two is that the append is going to doesn't have a callback, whereas
the Pend child does have a callback.
So if we do Val, when it comes back undefined and Val to will reference that element that was appended.
So that's another way to create the reference to the element.
If you want to create another variable that references the element that was created, then you could
use the append child method.
So I know we've covered quite a bit, and this was meant as a refresher and a quick overview of the
JavaScript code that we're going to be needing in the upcoming lessons in order to manipulate the page
content with the JSON data and the JavaScript object contents.