 Okay, this this series is doing the same program in a few different language. It's something new I'm trying Hopefully these aren't too long because most of my tutorials I try to keep down to you know This is how you do one simple task. We're here. I'm actually running out of program to to find out your odds of winning at a Game of toss up if you're not familiar with the game toss up Please be sure to watch the intro video to the series Hopefully there's an annotation up on the screen right now Click on that go to the first video in this series and it will explain the game of toss up and what we're trying to accomplish here But basically it's a game where you have a certain number of dice starting with ten but each time pulling some away depending on how many greens you get and Every time you roll you continue you can choose to continue the game if you want and gain more points But you also anytime you roll a red die without rolling any greens you lose and you lose all the points That you were collecting so what are your odds with a certain number of dice of losing well We've already done this program in both Bash and see this week and now we're continuing doing the same thing in JavaScript So we're gonna create an HTML file here Throw it you know get some user input and pass it to a JavaScript So I'm going to use Vim as my text editor. I'll just call this toss up Dot HTML and I'm going to create the HTML tags and my header tags here and My body tags here Let's oops, you know, I should probably do this properly Okay, and inside our head. We're going to create a script. Actually, let's first get our user input here So I am going to create a div tag here div ID equals Output and We're going to leave this div tag blank because this is where our Output is going to go when we run the script next. I'm going to create another div tag and I'm going to Give it an ID of Input because this is where we're going to be getting the user's input from and then we're going to ask the user please enter a number Rolls, so this is the number of times we are going to roll the dice We'll get the input type equals text Although with HTML5 we could set that to an a integer input But we'll just it doesn't really matter too much So we'll just use text Next I'm going to say enter number of dice And we're going to get the input. So we're just using once again text fields here To get the user input. Obviously if they put in something other than a number It would cause problems. So it would be best if we were to use a number input We'll change that in a minute maybe Stick in with the notes though. I try to stick with my notes while doing tutorials or I tend to screw stuff up so Here we're creating a button and that button will roll the function roll which we'll create in a moment and We'll just say run simulation And then close our button Tag there, okay We'll save that real quick and what I'll do is I will Bring over here. This is the folder. We're in there's our toss up and there's the user input and But the problem is Doesn't do anything yet, and if we type numbers letters like this strings instead of Integers that's going to cause problems But not really a concern. Once again, this is more of a tutorial than actually writing out a program So inside our header tag, we're going to write our script tags here and then we're going to create our function function Roll which is what we're calling when we click our button down here our simulation button Let's put our Curly braces there Next we're going to create some variables. We'll create a variable called rolls and that Variable will be set to whatever we put into our input down here so to get that input we're going to say Document which is our entire HTML page basically and we're going to get an element from our page by its ID and That ID will be rolls which It's checking IDs and this has the ID of rolls and we're going to get from that the value So whatever's inside that text box and put it into the variable rolls We're going to do the same thing with our number of dice here. So dice num equals document dot get element by ID And this time we're going to say dice underscore num which we indicated down here So it knows to look at that input box and we're going to get once again the value Inside that box next we're going to create a couple variables wins which will set equal to zero Lose for the number of losses zero Green equals zero Red equals zero and Die equals zero So all those are starting off at zero because so far we haven't lost one rolled a green or red next we're going to take Create a an array called dice. So you say dice new array And we're going to put inside that array six strings Because there's six sides to the dice and There's always one red two yellow and Three green So we have our array which is our dice with six sides And then we're going to say document Dot get element by ID That would be our output Div tag which is currently blank But in case we want to run the simulation more than once we're going to set the inner HTML of that equal to nothing So if we run the simulation a second time it will clear it out before we start rolling Which is what we're going to do now. We're going to say We're going to do a for loop or say for I and I will equal the number of rolls and We're going to say then to check the number of rolls the the value of I and Make sure that it is greater than zero and Each time we loop we're going to subtract one from it So if we say we want to roll a hundred times we'll start at the value of a hundred each time it loops subtracting one and once it is less As long as it's Once it's less than one so it's got to be greater than zero it will stop once it Let me say that again It will go until it equals zero or less What you never should because we're subtracting one each time Then with inside that so that's our number of rolls now. We need to roll each die for each roll So why equals dice num and The actual game of toss up you're gonna have a maximum of 10, but if you want to run the simulation with a thousand you could But that would take up a lot of screen space So now why as long as y is greater than zero Do this loop and each time it loops y minus minus so y subtract one Now that we have that we're going to Choose a random side of the die each time we roll a dice Which time you roll a die? So we're gonna say r equals math dots floor math random Persu asterisk six so that's saying We have a die with six sides pick a random number Basically, it's it should be zero through five, but it'll be six numbers there So now we have that we're gonna say die equals dice Random so here we're saying Set the die that we're rolling equal to the array dice with a number here, which would be zero one two three four or five Now we're going to say document dot element or get element by ID And once again, we're gonna look at the outputs because that's what we're going to be modifying and we're gonna now set the inner HTML plus equals die plus comma space So I call in so we're gonna take the value of dice see the plus equals means take whatever the inner HTML Or is which the first time we loop will be blank And Set equal to whatever the die is so it'll be a color red yellow or green and put a comma and it will do that Each time we roll a die and now if the die equals Green Then we're gonna take the variable green and add one to it which we set up here Set to zero when we start off now else if The die equals Red Oops, that should be a and if you watch the other tutorial the reason we're saying Else if rather than else is because we could roll a yellow and they are They don't make a difference in what we're trying to figure out here because only greens and reds matter In what we're trying to figure out Okay, so now we got that We're gonna add one to red each time we get a red Now we're gonna say Document Dot get Ella. Oops. Yep elements by ID once again Output Dot inner HTML Plus equals and here we're gonna say line break This is just like if you watch the C code tutorial us putting in the new line character Basically, we've already done our first roll with however many dice and now we're getting a new line of output But we also need to check if at any point at in any role we have greens equals zero and And Red is greater than zero because anytime you roll a red with no greens you lose So anytime that's true. We're going to say The variable lose add one to it whatever it is And then we're gonna say Else We win And and in this game when I say win doesn't necessarily mean we got any points. We just didn't lose which means we can roll again Okay, and then we also need to reset our variables here of green equals zero and Red equals zero before we loop again So We've now done all our roles We've shown the output of each role as a new line in our output div tag Now we are going to show the totals. So what we'll say here it will say document get element and really I could have Created something so I don't have to type this out each time and especially if I was using jQuery I could have shortened this up a bit but output that's inner HTML And I'm going to just go face-to-face because I'm going to do this three times We're going to say that the output Now equals whatever it already equals Plus New line and then we're just going to draw a line like this Just to make it a little bit easier for the user to read Here we're going to say plus equals wins and Then display the number of wins in the win variable That's again another new line here and plus equals Losses colon plus lose plus New line and of course if we're printing out a bunch of stuff That's going to fill up the screen and we're kind of interested in the bottom line anyway So now we're going to say window dot scroll to to And we're going to say zero comma Document body Dot scroll Height So basically it's going to scroll to the very bottom of the document From the all the way to the left and if I've typed everything right and we save that and We go back to Our page here, I will refresh I'll put the number rolls set to a hundred number of dice. I'll say five and I'll run the simulation and Nothing happened. Let's bring up our console here hitting F12 in in Chrome Oh here it says roll is not the fine. I know that problem because the variable should be rolls someplace. I forgot an S There's also another issue some place else And I Equals red Okay, I'll look at that one here in a second. Let's see Well quickly I'll go back to my console here These are just typos on my part I would saying that rolls not Roll function Roll Let's see. Let's see Unexpected token else if oh because I didn't put the closing bracket there was here There we go that fixes that problem, let's run this again 105 Run simulation. Oh That was my only problem. I just messed things up by not closing that if then statement properly So here you can see each roll and of course you could color-coat those too while working here in HTML I'll run the simulation again. I think I got the same output there. Let's run it Let's roll six dice each time one two three So it's about the same speed as the bash probably a little bit slower Don't really have any way that I know of timing the script But there we can see The output each roll you can actually see what each roll generated and a number of times of wins and losses Rolling a hundred times. You can easily see the percentage. We can also do a thousand times. Let's roll that And again toss up the odds are pretty much always in your favor, but you will lose occasionally So rolling a thousand times here is taking a little bit Oh, you know what? This is slower than the bash because the bash when I timed it I believe I did a thousand rolls and it took three seconds and here in JavaScript in Chrome on my machine rolling a thousand times only six dice, which in the bash test I did was ten dice Is definitely taking. Oh There was an error box of some sort there. Yeah kill the page So obviously just showing different languages here Obviously writing a program like this in something like C is Much more efficient than bash and writing something in bash It's much more efficient than writing it in JavaScript when it comes to crunching numbers like this So we're good if we're running, you know a hundred rolls ten times But I obviously would not recommend running a thousand rolls in this JavaScript But the nice thing about the JavaScript is I can throw this up on my website or load it up on my phone And when I'm playing the game and I want to know my odds, I'm gonna break out my phone and type it right in with ease so Pluses and minuses to each language And again, I'm probably not the best JavaScript programmer either. So I thank you for watching though Please be sure to check out the links in the description one should be a link to this code So check that out if you haven't watched the other videos in this series click on the annotation on the screen for the playlist and Also visit my site films by Chris comm. That's Chris the K also, you know Be sure to let me know what you thought of this week with these tutorials writing scripts in a few different languages Thought about doing this a few other times probably not something I'm gonna do regularly But I might do occasionally if you guys are interested in just seeing how things are done in different languages Even though I'm not the best at all these different languages And the similarities in way things are done I found writing this JavaScript code was fairly similar to writing the C code even though the way they run are completely different So once again, I thank you for watching and I hope that you have a great day