State Modeling Exercise

[00:00:00]
>> We're going to be jumping into the first exercise. And so, if you go to localhost, port 3000, /00-modeling, you could also access this by clicking the link over here. You're going to see a media player, and this doesn't exactly need to be hooked up just yet. It just serves as a visual guide for now.

[00:00:29]
What we're gonna be mainly doing is working in the console itself. And so, for this exercise, what I want you to do is, you're gonna see a main.js file. We're going to be creating a simple state machine that represents the loading, play, and pause functionality of our media player.

[00:00:51]
And so, let's first create the state machine visually over here. So instead of loading, or sorry, instead of idle, our initial state is going to be loading. And this represents loading the song, we're going to have a loaded event. And so, according to the specification, when the song is loaded, we're gonna start playing it.

[00:01:14]
So the state machine goes to the playing state. Now, we could go back and forth between the playing and paused states using events. So we could go from playing to paused when we pause it. And we could go from paused to playing, When the play event happens. So basically, I want you to represent this state machine in code without using any libraries.

[00:01:47]
And yeah, so you could use either a switch statement or an object. And just like we did by attaching the transition function to the window, play around with it, look in the console. Make sure that all of the transitions are actually working. And then if you want to, find a way to localize that state, so you have this object that you could just send events to.

[00:02:13]
If you don't get that far, then that's okay, we're gonna be doing it together, cuz that's gonna be an important concepts later on.