DOM Exercise

[00:00:00]
>> So this is our task. So right now, the first few TODO's in this document are things you already know how to do, using some of the magic spells that we have learned so far in the course. So the first three TODO's, TODO's one, two and three, are asking you to do things that we already have the skills for.

[00:00:19]
We're gonna declare some variables and point those at certain elements in the HTML document. We're going to create an object, so I think it's fact singular, sorry, to represent one fact that you've learned about JavaScript, similar to 1 plus 1 equals 2, triple equals 2, I should say.

[00:00:40]
And then we're going to manipulate the page to display our fact. So let's go to our code. So we have these TODO 1, 2, and 3. This is what we're going to fill in. And in order to do that, we're gonna need to draw on all the skills that we've been using, and we're gonna need to look up at this HTML and see what we're working with here.

[00:01:01]
So we have some divs, they have some IDs on them, they represent different parts of the page. So for example, we want to declare some kind of fact, and it's gonna be up to you. You're gonna choose something that you learned about JavaScript that has a true or false answer.

[00:01:19]
And we're gonna put it in this part of the page, okay? So let us take a moment. We're gonna work through those TODOs 1, 2 and 3, to stop after TODO 3. And then we'll review together. There are a few different ways that we can accomplish these goals as usual.

[00:01:40]
There's lots of different options for doing the same thing in JavaScript. But let's walk through and look at some possible solutions here. So first of all, in TODO 1 we're gonna declare and assign a bunch of variables. Now, these variables correspond to elements on the page that we might maybe manipulate or do some certain things to, but if we look at what these elements represent from the one that we just saw, none of them are gonna totally change.

[00:02:16]
So what should I be using to declare these variables? Let or Const?
>> Const.
>> Const, cuz I don't really already have a good reason not to. So, let's start with statement. Who would like to walk me through their solution for assigning the variable statement? Yeah, Chat.
>> Let statement equal document.getElementById(statement).

[00:02:42]
>> Beautiful, so we have a div up here with ID statement, and that is the one that corresponds to this rounded box where the true or false fact is gonna go. And we are selecting that from our document using the method getElementById, and passing in the name of the ID Statement.

[00:03:07]
Lovely, thank you, Chat. Okay, and we could have used let, but in this case, let just default to const until we have a good reason not to. Okay, how about option buttons? Now, this is going to be plural. So I kind of want multiple things to be captured here.

[00:03:27]
Who can walk me through? Yeah, Chat, again.
>> document.querSelectorAll("button").
>> Okay, so this is one thing we could do is we could get all of the button elements on the page. Now, in this case, in our HTML, we only have two button elements and they are both inside of this options div.

[00:03:52]
But I have a question for you, what if there were another button out here, Would this be part of my option buttons as written here?
>> Yeah.
>> Query selector all is going to select all of the elements that match a certain selector. In this case, that selector is just looking for a button tag.

[00:04:21]
So in this case, it's equivalent. So in this case, it totally works. But be careful because in this TODO, I wrote that I want all of the elements within the options div, and in this case, that is the same. But in another example, it might give you something different.

[00:04:39]
So totally valid solution. Did anyone have a different solution to this one option buttons? Yeah?
>> So the same thing but document query selector pound options.
>> Okay, so here we're going to, let's say use our query selector, selector. So another nice thing about IDE is that they offer auto completion sometimes, same as the browser console div.

[00:05:05]
querySelector, and then you said?
>> Pound options.
>> Pound options, to select for the ID options, okay? So if I were to write this, just write as this, what would I get back from querySelector? Let me ask maybe, how many elements would I get back?
>> Just the one.

[00:05:35]
>> So I'm hearing a couple, maybe three, maybe one. So in this case, if I were to do it just like this, let's go find out. Let's open our, this is our page so far. Let's try document querySelector options, this gives me the div options. Now that might be useful, hat might be something I'd wanna call options, let's say.

[00:05:59]
But in this case, I want all of the elements within that div. So how can I get those?
>> .children?
>> .children for example, so let's try that now. Now if I were to try this, Now I have a collection of two buttons, okay? And the one that we had before was querySelectorAll button.

[00:06:26]
That also, it's a slightly different type of objects and node list but it still gives me those buttons. And there's a couple of other things we could do. We could do like a querySelector for let's say, buttons within the options div, for example. So there's a lot of different options here, [LAUGH] lot of options for getting our options.

[00:06:47]
But this works just great. Okay, how about this last one, the explanation? Sort of similar to what we did before. We could do, this time we wanna get the explanation div here which right now has nothing in it, but in our finished product is going to have the kind of the text explaining why the answer is what it is.

[00:07:19]
So we're gonna need to grab that, and it handily has a little ID on it. So we could use either of these methods basically that we've done so far. We could use getElementById, and then the name of the ID. Or we could use querySelector and then a hash selector, yeah?

[00:07:41]
So let's just try let's, for consistency sake, we'll do the same way we did this the statement, and its ID is explanation, cool? Okay, how we feel about TODO 1, review? Complete? Excellent, now, make sure as you're working in your file that you remember to save frequently [LAUGH].

[00:08:07]
Cuz you never know when your computer is gonna crash and you lose a whole bunch of work that you've been working on for hours. Not that I speak out of experience. So let us save it so far. And I also wanna ask, okay, so what I was showing you before was this was actually the page from my site.

[00:08:27]
And so if I refresh this page, and I asked for, let's say statement, Did I already say that? Okay, it's remembering what I did before. What I'm showing you here right now is my version of this project. What you all wanna be doing is opening your own version of the project that you're editing currently in your local file.

[00:08:59]
So you can do that by going to your browser and it has an option to not just load a webpage from a URL on the internet, but to load a file locally from your computer. So you can open your quiz.HTML file in there, yeah? And that's how we're going to iterate on kind of seeing what progress we've made so far.

[00:09:23]
So if I inspect this now, I should hopefully find, let me, Move this over, there we go. I should hopefully find that now inside of my script tag, I have not only the TODOs, but the stuff that I wrote, right? Like const statement equals document.getElementById. So this shows that I am actually loading the local file that I just edited in my editor, okay?

[00:09:52]
So this is what we're gonna do is we're gonna work kind of iteratively, which is a word that's gonna come up a lot today. We're going to make some edits to our file. We're going to refresh our local file in the browser, and see the updated changes that we made.