Ted Holmberg: I should not be recording this to see it on screen excellent so in today's video lab I want to move on to. Ted Holmberg: Our high low gas game, so in this lab really the learning objectives are going to be to learn about the document object model and event handling. Ted Holmberg: So let's take a quick look at our table of contents here so we're going to break it down this lab into three different parts. Ted Holmberg: And before we get to any of these parts we're going to first go i
nto the introduction of the lab where we'll discuss what the learning concepts are. Ted Holmberg: And the concept of what a single page APP is now this won't be. Ted Holmberg: necessarily super unfamiliar to you because, in the previous lab we built a effectively a single page APP However we rejoin everything into the canvas whereas with this APP we're actually also going to render. Ted Holmberg: html elements so here you'll get a chance to see how we can partner javascript and html. Ted Holmber
g: together. Ted Holmberg: To make an interactive. experience. Ted Holmberg: In terms of updating our html or our Dom, and so the first part, would be to build a basic high load game. Ted Holmberg: And we'll talk more about what that is, but it also the first one will be effectively just turn based in tech space, and the second one. Ted Holmberg: will be term based and tech space, but it will use in NBC design as opposed to a mvp design and then Lastly, we will. Ted Holmberg: We will build the s
ame thing, but it would be time based and graphic space using an npc design of course we'll break down those concepts as we get to the sections and then each one of these parts has a couple different goals that builds us out. Ted Holmberg: To a complete project and then we'll refactor build that out, and then we factor and build that out. Ted Holmberg: Okay, so let's introduce the concept, the first thing is the pre record for every lab, so this is our Dom and events lab so it's partners with th
e lectures for the Dom and events. Ted Holmberg: And so you don't really need any critical software outside of just having your chrome browser and Dakota it's pretty much everything we've had up to this point. Ted Holmberg: The motivation behind this lab is, we want to learn about the document object model API and and javascript to make some interactive html based Apps. Ted Holmberg: Now we already know a lot about javascript so we're really be highlighting or focusing more on the Dom components
here. Ted Holmberg: The goal for this particular lab is to build a compelling. Ted Holmberg: fun version of the high low game that runs in a browser using javascript and Dom API know and I I keep I keep saying hi Logan is everyone familiar with the concept of this game i'm pretty sure this is like a game that you build in 1583. Ted Holmberg: But if not let me just give the basic rules might be given later on, but then we'll just go over it again the idea behind this is, you might have a certain
number of gases let's say 10 gases to gas the number. Ted Holmberg: Across maybe 1000 you know from one to 1000 and then, whatever your guests is you're told whether the number is too high or too low, and that gives you a clue on how to narrow down to. Ted Holmberg: two guests more strategically or or intelligently next time so that you can try to isolate down to that number. Ted Holmberg: So it's it's a pretty good common kind of programming a game to program because it hits up all the differe
nt components. Ted Holmberg: Inside of a coding language, where you have to store data, you have to do selection statements and repetition statements, you have to do some processing on your data some data processing and you have to display results. Ted Holmberg: OK, so the learning objectives here is, we want to learn about the document object model API and access and update the html document from the browser from our javascript runtime environment. Ted Holmberg: we're going to learn a little bi
t about invent driven system design. Ted Holmberg: we're going to learn a little bit about agile practices when I was sitting mvp earlier that's what we will call the minimal viable product. Ted Holmberg: That will be our initial focus when we go to build out, but then, when we factor our code base we're going to move to an NBC. Ted Holmberg: Which is our model view controller design pattern, so our first build we're not going to care about necessarily adhering to proper design patterns, we care
about just building something that works and then, once we get something that works well refactor it it's something that's better. Ted Holmberg: We also are going to talk about some ui ux considerations and improvements that we can make as we keep implementing our game and then we'll talk about setting up some time to events and date objects. Ted Holmberg: OK. Ted Holmberg: Now the project architecture is we're going to start the project by downloading the starter files from github just like we
have been. Ted Holmberg: And then we will see that the project structure below so we'll have our high load game, then we'll have our html file right and the root project directory. Ted Holmberg: And then sub directors would be an assets directory that should contain all like the artwork we might eat for this lab and then a scripts directory where we're going to put all of our javascript code Okay, and then we have this link here let's go ahead and grab that. Ted Holmberg: Well, let me. Ted Holm
berg: yeah that's fine. Ted Holmberg: And let's get that setup let's go over here me. Ted Holmberg: Yes. Ted Holmberg: hi this I don't need this year. Ted Holmberg: Okay, here we go. Ted Holmberg: Now i'll just go ahead and rename this so it's just what. Ted Holmberg: High load yes that's perfect okay so initially I have an assets directory yeah my assets directory has things that will use in part three, when we talked about having something that's project spaced. Ted Holmberg: Okay, and then cr
eate, let me get this set up to be similar to what it wants, though I will have a scripts directory. Ted Holmberg: Okay, so I just made that just now so nothing's in there yet, because I haven't run any scripts don't have an html page, all we have is assets and i'll start by just making that scripts folder now so that all right now emulate this for the most part. Ted Holmberg: Okay. Ted Holmberg: So let's talk a little bit about the document object model, so the dog or one of us are just calling
the Dom from now on, the Dom gives javascript access to each html document the Dom is a built in object. Ted Holmberg: With which has functions and properties purposely designed for manipulating the html Dom converts html. Ted Holmberg: elements into javascript objects and the lecture will discuss exactly how those get models into node objects and what the hierarchy on that is. Ted Holmberg: So a document object is a global object, that is, the entry point into the Dom API is it itself is a pro
perty of the window object, which is the global object for everything. Ted Holmberg: Inside of our browser, but we have an alias to the document object that is just document. Ted Holmberg: So again, if we were to go, let me go to the browser here if I was to just type in Document right inside of there, you could say it's something that exist, and it actually represents the html that's in this blank page right here. Ted Holmberg: Okay, and then we also have element object so on, so the document o
bject accesses our element objects via a get element by ID call, and then we can pass it the idea that that html has. Ted Holmberg: These element objects or the javascript models of these elements for the webpage now, we could also access. Ted Holmberg: Our html elements with just the ID names themselves like what we did in the very beginning of the course in the first lab. Ted Holmberg: However, it's preference that we use a call to the document object and i'll highlight why that's the case a l
ittle when we actually start the lab i'll actually give me an example of that. Ted Holmberg: And then one one other thing that was talked about that's going to be relevant for. Ted Holmberg: The Dom for this lab is the inner html which we've already seen before again we've seen this in lab one. Ted Holmberg: So that's going to take away some of the surprises from this blab since I had we offered that way but inner html as you might already know it's a property of the element of an element object
that maintains its html and markup meditation strings. Ted Holmberg: So, by changing the value of an inner html the element may add change delete html from our Dome which then will cause our viewport to re render with the new contents now you don't ever want to use our html, because that will actually. Ted Holmberg: Change the the html element itself that you're operating on for to not even exist anymore, and actually pull it out of the out of the tree if you modify that so we strictly usually
stick to the interesting about. Ted Holmberg: Okay let's talk a little bit about events now or in particular browser events so web browsers are event driven systems right their graphics base and they have all sorts of mouse inputs and click. Ted Holmberg: Events or keyboard events that kind of trigger it so. Ted Holmberg: browser generating manages events, based on certain actions are triggers those events may be used by Java script Apps to trigger actions or behaviors. Ted Holmberg: So some thi
ngs you should know about using events in an event driven system, we need an event listener, so an event listener effectively registers, an element object to listen to the event queue for a specific type of event and when the event occurs, the vault invokes a callback function. Ted Holmberg: So when we after we registered a event listener, to the event delegator when that happens. Ted Holmberg: This is what triggers the callback function, so a callback function simply just a function within our
javascript application that has passed as a reference to the event system. Ted Holmberg: When an event occurs even system invokes that callback function and then what happens is we're given an event object. Ted Holmberg: went to this callback function so whenever callback function isn't vote the browser passes in event object as a parameter just have an object as properties specific to that event I think we've seen this before I think I had. Ted Holmberg: When we were doing the platformer game I
illustrated what an event object look like because I console walked it. Ted Holmberg: And then just know you have different types of events again we've kind of seen this already because of the Platform or game. Ted Holmberg: Every that object has a type the event listener matches the event object type to a callback function, this is similar to like a key value pair and so then types. Ted Holmberg: are represented as strings in terms of this look up and they might appear as like click or load or
or key down or key up or things along those lines. Ted Holmberg: Now let's talk about a little bit of architectural concepts so i'm sure everyone should be familiar with the idea of model view controller or what's commonly referred to as NBC. Ted Holmberg: So mvc is just a design pattern where an app's responsibilities are divided into three different partitions. Ted Holmberg: Whether it's a part of the model of the APP whether it's part of the controls of the APP or whether it's part of the vi
ew from the APP, and so the model effectively manage all of the Apps for logic or concerns for handling. Ted Holmberg: Without concerns right so it's all about modeling the core logic, and so we will disentangle any concept of input and output from the model. Ted Holmberg: And then the controller handles the user input to send data and invoke actions within our model and then our view will manage our putting the data from the model and presenting it to the user. Ted Holmberg: And so, this would
be a common theme of trying to organize our our Apps all throughout will find that it's it's it's a very powerful approach to building web applications being able to identify these three different parts of your application and keeping them kind of discreet. Ted Holmberg: So far, goals zero so before we start let's let's talk a little bit about single page APP so a single page APP. Ted Holmberg: And an iterative build, so let me start with the concept of SPF. Ted Holmberg: Our modern web applicat
ions minimize the number of html pages, you get sent to down to one, and the reason why is it's now typically more important to preserve the javascript runtime our. Ted Holmberg: Data as opposed to separating a website or web portal across multiple html documents like one bad thing about multiple html documents like what we had in the first couple of labs is that every time you you. Ted Holmberg: link from one html page to another anything that was stored in your javascript runtime environment,
you lose. Ted Holmberg: And since so much about what we do now is based off of computations happening in the background javascript we want to preserve that and since, in fact, the browser maintains all the html elements that's being presented to you in memory as a. Ted Holmberg: As a collection javascript objects, in the form of a tree, we can modify the html in real time and re render all new content. Ted Holmberg: And so, instead of focusing on building new html documents that have html pages
spread across like different html content spread across it was preferences you just update the html in this current page based off, of whatever the state of your application is. Ted Holmberg: yeah that bird is really trippy. Ted Holmberg: it's a nice day outside. Ted Holmberg: So with That said, so the motivation moving forward is all of our web Apps on our client side, we want to start focusing with this with this kind of design metaphor of having it be a single page APP so we have one html pag
e. Ted Holmberg: And then all the content that's going to get displayed to the end user, will be updated via the javascript. Ted Holmberg: Interested builds we're very we're very familiar with this concept, this means we're going to start by building something simple. Ted Holmberg: And then we're interactively going to add complexity to this, and this is a great strategy to go ahead and build out and any kind of application. Ted Holmberg: You start by identifying what is the core feature set and
can I get just that belt and then you can go back and do a refactor of it and then. Ted Holmberg: plan out how to add each new feature thereafter, and you can create a set of milestones for yourself like what i'm about to do so that i'll get to a final APP so here. Ted Holmberg: My part one i'm going to focus strictly on this idea of a minimal viable product so i'm going to focus on the just getting what the Apps necessities and. Ted Holmberg: Then, once I have that belt i'm going to refactor m
y APP with the model view controller pattern and improve the user interface on it. Ted Holmberg: And so that version will refactor the code base into effectively three parts, where we have a model that manages the logic, we have a view that's going to matter see our output and we'll have a controller that manages input. Ted Holmberg: And then, our final version we will go ahead and improve the ux even further, make it more attractive start using graphics to display on. Ted Holmberg: Our output a
nd instead of being a turn based game, we will make it a time based game, to make it more compelling to make it more fun. Ted Holmberg: OK. Pablo Pavon: So now. Ted Holmberg: That we have our goals. Ted Holmberg: let's actually move to Part one building a turn based text based HALO game, using the mvp design and so here, you can see. Ted Holmberg: mock up that I make and it's always good to have mockups I think you'll have to make some mockups for your final project it's one of the. Ted Holmberg
: it's one of the tasks you'll be assigned to do so, you can use this conceptually of how you might have to explore what a mock up might get rendered as. Ted Holmberg: So here we'll have our index dot html and we'll see we have guests in number will have an input field web a submit button and then, when we submit. Ted Holmberg: Essentially, our game will listen for that submit to occur, and then it will take in and define whether it was too high or whether it was to as a response. Ted Holmberg:
I can, and I think we've covered a lot of these concepts of this point so we're using a minimal viable product, so this lobbies is an agile approach for developing the high low game. Ted Holmberg: So if you've if you've heard of the concept of agile design, this is effectively what it means, it means instead of planning everything all at once. Ted Holmberg: And then starting your implementation phase, you do a little bit of. Ted Holmberg: planning, then a little bit of implementation and go back
to planning and implementation you test in between right, so the exact same way we've been building software in all of our labs is using an agile approach to software development. Ted Holmberg: yeah we focus on the initial build and delivering an mvp and then BP is a version of our APP with just enough features, to be usable by early users who can then evaluated for future development. Ted Holmberg: So that's what our goal we have this proof of concept, can we get something just to play around
with it and say Okay, what do we need to add on to it to make it a more feature. Ted Holmberg: rich and something that we can potentially deploy release in the future to the general public. Ted Holmberg: So an empty in terms of mvp specifications specifications defines the necessary features. Ted Holmberg: For this version of the application, so we need to so our goal here what what we need to have is be able to capture input from the user through the browser support. Ted Holmberg: update the br
owsers the port with the players results and implement the core game logic for executing the high logo, so this is what we would consider success for mvp builds. Ted Holmberg: OK, so now let's move on to our goal for mvp built so goal one, we need the html for our high load game so here we're going to break every one of our goals. Ted Holmberg: into the same thing we've been doing and approach and apply and improve or planning phase of D phase and testing phase, so in our planning phase, we need
to make an html document that gives the Games instructions and its user inputs, so we will need to create. Ted Holmberg: To actually to do that will have to create an index dot html file and implement it with the basic html content now here i'm not going to cover too much about what's what's going on in here because we should know. Okay let's see here. Ted Holmberg: let's do this where, am I us now let's go back. Ted Holmberg: let's go back. Ted Holmberg: yeah. Ted Holmberg: let's go until. Ted
Holmberg: Now, and let's go into. Oh. There we go. Ted Holmberg: perfect. Ted Holmberg: Okay. Ted Holmberg: So let us. Ted Holmberg: make an html page. Ted Holmberg: There we go, let me get that into my editor here. Ted Holmberg: and Ted Holmberg: moment i'm gonna get everything formatted appropriately. Ted Holmberg: Okay perfect So what do we have here we have an html document will have a head and i'm this first phase, we were just going to mock up the first goal is we're going to try to creat
e this mock up on our index html right so that's pretty simple. Ted Holmberg: we're just going to implement some things in the body, a paragraph that says, this is a number between zero to 999 you have 10 gases enter a gas and then we'll have a. Ted Holmberg: An input to try to capture tax and then we'll have an input that will be a button, that we can go ahead and we'll say to submit, so let me save that and actually let's uh let's go over here. Ted Holmberg: And here, and here yeah you can see
Bam there we go and actually, let me just go to developer tools here nothing's there and the javascript but i'll have that open okay so that's a good mock up of what were initially going for so when we open that. Ted Holmberg: We have the initial interface, that we need for this game so again for HALO the rules are going to be you have guesses. Ted Holmberg: Between well, you have 10 guesses, but you have to guess between zero to 999 and you can enter your guests here and then we'll get feedbac
k, eventually, so we got the initial state, going so let's move on to the next goal so here i'm. Ted Holmberg: will have our Dom for the javascript controller so we're going to set up our event listener right so here are the basic approaches and this iteration html inputs are accessed from javascript. Ted Holmberg: Which listens we're button click and triggers a callback function response, so how can we go ahead and do this well in our apply face we're going to. Ted Holmberg: modify something in
our index dot html we're going to link the game js file to index. Ted Holmberg: dot html and give it inputs ID attribute to access it so right here we're going to do a couple things and we're going to have our input type and ID here and ID here, and then we got a link the script so let's go and do that. Ted Holmberg: So we'll go here let's get to our source code, so if I want to access this in the Java in our javascript right we're going to have to give each of our html elements and ID, so this
is going to represent the gas tax. Ted Holmberg: Line seven there and then the other, the button is going to represent the button we select for gassing so let me go over here and add that. Ted Holmberg: OK, and now the next thing i'm going to do is i'm going to link at the very bottom. Ted Holmberg: Our script. Right. Ted Holmberg: Here Okay, so now we have a script tag that's going to link into our scripts action, a game chaos doesn't exist yet, let me actually go into my script section now an
d actually make that. Ted Holmberg: Knowing that that's gonna be the next thing going to likely have to do so let's go and make a game js okay scripts will open that up now. Ted Holmberg: Okay perfect Okay, so now now we're importing game js and we'll put all of our logic in here and, since these have ids will be able to access them from our javascript environment excellent. Ted Holmberg: And now, so now, the next step is we're going to go ahead and use the document object to get html by ID and
add an event listener, to the button, with a callback function so i'm just grab this and then we'll walk through this code. Okay, this is. Ted Holmberg: stuff that let's make this look nicer that goes there that is there okay so. Ted Holmberg: So that okay let's okay said, the first thing we're going to do is we're going to get the html elements as javascript objects. Ted Holmberg: And so i'm going to grab the button and i'm going to grab the number and to grab those i'm going to do. Ted Holmber
g: document, so this is a document object, the document object has a method that's called get element by ID. Ted Holmberg: And so what it's what it's going to do is it's going to search the entirety of our. Ted Holmberg: html content, the tree of the html and it's going to navigate and soul finds a element with that with whatever the appropriate idea is the idea that it's looking for guests text. Ted Holmberg: Then or guest spot, and so this time it's guests button, so if it's guest button that
it's looking for it's going to return this element, and then we can save that element as a variable in here. Ted Holmberg: And so, since I don't attend yet to mutate, the state of budget or number on going to declare these with the least amount of rideable privileges possible it's constant I typically try to always. Ted Holmberg: keep everything a constant, if possible, and if I determined later than I have to make it relatable then i'll i'll change it to a lead. Ted Holmberg: OK, so now, I coul
d have easily I could have easily also done this well I couldn't actually. Ted Holmberg: These have underscores so guess button doesn't but if I change, I would have named the variable something that that used underscores instead of. Ted Holmberg: Instead of slashes or dashes I could have done this right, but this is dangerous, we want to avoid how we did this in the first lab and i'll show you why i'll show you why that's the case. Ted Holmberg: Actually let's let's see that, let me make. Ted H
olmberg: Well, after after this more in the test phase i'll show show you why we shouldn't do that okay what's it idea oh here. Ted Holmberg: How about that Okay, so the this is so we grabbed these two html elements, the bundle the number, then what we're going to do is we're going to add an event listener, to the button, with a callback function, so the button element itself. Ted Holmberg: Because of inheritance a button element is the type of the node and, at the very root node that every html
element that's modeled in the Dom has it has a membership to the. Ted Holmberg: Essentially, it is a an event target object so because the event target is like the parent node to all the nodes that make up our html tree, they can all be. Ted Holmberg: have this method that's called an event listener this ad of it less than or allows a event target object which button is a member of to be able to register itself to register. Ted Holmberg: itself with the event delegator that's built into the bro
wser and so then add event listener allows us to say okay here's the type of event that we're going to listen, for whenever this event occurs. Ted Holmberg: trigger this callback function on on this element, and so the cool thing about this is, since each element can be an event target, you can actually have multiple elements registered for the same event. Ted Holmberg: with different callback functions so we're not going to do that here, but just understand like when a click event occurs you do
n't necessarily. Ted Holmberg: are limited to buying just one callback function to it, you can bind any number of callback functions and the event. Ted Holmberg: handler will essentially just go through everything that was registered with it and and do the callbacks on each of the individual elements that it now has a reference to. Ted Holmberg: Okay, so this is how easy it is to add an event listener, so that we can go ahead and start listening for click event. Ted Holmberg: And then we have to
give it a reference to a function notice this isn't a function invocation functions in javascript objects in of themselves so we're assigning this. Ted Holmberg: This we're getting a reference to the function when we register the event listener, that will later invoke it when the click event. Ted Holmberg: occurs, and so, when this when the click event does occur we're going to invoke this guests number and the guests number is going to pull the value from this other. Ted Holmberg: html element
that we grab so we grabbed the text fields here, so one of the things inside of the text fields are four inputs is an attribute called value. Ted Holmberg: So we'll grab that value will assign that to a local are constantly as a guest and we'll print that into our console so let's actually test this stuff. Okay. Ted Holmberg: So if I put me refresh my page, let me type in 100 into the text field, I hit the submit, and there we go and that's going to print console log or hundred excellent. Ted H
olmberg: So now we were listening for an event and that we're actually doing something in response to that now, I had claimed earlier. Ted Holmberg: And I want to prove this, I could do something like this, so suppose that I had an ID of arm. Ted Holmberg: let's call this food okay so suppose I have food here right now what we've learned up to this point is that, and let me refresh my page. Ted Holmberg: I could access foo if I wanted to just by the ID from the html page right I don't have to do
this big long thing document get. Ted Holmberg: element by ID and then passing through this is the other way that i'm advocating that you, you do so notice I get through either way, whether I just use the idea fu or if I go to the document object and say hey get the element by ID with so. Ted Holmberg: i'm telling you to do this big much longer way, instead of this much simpler easier way but i'm going to justify it i'm gonna give you a rationale why you should do it the way that i'm presenting
it now. Ted Holmberg: it's because in javascript this ID that's it's it's mutable right it's not confident no way to make that constant and so so sit so say, for instance, then I decide to override it let's say hey foo now you are are have the value of bar. Ted Holmberg: Right, so now whenever I do reference food it now has bought. Ted Holmberg: Right i'm no longer D referencing my html elements and so with ids in html it could be very common that you have variables in javascript that are simil
ar in name than the ID attributes label to in your html elements. Ted Holmberg: And if at any time you accidentally overwrite it then you lose reference the html element, and you know that's an easy mistake to make that's hard to catch, and so one way to make sure you always are grabbing references to that document. Ted Holmberg: object is well, even though I don't have access to it through the ID anymore right because i've accidentally. Ted Holmberg: or purposely in this case a scientist in new
value, I can still grab it using the document object get element by ID type into and look there it is. Ted Holmberg: So, but even though this one, the actual ID itself no longer works, so you can see, this is a much safer way to ensure that the the what i'm getting back what i'm D referencing is the thing I expect it to be. Ted Holmberg: So just you know something to be aware of. Ted Holmberg: Okay, and we tested it out that out and that's looking great to me, so the next thing we're going to d
o here in our high low game is, we want to add some game logic to it. Ted Holmberg: So, in terms of our approach for adding our game logic, well, we want to implement the basic algorithm algorithm for the high low game and so. Ted Holmberg: Effectively, the Games output will display to the console so that we don't have to worry about updating on to our. Ted Holmberg: Our viewport yet we're going to make that a different consideration in the future we're just focusing on an mvp built here so in t
erms of doing this well first let's go ahead and create some variables for the random pass code. Ted Holmberg: And the number of tries remaining. Ted Holmberg: See so let's go here. Ted Holmberg: So this will represent my HALO game data, so I always try to put my data towards the top whenever I develop that way it's easy to read. Ted Holmberg: for myself and for future developers who come back to read my code. Ted Holmberg: And I always try to comment out each of these lines, so as you might kno
w this so here, this is going to represent my HALO game data, and so I need a pass Code, the thing that we're trying to guess and. Ted Holmberg: The stipulation for a winner last condition is, you have to do in a limited number of trials or attempts so here, you will be giving 10 trials. Ted Holmberg: And so notice the past code won't change, but the number of trials will so that's going to have me determined to use a lit to define my tries versus a constant my past code Now all we have. Ted Hol
mberg: A math class built in to or math object built into our javascript it's part of the API so here and actually have a lecture on that on on. Ted Holmberg: The math class and local storage class and a couple of other built in classes day class here at any time, when one great thing about javascript is the Dev tools is a pretty full featured like. Ted Holmberg: It offers a lot of the tooling you'd expect a full featured ID either have. Ted Holmberg: So when I type in math and if I type in dot
it's going to try to autocomplete for me, and so, if you wanted to serve a what kind of math functions, you could call or methods methods, you call them alpha objects. Ted Holmberg: You can just kind of scroll through and see all of them, you see the malfunctions pretty well defined in fact it probably has all the same methods, if not more than the math class that that Java has. Ted Holmberg: And, of course, one of those is going to be. Ted Holmberg: The ability to produce random numbers right.
Ted Holmberg: And when we do that notice the behavior of our random number is going to be a random number between zero and one. Ted Holmberg: Which is exactly the same as what Java is mapped out random function is. Ted Holmberg: So what we're going to own it gets my source code here, so what we're going to do is we're going to. Ted Holmberg: Call math random and since it's going to be a number a random number between zero to one will multiply it by 1000 so now we'll get a random number between z
ero and 999. Ted Holmberg: Now, maybe because one is not inclusive, so I can never get one from math top brands like to get 0.9999999 but never actually one and then, once I do that i'm going to Florida, so I don't have a fractional number anymore that way I have an integer number, and that will represent my basket. Ted Holmberg: Excellent so now that we have that let's move on to step two where we're going to implement the logic for evaluating a gas to determine if the user had one last or gets
a clue so then grab this. Ted Holmberg: and add this function in here and actually This is our guests number function and i'm going to get rid of my old one, so. Ted Holmberg: Because i'm just going to replace it out with this new one, though, that old one was a test one typically you'd want to just go ahead and refactor but i'm just going to for brevity sake replace it. Ted Holmberg: OK, so now, I have a guest number function, but instead of just passing off the just instead of just console lo
gging out the. Ted Holmberg: Value i'm going to grab the gas from the text field i'm going to decorate event tries on each time we get a number. Ted Holmberg: i'm going to console log the number of attempts left is, and then the the value of trials and then i'm going to check if gas is equal to pass code, then we won the game and we got it in whatever the number of prizes 10 minus whatever the number of attempts. Ted Holmberg: And then, otherwise else tries is less than zero then we lost the gam
e. Ted Holmberg: Because we didn't get in the number of attempts we get so this is our winning condition, this is our losing condition and if we didn't win. Ted Holmberg: And if we didn't lose then we're going to call this other method this other function it's going to be called gift blue and we're going to pass give clue the guests, that the user had had supplies. Ted Holmberg: So this symbol selection statement that checks to When did we lose otherwise given. Ted Holmberg: So, then, we have to
define that helper method so we're going to find a function that gives a clue whether the gas was too low or was, but it was too high. Ted Holmberg: Okay that's pretty good so. Ted Holmberg: can have things not format it right Okay, so this is the function responsible for giving us a clue it will take in gas as a parameter we're going to check if gas. Ted Holmberg: is higher than the past code then we'll let the user know your gas is too high, otherwise we're going to let them know it was too w
ell, we knew we know it either has to be too high or too low, because if it was just right, then they would have one, and we would never given a clue. Ted Holmberg: And if it's not too high, then it's your way. Ted Holmberg: Excellent Okay, so now, the next thing we're going to do is we're going to actually test this logic and see if it doesn't work so now we'll play the game. Ted Holmberg: we're going to submit some guesses using the button and read the results and again this is just a flow cha
rt of. Ted Holmberg: How from index html we have these two input fields right a text fields in a button the logic of our game is going to listen for this button. Ted Holmberg: And invoke the gas action right with the callback function, which will then have our game js file. Ted Holmberg: output to our console so the purpose of this breakdown is to illustrate this connection that's kind of the funding our model view controller, or I should say, like our. Ted Holmberg: kind of scheme and how we're
starting to see the relationship between our game logic and how it starts mutating it state over the run of its application or recycle the application running okay so let's actually test this out. Ted Holmberg: So they get over here, let me. Ted Holmberg: refresh and now if I type in let's say 500 say number of attempts left is nine 500 is too high, that means I gotta go lower right, so it needs to 250. Ted Holmberg: Number of attempts left is eight to 50 is too low Okay, so now we have to go i
n between so let's do like 375. Ted Holmberg: Number of attempts to lock down with seven and 375 is too high, so we gotta go lower let's say. Ted Holmberg: To. Ted Holmberg: let's say 325. Ted Holmberg: The number of attempts is six 325 is still too high, so my highest basha delish to 25. Ted Holmberg: lois should be 250 so let's say. Ted Holmberg: let's do. let's see. Ted Holmberg: Some of the five. Ted Holmberg: Okay number of attempts is five to 75 is too low okay so we'll be seeing cheetah s
teps let's try 300. Ted Holmberg: Number of attempts left as for 300 is too low, my take so let's do like 312. Ted Holmberg: To 12 is too low and we only have three attempts left Tom let's do like 318 i'm the only two attempts laughs I, but we, when we got it in eight attempts, the number was 318 excellent. Ted Holmberg: So we can win the game that's clearly working for our mvp let me refresh and see what happens if we just submit submit submit submit submit submit submit submit. Ted Holmberg: A
nd Okay, we lose and the the Pascal was a 54 perfect, so we have a loss, and we have a one and our get our close work, so I feel good about this in fact. Ted Holmberg: i'm let's see what else do we need to do here so for our goal for here on this first build is we're now actually going to move away from the using our our console and we're going to use the inner html instead. Ted Holmberg: So the general approach, we want to do here is do an easy Dom API to update the html elements from our javas
cript so let's see what are we going to do first. Ted Holmberg: In our step in order to accomplish this is you're going to add an empty list for clues with an ID and also add an ID to the paragraph, for a change, so in our html we are going to want to update this. Ted Holmberg: The number of guesses we have as the game progresses. Ted Holmberg: And we're going to create a an order of less that we're going to mutate into that we're going to go ahead and keep a pending into so let me grab this att
ribute this idea here. Ted Holmberg: And let's go into this year and inside of here, so this is going to have to mutate after we get each time we make a gas so that means if I want to access this inside of my javascript i'll give it an ID of attempts. Ted Holmberg: And then the other thing I want to do is i'm going to create a whole nother html element that's going to be designed to capture or to go ahead and present these clues to us. Ted Holmberg: And I think we'll just represent that as an or
der less anytime we make a gas well a pen to this clues on us excellent. Ted Holmberg: So the next thing we want to do is, we want to grab, these are the these two elements html elements into our javascript so let's go ahead and do the same thing we did to grab those up input fields under guys the top here. Ted Holmberg: And i'm going to grab my attempts view here which i'm going to use document get element by ID attempts. Ted Holmberg: And then my clothes view this is on the demographics and do
cument object again with the get element by ID and the clues to use html elements that I just made i'm going to grab and I DEMO store that into these constant variables, to ensure that they are well protected and can't be over. Ted Holmberg: Over wrote. Ted Holmberg: We don't overwrite them. Ted Holmberg: Okay, then, now that we've done that let's refactor our code, a little bit so instead of using console logs let's take those messages and actually use the inner html property of these element o
bjects to. Ted Holmberg: redefine what they're going to display so i'm going to go to the tries to replace my tries here we're updating the number of attempts left and i'm going to instead tell hey attempts to you from your inner html. Ted Holmberg: use this text instead. Ted Holmberg: And then i'm going to do the same thing here with our if we win. Ted Holmberg: So on the little sense of if we win i'm going to instead of using console log on going to from the document object document object has
. Ted Holmberg: Actual references to the two primary root children of the html document so from document I can access with the body and the head. Ted Holmberg: i'll show you that right here so from the document, and if you ever want to see what's the document, again I could just hit dot here, and I can scroll down and see every single function and property that document has available. Ted Holmberg: So if you ever wanted to kind of survey and kind of discover what you could do with some of these
built in objects in the browser it's very. Ted Holmberg: easy to see what's available. Ted Holmberg: Well, some of the ones that we're going to care about is being able to actually access the head and the body elements, just like so. Ted Holmberg: So, even without ID tags, we always have access to like he's route. Ted Holmberg: Children, the primary children have an html document and what we're actually going to do here is we're going to access the inner html. Ted Holmberg: And we're going to ov
erride everything in our document in our html document so that it will have a heading element. Ted Holmberg: So I have a heading element that's going to say you win and then, I have a paragraph that says got it in. Ted Holmberg: And then i'm going to do that computation, so this is a string template so again, I can pass a value, using the dollar sign and curly braces and do a computation inside and it'll be 10 minus draws the same way, we were doing before perfect. Ted Holmberg: And then i'm als
o going to do that on the instance that we lose. Ted Holmberg: answer here. Ted Holmberg: There we go so we're going to document body got inner html will do an assignment here, and the same thing that we do with women, but with different message you lose the password was and then we'll share with the past, it was reference that. Ted Holmberg: That slot and then the next thing we need to do is inside of our clue function is now inside our guests number function we've updated the number of attempt
s. Ted Holmberg: And a win and last message on the instances that those conditions occur, but we also have to update the gift clue to actually give the clue inside of that an ordered list as opposed to the console so here i'm going to update these console messages for when Sue hi. Ted Holmberg: Again, will access close view here will access the inner html but, as opposed to overriding it, which is what we've done and all the other attempts where we've just. Ted Holmberg: removed what was there b
efore instead what we're going to do here is we're going to concatenate to it. Ted Holmberg: So we're going to add to we're going to maintain what was already there and add to it, the string. Ted Holmberg: a string literal template that's going to be a list item that's going to give the gas and play it's too high if the gas is greater than the past code and then we'll do the same thing, but with the message has to low on the instance that, on the other side of that selection. Ted Holmberg: Then,
once we do this, we should have to refactor our code, such that, instead of doing console logs with all of our data we're now going to display it into our viewport so let's test this out and see if it's actually working. Ted Holmberg: Okay, so let's do this again so 500 submit and bounce and nothing, nothing in the console log anymore and notice now i'm updating this as a number of attempts left is now online and it gives me this close to 500 is too high and then i'll do is go too low, then let
's do 750 is to. Ted Holmberg: 800 i'll just keep doing this to 902 hi. Ted Holmberg: 850 and we just want to play any strategy will randomly gas. Ted Holmberg: 875 is too high. Ted Holmberg: I guess, he was too high. Ted Holmberg: or bards on October 7 of August dissipates into the clues so 50 let's try 300 let's do 125 120 lines up just putting into my my code let's say I have okay. Ted Holmberg: There we go so that over right. Ted Holmberg: What we have done. Ted Holmberg: Okay. Ted Holmberg:
So we and this represents what happens when we override the body we've lost everything there were totally lost the only way we can get back to the games. Ted Holmberg: Excellent okay sessions to be working and we know that the wind message will likely work too. Ted Holmberg: So that's it that's done for part one, we have our minimal viable belt right, we have a version of the game that works in the browser where the end user Community play. Ted Holmberg: and experience the game, so now let's mo
ve on to Part Two let's let's turn let's convert this into still be in turn based. Ted Holmberg: so effectively mean text based but let's start to subdivide our logic using this concept of an mvc pattern so. Ted Holmberg: Now that we've gotten something that works we're going to retool it so that it scales, a little bit better, so we can keep continuing to add features and complexity. Ted Holmberg: So this is going to be a sample of what the finished project is going to look like where we're giv
ing the same amount of rules we're going to have the number of attempts left, but instead of. Ted Holmberg: But instead of but we're gonna we're going to be motivated to kind of make things a little bit safer, so instead of having. Ted Holmberg: Just this like what are issues we might have here by typing in well what if I type in letters right like well that's too low well that doesn't make sense right, so this is this works minimal viable product but there's you know there's some. Ted Holmberg:
there's definitely it's not very fault tolerant right it's not we haven't. Ted Holmberg: defended against improper input into our game system, so we want to start having additional considerations as we start to refactor this and improve the functionality right, this would be really frustrating if you're playing the game and or what if I put in like a negative number right. Ted Holmberg: Or what if I put in a number that's too big right like I can do all these things are that's, not even a numbe
r there's why in there, I can do all these things. Ted Holmberg: And you know it's outside the scope to the number that's gassing it's not even numbers it's you know we could do a lot of things to kind of break the experience so in Part Two we're going to try to address some of those things, while we also separate our code bits. Ted Holmberg: So here are our summary let's create a new mock up for an improved version of the puzzle game each initiative goal will revolve around adding in these new
features, so the specifications. Ted Holmberg: The thing that motivates why we need to continue working on this project, the reason why it's not done, even though we have an mvp build of it. Ted Holmberg: Is that we want to improve code manage and maintain ability, so we want to adopt better software engineering principles and refactor the Code into three responsibilities. Ted Holmberg: A model of you, and a controller, we want to improve our controls, we will make them more fault tolerant for t
he user inputs and prevent any kind of invalid values, so that we can ensure that the inputs do not require even a keyboard. Ted Holmberg: But also support mobile right, so if we do buttons we could do it using either a key like a mouse or touch controls so we're going to improve our controls we're going to improve the code maintain ability. Ted Holmberg: And we're also going to improve that you were going to have a better user interface user experience that's going to have more style maybe grap
hics isn't the right word yet, but siren the set certainly going to be something that is going to be a consideration. Ted Holmberg: So our responsibilities across our mvp is well again, our view is going to manage the output from the model to the user, the controller will melt it will manage the input from the user to the model. Ted Holmberg: And the model itself is well that's going to be the program's logic so that's going to be the thing where that has all of our game rules in it no but with
no input or output concerns. Ted Holmberg: Okay, so that's our God that's that's how you decide whether something goes in model view controller so let's take a look at this let's take this approach and start breaking. Ted Holmberg: It down across an NBC architecture based off of what we already have, so if we have a model dot J, yes, if we have a view dodge chaos and we have a controller dodge as. Ted Holmberg: The variables that we currently have, or a pass code enterprise without those belong
to our model. Ted Holmberg: The functions, we have his guests number and gift clue that belongs to the model we also have print attempts remaining print clue and printing over well that's updating the view, so we would move those into the view as category and then for controller, we have. Ted Holmberg: will create a function that will initialize the controls and go ahead and set up for the button events so all of the things that we're doing to start setting up our. Ted Holmberg: event listeners,
we will go do inside of a controlled chaos So the first thing we do in our approach is break down the features, we already have all of our implementation so that we can decide how where it goes inside of this. Ted Holmberg: Separate digests files so next thing we need to do is actually create a model with js controllers js envies js let me do that. let's see. Ted Holmberg: model Jason said Out of curiosity. yeah. Ted Holmberg: is okay. Oh yeah. Ted Holmberg: Controls chaos. Ted Holmberg: And th
en I want to say, I called it views chaos perfect. Ted Holmberg: Okay, so let's go over here let's go over here, and let me get these into. Ted Holmberg: model. Ted Holmberg: us. Ted Holmberg: Controls perfect. Ted Holmberg: Okay, so now I have these made. Ted Holmberg: So inside of one model, let me grab this. Ted Holmberg: Lord. Ted Holmberg: does a good job of ugly find my code. let's just to. Ted Holmberg: Go. Ted Holmberg: There we go. Quite done yet. Ted Holmberg: stop that. Ted Holmberg:
This also has to be. Ted Holmberg: There we go Okay, so that is there let's see same thing here. Ted Holmberg: yeah and then that goes there because they're so let's take a look at what's happening here. Ted Holmberg: Inside of her model, so we are going to go ahead and create the past Code, the same way we did before that data goes in here the trial goes in here as well, we have our function. Ted Holmberg: that's gas number, where we document the trials and then we check if the gas is equal to
the past code then we're going to invoke this function to print a game over so notice, this is a method call. Ted Holmberg: And this method call will essentially be accessed and it'll send a message to our controllers. Ted Holmberg: script that will manage the logic for printing a game over message of win so now that responsibilities outside of our model. Ted Holmberg: And then we'll also check to see if tries is all less than. Ted Holmberg: or equal to zero if that's the case then we'll go ahea
d and print a game over message to lose and again we're not handling the logic here we're going to send that to a method called that will then exists inside of probably views. Ted Holmberg: same here but we're sending the message, then we're going to print attempts remaining tries, and again that'll probably go into our views right based off of our separation of responsibilities and then we'll invoke the gift clue message and then i'll have this function that's called. Ted Holmberg: I have this
function called give clue which I had before, but notice instead of. Ted Holmberg: Instead of actually updating the html documents i'm sending again these messages high low and the gas to these print clue not that. Ted Holmberg: And again, because we don't want to have that logic inside of our model that's a logic that has to be handled inside of a few debbie appropriate separation of responsibilities. Ted Holmberg: So now let's go on to our controller script and let's update that so that we can
. Ted Holmberg: do the same thing and give me a moment, while I get this code, be a little mice. Ted Holmberg: Okay, there we go so inside of here i'm going to actually invoke a function, when someone controllers are initially important in it will. Ted Holmberg: initialize the controls method so that's this function here, and so what initialized controls does is it's going to grab a reference of a button. Ted Holmberg: And then the guest button from the html document and it's going to set up the
event listener so on a click event it's going to invoke a button of them. Ted Holmberg: there's callback function so on the event that a button gets clicked this will happen, so what happens here is. Ted Holmberg: we're going to grab from our document the gas tax text field we're going to assign that to this number variable. Ted Holmberg: And then we're going to invoke the guests number of functions from our model right our controller is going to now send this number two the model where the mod
el is going to process it. Ted Holmberg: And then send out methods invoked methods to our view so that we can see how we can, process them excellent so all of the all of the management of inputs handles and controls of the management of the game logic is now and models so now let's update our. Ted Holmberg: Our views. Ted Holmberg: Okay, let me copy that. Ted Holmberg: And let me go into my views here and it's great. Ted Holmberg: That looks great. Ted Holmberg: that's all over the place in Cypr
us there OK now let's see here, this is there. Ted Holmberg: Is there. Ted Holmberg: Is there Okay, so now let's take a look at what's happening now, only the math. Ted Holmberg: The only thing that's going to exist in terms of my views thoughts as files can be those functions. Ted Holmberg: That actually do mutations or updates or rights to the html elements, so I have a print attempts remaining that given some number of trials. Ted Holmberg: will go ahead and grab that html element that manage
s the attempts text, and it will update it with the new number of trials be introduced him i'll have it. Ted Holmberg: i'll have a function print clues that, given the status of the game and the end the the current gas, it will grab the gas and then. Ted Holmberg: we're going to do this, trying to marry, it is so like conditional operation so we'll say if the status of the game if the status of the guests was highlight right because that's what gets determined here. Ted Holmberg: For print clue
if the gas is high, then it's going to print ah ah, otherwise it's going to it's going to give it out oh so we're using that as a way to manage state. Ted Holmberg: Inside of our game system, so if the state is it was a high gas, then I will return back a message I will over. Ted Holmberg: To clue right we're creating a variable that's going to have one of two messages, so if the state of the. Ted Holmberg: Gas was hi i'm going to send this list item that says Oh, because it's too high, and if i
t if it's not this, then that means the status is low. Ted Holmberg: Then I would set to clue a list item, where the gas is too low and then whatever this is it's either going to be one or the other, I will append this clue into the clue text on inner html. Ted Holmberg: And for the print came over status are going to get again a status that's represented as taxes either let's look at the model. Ted Holmberg: As either win or lose based off of these two states aren't have to decide what the outp
uts going to be so, if the status is when. Ted Holmberg: Then i'm going to create a message that's going to be this heavy message, and this this paragraph right you when you got it in this amount of attempts. Ted Holmberg: Otherwise i'm going to create this other message you lose the number was this Pascal and. Ted Holmberg: message is going to have a value, either from this effort else right I just see they're going to be this or that so, then what we're going to do is go into our document bodi
es inner html and then just. Ted Holmberg: override the current value of the html with this new message, so this is the exact same code, but arguably it's much more readable it's much easier to arm to have an expectation of where inside of our code base these actions are happening that. Ted Holmberg: In order to be able to refactor it later and complexity. Ted Holmberg: excellence and then now the next thing last thing we have to do here is we're going to have to go ahead and. Ted Holmberg: Add
in these uh. Ted Holmberg: These scripts into the index dot html so let me go to index, so I don't eat game anymore right we've completely replace game with this model view controller. Ted Holmberg: So there we go, so we have view model controller perfect. Ted Holmberg: let's go back. Ted Holmberg: Okay, so now let's actually test it out let's play the game and see if it works, exactly as it was working before so i'll go here i'll refresh and lock it. Ted Holmberg: Was this grips tools such as i
s not found let's make sure I named that the appropriate thing oh controls. Ted Holmberg: Control here we go and make sure, things are named appropriately, this is why we test excellent just test this out 500. Ted Holmberg: yeah that looks good perfect okay. Ted Holmberg: And let's test the win Well, I can access pass code from here, what is it 649 yeah okay yeah we went OK, so our when works our lead boss works and our clues works. Ted Holmberg: Just make sure it works with scissors or zero num
bers to La let's make sure this works yeah okay perfect so again too low or too high. Ted Holmberg: So the next thing we want to do, then, now that we have refactoring our code base where all of the instructions are on one script so that is now managed between a model view controller build. Ted Holmberg: let's move on to refactor our user inputs because recall another purpose of this build is to make our inputs more fault tolerant. Ted Holmberg: So the new ui improves the precision and shares va
lid input, so the scheme that we're going to use is based off of the combination lock so think of a combination log where you can rotate a. Ted Holmberg: A digit from zero to nine and you're given a set number of digits you can rotate so you're restricted to 000 all the way to a 9999 so we're going to use that same kind of metaphor, which means that, instead of. Ted Holmberg: Instead of having one number we're looking at will essentially have to build our guests number from the kind of concatena
tion of the individual numbers, the hundreds, the 10s and the single digit. Ted Holmberg: So, in order to do this will have to refactor the text input tags. Ted Holmberg: of our html so that that is updated appropriately, so let me go over here. Ted Holmberg: into my html perfect so where I was just giving this one text here, where you can put it in number i'm instead i'm going to define a div that's going to be three. Ted Holmberg: Tax I mean three input fields of the type number where i'm goin
g to assign a minimal value of zero a maximum value of nine and the initial value of zero and then i'm going to give these ids because i'm going to have to be able to grab each of these individual values. Ted Holmberg: Inside of my javascript so i'm going to say that this is digit 100, this is the 10s digits, and this is the one stitch that this represents. Ted Holmberg: Okay. Ted Holmberg: So, then the next thing i'm going to do is I then have to go refactor my code inside of my button event be
cause my button event is the thing that's responsible for grabbing that. Ted Holmberg: Okay, so let me go. Actually. Ted Holmberg: i'll just grab this entire function, since this has been weird Okay, so let me go into my controllers. Ted Holmberg: chatting let's that doesn't exist anymore, because it's this. Ted Holmberg: Okay let's go here perfect and close this okay so let's go on to control note um but event yeah it was better than we wanted to yeah modify so. Ted Holmberg: So aren't going to
so the new version of the event is going to grab the hundreds. Ted Holmberg: input fields i'm going to grab the 10s i'm going to grab the ones, and then i'm going to concatenate that so i'm going to build my number, by taking effectively string and concatenate it. Ted Holmberg: With whenever values from the hundreds plus whatever values from the attends plus whatever value is from the ones, and then i'm going to pass that newly assembled number into guess number. Ted Holmberg: Now what's nice a
bout this is because we separated this into the model view controller scheme. Ted Holmberg: All we have to do is modify our controller, for this to work we don't have to change any logic inside of her model or view so to get that refactoring We just have to make those two changes the. Ted Holmberg: Changes to the actual index dot html and then the logic, for how we piece that gets together, so if I refresh here now, I have this whole new input scheme notice now I can. Ted Holmberg: Okay, so I co
uld do five I could you seven I can do for right, but now I can ever go more than three digits I can never do negative digits and i'm not allowed to put in any letters, so now, I have this fault tolerant. Ted Holmberg: Software scheme where it's hot, it has to be a valid choice based off of the rules, so this has improved the usability and the the full tolerance of our software. Ted Holmberg: Excellent. Ted Holmberg: So now, the next thing we want to do for this goal is, we want to define a clas
s called gas, and so the approach, for this is, we want to model, a gas as a class maintained by the model that the viewer that the view controller can reference. Ted Holmberg: And so here let's take a look at this. Ted Holmberg: And so the idea behind this is, we want to be able to update. Ted Holmberg: We grabbed, so let us go to our source code. Ted Holmberg: let's go into our. Ted Holmberg: index html here we go so above. Ted Holmberg: Okay, so above the the. Ted Holmberg: The input fields h
ere i'm going to create these plus button so i'm going to create three buttons. Ted Holmberg: That i'm going to give the ids up one hundreds up tensing up ones, because I want to instead of instead of having to put in those numbers, with the keyboard right. Ted Holmberg: Remember the other specification that we were going to do in this improvement was to add buttons that allow us to increment or decrem a detriment each of the individual values, just like you can do on a combination lock. Ted Hol
mberg: So that we can play this on using a mouse or using a mobile phone so i'm going to create a div to ness three buttons together and one is to represent the hundreds field, one is the 10s fields and one is the ones field. Ted Holmberg: And then, what we're going to do is we're going to disable our texts, the actual input fields that were displaying in so that you can't. Ted Holmberg: use those as inputs we're going to we're going to set it so that one, these are just for our view. Ted Holmbe
rg: And that, no, no, not these, these are the buttons we want these the things that are represent that are showing off the number we're going to change to just be view items as effectively and all of our controls into our model are going to come from the buttons so i'm going to disable. Ted Holmberg: i'm going to disable these text fields are these number of fields, so that we can only mutate them from our javascript code, so that the user can mutate, the state of them. Ted Holmberg: And then i
'm going to i'm going to update and add this gas js we haven't made yet, but we're about to so in order to get that into important into our javascript runtime i'm going to have to do that, and the next thing we're going to do is we're going to go ahead and we're going to. Ted Holmberg: Create our guest Jay haas. Ted Holmberg: And that should be in here that us get that they're excellent. Ted Holmberg: And then for guests js when i'm going to do is let's read through what its gonna. Ted Holmberg:
How it's going to manage. Ted Holmberg: that's very true. Ted Holmberg: Okay let's see here yeah the sun has gone into an. Ted Holmberg: advantageous position for me okay. Ted Holmberg: And I guess I need So what is happening inside of gas let's take a look at it. Ted Holmberg: So inside of my gas class i'm going to have a constructor my and my constructor will allow me to go ahead and construct an instance of all. Ted Holmberg: of gas it's going to start at with the hundreds place of zero atte
nds place of zero and a ones place of zero so we're actually going to create something that can track the individual values of hundreds 10s and one's. Ted Holmberg: A to string method will do effectively what we were doing before or will take an empty string and then we'll concatenate to it, the hundreds place the 10s place in the ones place so I can build. Ted Holmberg: The unified number and then i'll return that and then i'll create an increment method that will go ahead and I I. Ted Holmberg
: I really liked this implementation, I think this is a clever way of showing you how you can use a arm the box notation they like kind of a re notation or dictionary notation inside of an object to do interesting things so for increment we're going to take a key. Ted Holmberg: And we're going to increment into our keys whatever this is we'll be able to go, so if this is. Ted Holmberg: Like our hundreds or 10s or ones right we'll be able to go ahead and access that value and will read, whatever
that value is currently we will add one to it, but then we'll also modular step by 10 so if it goes from nine to 10 that will moderate back to zero. Ted Holmberg: So this will be a simple function that we can define that lets me increment the value and I see it's. Ted Holmberg: let's say it's 318 four so if for any reason you can't stay any longer for me to complete out this goal, then I will make this video available, so if you have to leave. Ted Holmberg: Obviously that's Okay, but i'm going t
o continue this out just so that solid in one video to make it easier for those who are watching these afterwards. Ted Holmberg: Anyway, so I have my gas here my class gas, I have the ability to construct it again, I guess, just manages the data that we're going to be comparing to our past code and so we're going to find out a method by which we can. Ted Holmberg: change or mutate, the state of our guests OK, so now that we have that defined let's actually go ahead and use it so let's go into ou
r model. Ted Holmberg: And instantiated instance of a gas so we'll go into the model here, and here we will instantiate an instance of gas. Ted Holmberg: And then the next thing i'm going to do isn't going to refactor then inside of my view js the print digits. Ted Holmberg: I don't know if I actually have that, though, maybe it's just a refactor if it doesn't exist, I guess i'll add. Ted Holmberg: let's go into views here printed just know I have print attempting remaining print clue and print
game over so i'm going to add a new function is going to be called print digits. Ted Holmberg: And what print inches it's going to do is it's going to access each of those values from the. Ted Holmberg: input fields, from the number of fields that we made, and it will overwrite the value with the value from the gas, which is the hundreds. Ted Holmberg: The value from the gas, which is the 10s and the value from against the gas, which is the ones now notice for this particular application. Ted Ho
lmberg: I didn't leave these to be in private right, so I I allowed these to be public, which means I can easily just be referenced them now, if you want to use encapsulation I would use get methods here if it were private just but I didn't bother doing that, with this lab. Ted Holmberg: Okay, so now we can print the digits into our html page, so the next thing we want to do is, we want to add a callback function. Ted Holmberg: to increment the gas and print to the view So here we go so. Ted Hol
mberg: we'll call this an increment event, so this is going to go into my controllers. Ted Holmberg: So inside of my controllers, I will set up this increment event which will be given a key. Ted Holmberg: And that key will be passed to my guests instance right that exists inside of my model to go ahead and increment it. Ted Holmberg: So, remember that mutates the state of one of its variables hundreds 10s or ones, and then it's going to tell it to print those digits and we just implemented the
digits method that's inside the view. Ted Holmberg: say now i'm going to update inside my controllers this. Ted Holmberg: In a controllers function so let's go here let's go to my. Ted Holmberg: This function here that's responsible for initializing all the controllers so here i'm going to grab a reference of the guests body. Ted Holmberg: And i'm going to ongoing register that with my event listener, for the click event like we're doing before, but then afterwards i'm going to go ahead and i'm
going to grab references of the up buttons right the up hundreds attend the up ones. Ted Holmberg: And i'm going to add click event listeners for those to. Ted Holmberg: see a multiple click events, but all registered on different html elements on a click event here if a click of it occurred on this particular html element. Ted Holmberg: Then we're going to create an anonymous function that we're going to pass as a callback function, the reason why we're doing that is when we register callback f
unction, remember, we have to do a function. Ted Holmberg: object and not an invocation of a function. Ted Holmberg: But on this instance we want to register different behaviors so the callback function we're going to do here is there's no parameter but it's going to invoke the increment event this one with the with the term hundreds. Ted Holmberg: Now, remember hundreds, is the instance variable name of this so when this is passing as the key ID reference the hundreds. Ted Holmberg: Value here
right, I can access and override this variable by accessing this instance using the this keyword and then I can actually access it's instance variables using the block notation. Ted Holmberg: Using the the square brackets and then passing in a variable name here as a string right, so this is an. Ted Holmberg: interesting way of me, creating instead of having an increment hundreds increment 10s and increment one's mouth that I can compress that to be one method and accessing it instead of using d
ot notation bracket notation. Ted Holmberg: Anyway, so what i'm going to do here is, I will pass hundreds in here, and that will get passes the keys that will increment the hundreds value this would increment the 10s value this would increment the ones value. Ted Holmberg: Excellent so now let's go into Lastly, my controllers and my number instead is going to always come from our guests instance called. Ted Holmberg: willing to to string or button event, so let me get to my button event. Ted Hol
mberg: Yes, so here it's just going to be gas dot. Ted Holmberg: o Ted Holmberg: To string. Ted Holmberg: Excellent. Ted Holmberg: And let's see here. Ted Holmberg: let's test that out. Ted Holmberg: And now notice, I now have the ability to see these buttons if I click yeah look. Ted Holmberg: I can now increment. Ted Holmberg: This and then it goes back to zero perfect and I can increment this one, and I can increment this one, and if I submit is actually going to read that a 753 so now the im
plementation still works, just like normal, however. Ted Holmberg: However, now, these are disabled, this is all I can use these as viewing right and the inputs actually entirely rely on arm on these button presses. Ted Holmberg: Of course, this isn't quite done for that that goal, the last thing we would want to do for goal number two. Ted Holmberg: would be to do effectively the same thing, but also add some document buttons and so i'm just going to quickly do that just to finish out here. Ted
Holmberg: So let me go to my index dot html so just like I have these increment buttons underneath. Ted Holmberg: My disabled display of numbers i'm going to add in another city div that's going to have three different buttons that are going to have the value minus sign. Ted Holmberg: And i'll give those ideas of down 100 down 10s and down ones represent these are my detriment buttons for the hundreds place the 10th place in the ones place. Ted Holmberg: I guess, let me save this year. Ted Holm
berg: And then inside of my gas class, I will also add in a detriment. Ted Holmberg: method so here which will look not too dissimilar I will take any key of either hundreds 10s or one's a use that to D reference the instance variable and then what i'm going to do to assign it is i'm going to look if the value of that key is great. Ted Holmberg: bigger than zero to nine right and this allows me to rotate it down so i'll go from nine to eight like three to 222110 but then zero to nine excellent s
o now that I have that. Ted Holmberg: let's go ahead and wire that opt into our system so in order to do this, let me go ahead and create a detriment event. Ted Holmberg: As a callback function inside of my controllers so just like I have an increment event i'm going to create a detriment event. Ted Holmberg: perfect and all that does is it's going to grab the key and that key will tell the instance our guests instance the detriment based off that key and then it's going to print, the new set of
digits after that. Ted Holmberg: Okay, and then, what I want to do here is. Ted Holmberg: I want to go ahead into my controllers and into my inner controls and actually initialize those new event listeners for those buttons that we set up so here. Ted Holmberg: Let me have this all over. Ted Holmberg: So here i'm going to grab the references of those three buttons they down one hundreds, the down tense the down ones. Ted Holmberg: i'm going to actively the reason i'm doing this, I want to eat I
nvoking this stacker event using a very specific tech it's passed in based off of what it is so if it is the. Ted Holmberg: Hundreds button, then I want the key to the hunch if it's the 10s button, I want to be the 10s but since I can't do an invocation now and what the. Ted Holmberg: implication to happen with the click event occurs that i'm going to pass this anonymous function is an honest fat arrow function that when it gets invoked it just does the detriment, using the parameters I want tha
t's what's happening there, just like only increment. Ted Holmberg: OK, and then let's test it out. Ted Holmberg: Okay, let me refresh and now I have a new set of buttons I have the plus buttons now, I have the minus button, so now, I can not only go up. Ted Holmberg: But I can easily document it down and if I go from nine and this this gives me the same kind of behavior you would have on like a combination lock. Ted Holmberg: And now, this is a much better implementation right, so we started wi
th an NTP build. Ted Holmberg: And then we refactored to have a similar gameplay experience but we divided our Code into a model view controller, and you saw how much easier, it was to start mutating it and making it better we identified that it wasn't fault tolerant. Ted Holmberg: That we could put faulty data in there, so we locked that out. Ted Holmberg: You can't no longer mutate, the actual number here, you can only control it from these buttons, which means that this is a universal type of
input scheme that would work well for computers or mobile phones. Ted Holmberg: And you will always have a valid state for our gas, so this is yeah this is looking good, this is, we had all of our specifications for this build. Ted Holmberg: We hit all the specifications we want from this build. Ted Holmberg: Up sound a little bit. Ted Holmberg: um Okay, so let me see here. Ted Holmberg: And I think that that is the end of part two, so the last thing we would do for this and actually it's just
see. Ted Holmberg: think we have a couple more so, what we'll do is we're going to finish this lab off at the on gold three on Tuesday. Ted Holmberg: And so i'll cut off the gold one and go to though for today and make this available, so thank you for for staying and watching and will complete this lab at the beginning of next week. Jamal Seder: Thank you have a good day oh. My. Ted Holmberg: God. it's it. Now, having. Ted Holmberg: yeah that's exactly what i'm looking for more. Ted Holmberg: St
op recording.
Comments