I know the last lesson was rather long, and this lesson, I promise you, is going to be a little bit
shorter and we are going to be using what we did in the previous lesson where we're actually calculating
out the minutes, hours, seconds that are between the current value that were of our date as well as
the value that's selected within the input.
So now it's just a matter of outputting that within our HTML.
And I know we can do it really easily where we can select our element that has our output.
So we could use clock and we could really easily just output that information into the clock so we could
do clock.
So selecting that object, updating the entire HTML and we could overwrite everything with what's being
returned here.
And this one, let's set up a variable.
So we'll call it T.L. for a time left.
And we can log out that time left value the total value, and this is going to be returned back within
an object format, and that means that we can use it in our JavaScript.
So that's that title being output there.
So if I want to get these, I can do T.L. days and again show you how that works so we get twenty five
days and so on.
So I could really easily type that out.
I could do D space.
And we could pretty much wrap up this lesson so we could do days, hours, minutes and so on, but let's
do something a little bit more difficult and a little bit harder where we're not just going to update
that inner HTML, we're actually going to select the content of those elements.
So as we have an output here, we did create a bunch of span's.
And these spans have classes that correspond with those values that were being returned back from those
objects.
So what we can do is we can match those objects and then update that inner HTML that corresponds with
it.
And I'll show you how to do that.
First of all, let's set up a loop for the objects and setting up a variable so this will be whatever
the property is and this will be whatever the object is.
So properties in object and we're going to loop through them all.
So within the console output, that property value.
Where we have our T.L. object.
And this is going to be the property that's being output within that object, and when we try it out
in our source code, we see that we get all of this information being output so we can also specify
the property itself on its own and click it once again.
So we've got days, hours, minutes, seconds.
And these actually correspond with the classes that we have within our Jowett, within our HTML, so
we can use so set up a temporary element and using document query selector, we're going to select the
element with the class.
So make sure that we do the prefix it with the dot and the name the string value of that particular
object.
So see if we can find a match and we'll output those into the console as well so we can see those in
the console.
So try that out, select something and we can see that we do get these corresponding classes, the corresponding
objects, and if we do get a null, then we can skip that one as well.
So we can see that if it exists.
So if the element exists, then only will output it into the console.
So updating that and that should skip that total value because we don't have a class of total.
And if we go up here, so total got skipped and now we're only outputting it in those elements.
So now we can take that element and we can update the inner HTML with whatever value is associated with
that property.
And let's try that out one more time.
So now we've get 18 days, 23 hours, five minutes, 58 seconds, and this is all dynamic.
So it always updates and it selects those elements properly using the classes.
So go ahead and try this out for yourself.
And I know this was a little bit of a roundabout way to do that.
And it's always great to try different things with JavaScript and this introduce some more advanced
functionality, how you can make selection of those elements within JavaScript.
And you can also update this to clock as well in order to select only within the clock object.
So that will work the same way and that will produce the same result as we saw with the document object,
because remember, once again, the clock is an object and we've built that here using document query,
selector clock, and that's selecting all of that particular block of code.
So if perhaps you might have these classes being used outside of this block of code, then you can really
fine tune your selection process this way.