Typing project: Applying the build to learn process

- [Instructor] Hi, welcome back to lesson number three, in chapter five, Advanced Application Development. We are going to find an application that we can build from scratch because it's a tutorial or that is pre-built, something like an open source app where you have access to the code. And the three steps are, develop it. So first, build and verify that that application works. So you do actually have a working app. Second, dissect it, inspect the code, try to intuitively understand what that app is doing and then inspect the code and see if you can map what you see in the application to what you see in the code base. Third, derive from it. Figure out what are the things in there that you don't know about and look around for hints or try things out interactively to see if you can understand what that code is doing. In this particular lesson, we're going to apply this practice to the typing game. So let's get started. Step one, develop it. You have two options. This game comes from the web development for beginners course. If you go look at that course, you will find they actually have the solutions for all three games, Terrarium, the typing game that we're looking at right here, and a space game. All three games are available with their source in the solutions folder in this repo as well. You can also have the option to build it from scratch. In this particular lesson, I already built it from scratch using the instructions and my built from scratch version is available under the app dev folder in source. And this is the source that I'm actually going to be using today as we walk through the process of building to learn. So we've created this folder, source typing game. I've added the provided HTML, they actually gave me this HTML file. All I had to do is create an index.html and copy that code over. And then I do something different. I actually start running a preview server right here. So in my case, I've set this up in here to be on the 5,003 port. And so when I run it, it'll actually launch that for me and give me the game right here in the browser. And I can see that I have a very simple UI. We'll talk about that in just a minute 'cause it's actually the complete app. When you're building it though, all you would've added is the index.html. When you run the preview server, what it lets you do is interactively see with every new piece of code you add how the experience changes. So the next step in the tutorial would've been to add in the CSS. As you can see, I have that right here. Again, they give you this code. All you have to do is copy and paste it over into the single file. And as you can see, it's really, really simple. Last but not least, the JavaScript, so same deal. Create a script.js, they give you the code and you're just going to copy that over and put it into that particular file. Now you've got your index.html, script.js, and style.css files. You are ready to look at the entire experience. Your preview server was always running. So all you're going to do is go in there, reload it to make sure that's picking up your latest files, and then try it out. So in step one, you've built the app and you're going to try it out. It says, "This is a typing game. Practice your typing skills with a quote from Sherlock Holmes. Click start to begin." So let's follow the advice and click start. It gives me a quote and it says, "Practice it." So I'm going to just try typing it, "What one man can," and you'll notice that when I make a mistake, the text box actually goes red. We'll talk about that in just a second. "Another can discover." So note that when I finish this, I get this message called, congratulations, I finished. Now just keep this in mind. You know what this experience looks like and we go to the second step. We are dissect it. What did you learn from this just by running and playing the game? Based on just the knowledge you have so far, let's think this through. I know this must have HTML, CSS, and JavaScript 'cause I actually put the code in. But can I intuitively, without even having looked through the code, understand what's happening? With your basic HTML knowledge, you know there is a title. There's a title in the tab, there is a heading, there is a couple of lines of text. There is a congratulations message that only showed up when I completed the whole test. There is a button I can click and there's a box where I can add my inputs. Note that there is a highlight on the discover, which was the word that I was typing. So not only can I see the structure of my page and immediately get a sense of what the elements would've been, I can probably guess there's an H1, a button, a couple of divs and probably IDs and classes that are kind of helping me with the styling. But I also now know that there must be styling 'cause I've got a highlight here, right? And finally, do I know that there's JavaScript? I kind of do, even if I hadn't seen the file, because this is interactive, I can enter things, I can click a start button. So now that I know what the experience is, I can now go into the code and see if I can understand how to map the code to the experience. Let's start with index.html and see if we can understand it off the bat. You've covered the basics of the HTML head and body text. You know what those are. The title is Typing Game. You can see on the tab that this is being rendered correctly. The link says, "Hey, this particular HTML is associated with a style sheet called style.css. Here it is, that makes sense. Then we've come to the body of the page, we can tell, and I was right. There is an first level heading typing game. There it is with the exclamation mark. Then we see that there is a paragraph which gives them the instruction of how to play this game. And we can see that here. We then see, and this is interesting, we see that there is a quote and a message field that says, "This will display." Now, to see this in action, let's actually reload this game. This is the initial state of it that would've happened before I started playing. And now you'll see this maps almost exactly to this. In other words, this quote and message fields are in the structure but have not yet been populated because we haven't played the game. But now you know that there's JavaScript that's being used to populate it because that was interactive. And we can see that there are ID attributes. We're going to talk about that in just a minute. We just intuitively, we can tell that these are paragraph tags and the ID gives us a sense that this paragraph is going to contain some quote and this paragraph is going to contain some message. Then we see that there is a block which has two elements and input, which is the text input that you see right here. And a start button, very clearly, this is a semantic tag, it's a button, and the button has a start label. Yes it is and finally, we know that this HTML is associated with this JavaScript file right here that's named. So there's nothing new in the HTML that we couldn't understand. Looking at this, we've got a really good idea of how this page is structured and we're able to map to it quite well. But our next thing is to look at the CSS. We want to understand, "Hey, what exactly are we seeing and how is that being implemented?" So let me see if I can make, first of all, oh, I have to start, okay there it is. So I'll make a mistake and I'll see the highlight. So we see that there are two things, right? There's a highlight in yellow on the is, and then we see a red background on the text field when I make an error. And sure enough, when we look at the CSS, we see that it is actually defining a style that will be applied to class attributes of the type highlight. And there is a separate style rule for class attributes of the type error. And highlight says, "Whenever I apply this class highlight, the background color should turn yellow. And whenever I apply the class error, it should turn red." But let's go take a look at something interesting. Do you see those classes anywhere in this HTML? You don't, right? So how is it applying those styles? We've looked at the HTML and we've looked at the CSS. So the answer must lie in JavaScript. Now we look into the JavaScript file. Now, before I go there, let me just say there's nothing in the styles themselves that you don't know. You can pretty much say you know what background color is, you know what border is, right? So all we've got left is to figure out how is it building this game? So let's open up script.js. The first thing you're going to see is there's a const quotes. And that's kind of an array of quotes. You're familiar with let and const from the JavaScript lesson and all this is doing is defining or declaring a collection of quotes. All of them from Sherlock Holmes, which are the basis for the game. Now you see there is a list of words and the index of the players currently typing. This is where we've moved on to the dissect part of the process. And as I mentioned, if you don't know what something is doing, look at the naming convention of the variables or functions in JavaScript. Look for the comments, between them, you will be able to gather an intuition for what it's doing. For instance, now there's a start time. We know that that's going to be used somewhere probably to give you the total time you took to kind of complete this game. And then you see there are page elements. This may have been covered in HTML or JavaScript. But basically what this is doing, and this is interesting, is it's grabbing in the JavaScript code, a handle to the elements by ID. So now we can go back to the index.html and say, "Aha, I know why this ID was declared here 'cause now I in JavaScript have access to this element and to this element." And let's look at what the third was. We looked for quote, message, and typed value. Let's see where the type value is, here it is. So effectively the JavaScript code has access to this invisible paragraph tag that currently didn't have anything at the start, but now has the quote that we're using. And it has access to this text box and it has access to one more paragraph tag, which is where we put the result when I finish the game. What does it do next? Next it's getting the element by ID start and we can see in HTML that that ID corresponds to the button. It says, "When I grab that, I'm going to register an event listener and I'm going to listen for the click events." You probably covered the concept of events and event listeners in the HTML and JavaScript lessons earlier, but even if you didn't, this is so intuitive, you can see that what JavaScript's doing is saying, "Hey, let me go into the DOM, grab the element that's associated with this ID start, which is the button, and add an event listener so that if the user clicks anywhere on that element, this code will be notified and then," this is what we call a fat function, "I am going to have a handler registered with it, and that handler is going to go and pick a quote from this list of quotes that I see here, and then it's going to split those so that I can know what the different words are. And then it's going to reset the index for where me as the player is at, which is at zero. And now we're ready to go." It basically then updates the UI with the words, it adds the quote itself to the element. And right now what it's doing is in the UI updates, it's creating a set of, this is actually kind of interesting. So it creates an array of span elements so we can set a class. So over here the words that we have, it uses the map capability. And for every word, you can see, it's dynamically inserting a span with that word in it. So one of the ways, if you want to understand how that kind of maps onto the game is to inspect it. So let's kind of go through in here, and now you can see that when I look at this and then I look at the quote, do you see all the spans right here? So what that code was really doing was splitting this up and adding these span texts on the fly through JavaScript. Now in addition to this, let's keep going. It clears all the prior messages so your message element is empty, sets the type value element to an empty space, and now it starts the timer. By the time you've registered this listener, this listener is basically listening for clicks. It's reset the page so everything is clear to go. And now once you've clicked that listener or you start adding inputs, and when you click the listener, it starts the timer. And now you'll see there's another element for the type value on which you're listening for input events. Every letter that the user types, this thing will fire. And the job of this piece of code is to look at what the user's typing and do one of two things. Fun, it checks to see if this thing that the character or letters that they've entered successfully completes the entire quote, in which case it's going to have that message ready to go. Or if it finds an error or if it finds that the word has not yet been completed, it just continues to add it into the code. So it's tracking how far you've gone. If it is an error state, notice that this is where it sets the class name for error. So at this point, that element gets associated with an error class dynamically, and we can test that out because I can basically do a start. Let's reload this game. So when I do a start, I'll see in here that I actually don't have any errors at all. And let's see if we can go through this and expand everything to see all the different pieces of it. So here's the input type, right? And I haven't made any errors, but if I were to make an error, do you see how this class just showed up dynamically? So just by virtue of walking through the code and correlating it with what you're seeing online, you can start scaling yourself up on what these kinds of open source projects do without necessarily having understood some of the concepts or known how that app was structured ahead of time. Now, this was a super long lesson, I know, but hopefully it set the stage for you to understand how you can then take on any open source project on your own and then walk through this process of developing, dissecting, and deriving from it so that you can convert yourself from learning to build something to building things to learn. Next, we are going to try a more complex game, The Space Game, there's a lot to cover in that. So stay tuned and I'll see you in just a bit.