My
my my ...
this is going to be a fun example! Because in this example I'm yet giving you another skill set in your
"dev hat" ðŸŽ“
if you want to call it that.
I know this course is all about forms, and we're learning about form controls.
One of these form controls is the progress element.
But you don't only have to use the progress bar with forms so you can take the skills you're learning
and apply it to many different situations.
Here I've got a video.
Okay.
As you can see on the browser, minions singing the banana song, but can you see below it? There's a
progress bar.
So what I want you to try and do, is I want us to create a video element in HTML and I want us to display
to the user via a progress bar the completion of that video.
So can you think how to do that?
Remember the two important attributes on a progress element are max and value.
So the max attribute here should be 100 because that's 100% of the video complete.
So therefore the range will start from zero and work all its way up to 100.
That makes sense.
The value attribute should be the percentage completion of this video.
So you're going to need a way to dynamically update that value of the progress bar.
And when you hear the word dynamic, ding, ding, ding ðŸ””JavaScript.
That's right.
So that's the first thing I want you to do.
Then you'll know, or remember from the previous lectures, that the progress bar doesn't display anything
to a user by default.
So I want us to display a value to the user.
How do we do that?
That's right.
We use an output element. So I want the value also displayed to the user in an output element.
Bit of a hint: in order to put a video on a web page like this, I'm going to be using the video element
in HTML.
I then include the controls attribute on the video so we can actually push play, pause, etc
etc.
So that's just setting up the HTML.
I then include a progress bar obviously, and an output element and that's it.
HTML is very simple.
Then when we get to JavaScript, there's an event I want to listen to on this video and that event is
called timeupdate.
The timeupdate event is fired literally all the time on a video as it's playing.
So we're listening for that event, and then we are displaying that in the output element.
And we are also affecting the value attribute of the progress element.
Oh, I know it can sound very difficult, but let me show you what I mean.
When I push play, look what happens.
Let me actually mute this.
Let me push play.
(sneeze). Whew! Excuse me.
There we go.
(sneeze again). Excuse me again.
So there we go.
We've got our output, and we've got the progress bar displaying in real time.
Obviously, if we get to the end, the progress bar is pretty much all done and we reach 100% of the
completion task and the video stops.
So that's what I want you to try and create, give it a go, have fun and I'll see you in the solution
video.