Choose Your Own Adventure Game with JavaScript

it's brittany again and today we are going to be getting into a little bit of javascript so we're going to start off by making a really simple choose your own adventure game most of our programming code is just going to be us actually writing the story so it should be a lot of fun let's get started first thing we're going to do is open up my folder here i named it choose adventure i created an index.html remember that is the default file that a browser will look for for the home page of your site and i created a css file just to make it look pretty it's not necessary the only thing you really need is html and javascript for this but i always like to make my things look pretty then i have a js.js file the dot js says this is javascript so the first thing we're going to do is we're going to be setting up our html just going to start off like i start off any other html document html and then in our head tag here we are just gonna oops that's not how you do that all right head we're just gonna do our character set you know i'm just gonna copy this over if you want more detail and all this stuff you can look at my other videos but this is a mostly javascript focused video so i might be copying a few things over just to save time just so we can get right into it right and so we're going to be linking to our style sheet in our head tag so this is going to point to our css.css file over here link relative style sheet to tell the browser that it is a stylesheet and just because i want to be super fancy i pulled a font from google font called inconsolata because i thought it looked similar to an old computer-based font but it was a little more readable than some of the other ones i was seeing so google literally just gives you this information to copy and paste if you choose to use a google font so don't worry about having to memorize all that and this pre-connect here is a new thing google has added to its fonts to help them load faster in the browser okay so we're ready for our body tag i'm gonna try not to get too ahead of myself here i like to have a wrapper div this is going to be for styling reasons but i'm going to set up my wrapper here i named it wrapper it is not a particular kind of div you can name it whatever you want and then we are going to make a form we're going to put all of our information in this form and we're going to give it an id of the adventure so i did camel case here it doesn't really matter for ids uh i did camel case just because it's going to be a theme in our javascript and then what we're going to do we're going to do something that's going to look a little weird after all that we've learned but we're going to put an empty paragraph tag here with the closing paragraph tag you probably remember and we're going to put an empty field set here so this i'm just setting up for our javascript portion the javascript is actually going to populate these areas with information from our choose your own adventure story and in our story if you recall how they work you need a continue button after you've made your choice so we are going to make a continue button so i want to show a couple different ways of how to tie javascript into buttons this button is actually going to be a link i'm going to give it an id of continue button these ids can be named whatever you want but it's important to be consistent because you're going to call them in your application later and we need class of continue this is just for styling reasons and of course can be named whatever you want so here i'm going to actually write a little teeny bit in javascript i'm going to write javascript void zero and end with uh a semicolon i almost wrapped in with semicolon very important in css and javascript semicolons are the bane of your existence because you forget them everything breaks so what i just did was i made this link instead of having it reference something like we've done in the past i used it as a placeholder so when this link is clicked that indicates that an action is supposed to take place that's connected to this link and we'll use the id to identify it that way i'm just going to say continue because we want to continue our story with this link and then on the left side of my form i think i'm gonna want a button and i am going to call it reset button so we can start over and play our game as many times as we want without having to actually refresh the browser and i'm just going to leave this as a normal little button for now because we're going to i'm going to show you how to tie your application to it to make it actually function later all right got our form set up last thing we need to do is we need our javascript so you might be thinking that maybe we'll call our javascript in the head tag but actually that is not what we do with javascript so javascript can sometimes be a bit weighty and it can take over the and and stop your page from loading so it is best practice to load javascript right at the bottom before your closing body tag and to do that you type opening caret script src equals quotes and then our file is javascript.javascript but you would just go to wherever your file is located if you have it in a folder i've showed you how to find that and then we got to close it with a slash script i have an add-on that does this automatically for me all right looking good let's see what our browser looks like apologies for my dog's interruption they do that to me every day all day so this is what our game looks like so far and it doesn't do much it doesn't even look nice yet but we're gonna fix that with some css so the reason i want to get some css going before i get the javascript going is just because i want it to look nicer as we're testing this is a perfect personal preference for me of course you can do it in any order you want i always like to start with html first so i can hit the ground running and start start testing my application right away so let's start with some css some people who make videos based around javascript skip the css part but i really feel like if you're learning you you should learn everything right i feel like they're kind of robbing you of some information by not going over the css so this might be review for you but that's okay because practice makes perfect right so we got our body here and we're gonna give it a height hundred percent give it some margin of zero we gotta reset some things browsers automatically put margins and paddings and things and i'm going to give it a background color of this brown i have already selected from color dot adobe and i'm just doing plain css this isn't fancy sass but here's something cool that i don't think i've talked about is doing a linear gradient which is css no pictures pictures take time to load you know this is faster so to do a linear gradient we're going to go background and then linear gradient literally that's one of the things i love about css it literally does the things that it says it's supposed to do and so i'm going to start off with a nice forest green and i want the gradient to end at that brown color that i used before let's see how that looks i'm excited about it very foresty yes nature and that is how to do a linear gradient pretty simple huh there's more things you can add to it to make it even fancier but i'll let you look that up if you're super interested right so i'm going to set a default font size of around 18 pixels um this particular font that i'm going to be using let me just show you font family i don't know if i'm saying it right apologies if i'm not there's a mono space font model space sponsor the more computer-y looking fonts see it's kind of hard to see with the continue button here we're going to change those colors don't worry but the font is a little close together so i am going to increase the space between the letters and it's called the letter spacing and graphic design this is called tracking and just point five pixels not even a whole pixel i think that'll really help make it more readable i'm gonna make sure the font's not oh really heavy we're gonna make it regular 400 and we're gonna make it a lighter color so it's easier to see in our dark green and brown background all right that's good for the body let's work on our wrapper i'm gonna give our wrapper a width of a hundred percent a height of a hundred percent and then we're going to use flexbox to make everything centered i believe we've gone over flexbox we're going to display flex realign everything in that flexbox centered horizontally i always mix the two up then we're going to center it vertically as well with just by content i believe apologies if that's incorrect i always mix up horizontal and vertical it's a weird thing so then we're going to style our form and let's make our form have a maximum width of like 600 pixels this will also keep any text inside our form from getting way long and unreadable it's a general rule of thumb to keep a character account of around 70 to like a maybe pushing in 90 characters to make the text optimum readable it's not a sentence but you know you know what i mean i'm going to give it a maximum height of 400 pixels and we're gonna give it some padding so everything's not pushed up to the edge of the form and this is shorthand for padding 2m which is going to be 36 pixels because twice this all around uh top right bottom left let's see what's going on yeah it's a little better huh you'll notice this is still blue that's because it's a link and i only styled text to be white it's getting there it's getting there in the betterness so when our text is populated in that p tag i want them to look nice too so we can't really see this yet but i'm going to want a margin of 18 pixels i'm going to do a font size 1m and then i'm going to add a line height nice big line height 1.5 m we want lots of space lots of breathing and then the other thing we're not going to be able to see right away is the field set you'll notice i don't need dots or anything for paragraph tag or field set or form uh they're just standard part part of html these are things i need myself and since an id it needs a hashtag just a little bit of review i know you probably know this already yeah bringing you a minor amount of 28 pixels lost my train of thought there for a second no padding we got enough padding got enough of that and no borders this is these are default styles that i'm overwriting right now and now we're going to style that link and we named our link if you recall continue the classic continues that's what we're going to call right now so our link was a class of continue so none of the other links get um targeted with this styling i'm gonna give it a font we're gonna make a little bigger so it's easier to see 1.3 m and we want it to be fancy and we want to look like a button so we're going to give it a background color of this lighter color here so it'll really stand out against that dark background that i made when you give it a color of that green color and we're going to give it some padding so it looks like a button okay here's a different shorthand 0.5 m for the top and bottom and the second value 1m is going to be for left and right so you don't have to type out all four values if you know that you want top and bottom to be equal and left and right to be equal most of the time you use this four buttons and default styles will add an underline under a link so i don't want any text decorations there none let's see oh yeah that's good much better so buttons have interactions right what is going to happen to this button when we cover nothing right now because we haven't said anything but when we want when we're hovered over the button or when the button is is uh focused you know this isn't even a hover because i didn't put it in there we go focused like sometimes when you click on a button you'll see briefly different type of styling that focus will style that so you don't see anything that uh you don't want to see give it a background color of this nice tan color i found and we'll keep the color dark so we can see it against this tan a dark brown color i believe that is awesome but what i actually want is i want um the continue button to be all the way on the right so i'm gonna add a float to it real quick alrighty let's work on that reset link so it's not this ugly little thing that's the default styling for buttons so button dot reset that means it's only going to target my button here that i gave a class of reset and we are going to give it a transparent background color and we just say transparent instead of putting a hex value in there so the funny thing is is i'm making my link look like a button but i'm making my button look like a link isn't it silly i'm just full of silly things no borders we're gonna make it all nice white colors so it'll pop and we're gonna have to set it to inconsolate i know i said it in the body but as you can see it is not in consulate so we're going to force it you do and you be the font that i want you to be give it a font size of 18 pixels and the same letter spacing of 0.5 pixels don't worry we're almost through the css there we go looks more like a link but since it's a link it needs to do something when we hover over it so pretty simple dot reset hover and we're gonna make it this tan color much better all right so the next thing we're going to focus on is the labels in our form so we're actually going to populate these things with our javascript so we're not going to be able to really see what they look like yet but i'm just going to do this so i'm not bouncing back and forth between css javascript index sorry html uh i just think it'll be less confusing that way so let's just get it out of the way now form label spam that's what i'm targeting the label in the form and the spam tag and the label display block so they're going to take up the whole space they're not going to be next to anything box sizing border boxes just a reset value here margin bottom eight pixels our padding short code again we're gonna have top padding of 14 pixels and left and right padding of 12 pixels sorry top and bottom padding of 14 pixels and uh we're going to give it a border of 2 pixels we want a solid border and we're going to make it this tan color again and then when i when someone is in it i want the cursor to change and i want it to be a pointer so the little little hand and then i'm going to give the input fields a border radius i don't know if i've talked about this but this will make the borders curved it just looks cool and bubbly all right so next this is going to be a mouthful form label hover i wanted to change when you're hovered over it just to give more more interaction to it and also when it's focused when you're in it order two picks solid that tan color do i have it pasted so yes it was still on my clipboard awesome and then i'm gonna give it a really light background color and then i'm going to give the text a dark color so it really has a lot of contrast with that background color which makes it more accessible and more pleasant to look at in general okay so our inputs are actually going to be radio buttons but we don't want to see that little radio button uh if you're not familiar with how a radio button looks let's just see if i can do one real quick type equals video i don't know if this is going to do anything forms are not my forte this this little thing that is what is happening we don't want that to happen so form input so in a form if you want to target specific type of inputs like i want to target a radio button specifically you have to use brackets type equals radio closing bracket and that's how you target specific elements of a form and we just want to hide it visibility hidden all right last css properties let's go so in our radio button typing close radio closing bracket when a radio button is checked like what happens when someone selects it the span is going to look like our other inputs i just want consistency and we're going to make that tan border that light background yeah it's basically these three things i'm just going to copy paste oops copy paste and not erase so we got going on it's a big empty thing with two buttons that don't do anything but we're going to make them do things right now with javascript i'm going to try and go slow and i'm going to try to explain everything that i'm doing as clearly as i can but there are resources for you if you're confused about something mozilla has a great great resource w3schools things like that stack overflow i do want to warn you i would avoid asking questions on stack overflow people can tend to be kind of mean and rude to people who are new to code so but sometimes there's people willing and brave enough to ask questions a lot of the times i can find my question on there without having to ask it myself which is nice so first of all we're going to start off with a variable i'm choosing variable because i want to change this throughout our game there are three different kinds so there's variables so as i was saying variables const and let var pawns and let it's going to tell me arabis just want to explain so var is what we were using for a really long time before they came out with es6 which introduced const and let so here's a difference between the three when you're going for introductory web developer positions they'll always ask you about this so var can be changed and updated wherever i can like have some code somewhere else and update the value of a variable and it'll work so this is not ideal especially since you're going to be coding with multiple people it overwrite your your code and cause a bunch of errors const is only accessible in the block that is declared in and you can't update it or change it at all so if you have a variable that you know you're never going to change or update or add anything to const is is your way to go so let is what most people are choosing to use now because it can't be updated outside of its own block of code but you can change it later on in that block of code so outside things can't change it but inside things can so that's why people prefer to use let now i'm just going to stick with good old-fashioned var because the only person who's going to be working on this is me right now but you can use let 2 if that is what you prefer so first of all we're going to start off defining the variable of story and we are going to set this equal to zero uh we're setting it equal to zero because we don't have any value for it right now we are going to populate the value for this later and this setting it to zero keeps it from being undefined and throwing an error in our code next we're going to get our form so all of this with the what i'm about to do with form is something you could just do in your code without declaring a variable it just makes your code cleaner to declare variables and use them instead of typing out this pretty thing document get element by id it's in camel case here this case is very important in javascript i know it's not as important in html and css but it won't work if you have the wrong case so it has to look exactly like this and we're going to get our id if you recall we set our form id to the adventure i'm just gonna copy paste so i don't have spelling errors so parentheses single quotes double quotes are fine too and semicolon right so you wouldn't want to type this out every time you want to call your form it would just look messy that is why we are creating variables so we're going to define our submit button we're just going to call it submit and then the same thing document get element by id and we called it continue button send colon all right we have a couple more here now we need our reset document yeah element by id and we named our reset button reset button reset capital b button sometimes the auto finish thing messes me up and then we're going to need our answer so we're going to do another little fancy thing so our answers i'm setting to an empty string these quotes here that's a string that's text and then there's numbers and there's also things called booleans which are true or false but we're setting our answer to an empty string because we're going to populate it later and our most important variable is going to be storytelling this is where we're going to actually write our story so if you want to test to see if you actually targeted things the way you were supposed to you can always do console log this is a very common way to check for bugs and to make sure you're pulling things correctly so i'm gonna get our form variable and see what it returns so to check this you go to your dom your inspector here you go to the console and they form is reporting except it's uh it's reporting the string form silly me you want to just do the variable so no quotes or else it's just going to print the word out as a string you want it to pull actually in the form and there you go there's our form that's just one way to test your code make sure everything's working or help you if you run into a bug okay so we're going to define the start of our story double quotes start and colon and it's it's going to yell at me the whole time until i do what it wants my first question i'm going to call them questions needs to be in quotes so we can pull this data in later with the colon so this is what it's going to say at the start of our game you set out a brand i'm gonna have a lot of typos new adventure where would you like to go and then we're gonna give our users some options and i'm gonna call these options answers with the colon and our first option i'm just gonna call a you can call whatever you want but i'm going to call it a for clarity reasons for myself and the first option is going to be the forest and then you have a comma to say that you have more things to add if you don't have a comment it won't work colon and we're going to go to a cave end quote comma and our third and final option is going to be a mountain right so these are strings that are going to be pulled in it's our closing brackets here everything is closed no errors are throwing take a look all right cool nothing's gonna happen actually at this point because we're just putting in some data so why don't i do the portion that actually makes the game work i'm gonna go down here and firstly well you know actually i'm going to populate a little more answers just so we can test to make sure everything's working so after we have our first set of answers here going out of comics we're adding more things i'm just gonna leave a little note for myself that this is what happens if they pick the first option option a the forest so the first option a forest let's see what happens question in quotes colon quotes you decide to go to the forest and you meet a kind fairy isn't that nice but we wanted to be like a question so do you dot dot dot and so our options with the fairy i'm gonna have a comment after this and here are our answers it's formatted very similarly to the first thing there's to be a lot of repeating when you're setting up a choose your own adventure story so we got our answers and when it says that error there expression expected it wants me to put in brackets that makes it an expression so first option a ask whoops it's gotta be it's gonna be a string here it's not gonna work ask her if she wants to join whatever that means you on your adventure it's a nice option who doesn't want to paddle around with a nice berry colon option b swat her away like a fly maybe she's an annoying fairy if you replayed zelda navi got pretty annoying option c in quotes colon no we don't want this extra space here boop in between the quotes is our last and final option wave at her and continue on your way just like rpg games there's always a mean option a nice option and a neutral option it's way better okay so now i think we have enough of our story that we can actually test the functionality of our application here so firstly we're going to make our continue link actually do stuff okay some of some of these things are going to get a little funky i'm going to try and explain them as best as i can so our submit button which is our continue button we're going to add an event listener to it with add capital event capital listener and we're going to be listening for a mouse up action on the user's part so a mouse up is when a button on a pointing device is released while the pointer is located inside it so when our so we're going to click our button and release that's what's happening now um and that is the mouse up action and the pointing item means just like a mouse or trackpad so we're making this a function functions are used to tie our tie actions to things and it's always called function this is not a special name that i made up in javascript it gets a little confusing what things are special names and what things are are just part of the code and you have here parentheses sometimes you can put things inside those parentheses to make the function more specific this function is fine the way it is and then we have opening and closing brackets so our answer if you remember we defined our answers an empty string up here i know i put answers here might be a little confusing but answer singular is what we set by default to an empty string so our answer is the form and we're going to do something called query selector all which is going to get all of the elements in our form and uh that match our selectors here that we're going to define so our selectors is input type equals radio we'll recall that from our css and we're going to make sure it's checked if something is selected they can't leave it empty or app won't work right and the default value is zero that's the value now we're getting the value of that so that's what dot value does no i don't want node value it keeps auto correcting me sorry no no no value just value okay so we have this so if our answer is there they pick something we're doing an if statement right now sometimes there's an else statement if you want something to happen if this situation you set up in javascript doesn't happen but i'm not going to do that so if we have an answer selected then our story that we set to zero is going to increment or add one to our story so that's what the continue button is going to do is going to continue the story so we're going to increment the story hope that makes sense and then we're going to populate our form with the story parentheses plus an underscore here that's a space plus the answer this is just uh this is just a visual preference plus the answer got our closing parentheses semicolon we are done with that line so if i want to test if this is working i'm actually going to do a console this isn't going to appear to the user this is just for you in the console unless they look at the console tab story time our story worked so this isn't going to be enough to make our story work i don't think no yeah this isn't enough to make our story work but we got that button there and it's going to do something so why don't we just add some functionality to our reset button this is going to be a little more simple i literally just want everything to refresh when you hit the reset button and to do that i'm going to make a new function i'm going to call it reset form this is going to be important later the fact that i called it reset form and then we're going to get the foreign document dot get down by d i'm just showing you how to do this i could just put form here but i feel like repetition is the best way to learn and then we're going to reset it simply by adding daw reset and so this is a function and it needs parentheses there you go right that should do what we wanted to do so how i'm going to tie this function here to our reset button is i'm going to add an on click event directly to the button on click equals so it's on click attribute and then we're going to call the name of our function which was reset form and parentheses so we know it's a function and it's gotta do things all right that's all we need to do with that now the kind of hairy part of our application i'm gonna try and explain it as best i can so this is the important part we're actually going to generate content from our story answers okay so this needs to be a function and we're going to call this function populate form we referred to this earlier and we're going to give it a property of story here in the parentheses so we're gonna have more variables so our current story referenced up here yeah okay so our current story is going to be our story telling you remember we named a variable storytelling up here storytelling and then the story in brackets so we're going to take values from the story and storytelling if that's not confusing sounding i hope so it's telling me current story is declared but its value is never read we're going to fix that don't worry and then we're going to have another variable of text and we're going to set this equal to an empty string like we did with answers and it's just going to keep telling me that error until i finish my function here so we're going to do a for loop for loops are a bit more of a complicated concept what it's actually going to do is it's going to loop through all of all of the data and print it out i guess that's the best way i can think of for explaining it bar and we're getting a property in our current story getting that element values in our current story answers and we want the answers so that those are the things they're going to populate closing bracket closing parentheses and now we need an expression we're going to yield to you for expression it probably wants brackets might not happen every time but usually when he yells at me for an expression it wants brackets so we are going to do another if statement in our for loop if our current story answers like the first part of the one we just wrote is the same but it has its own property so that's a has method called has own property pretty sure spelling that right always have to check prop and then it's going to want an expression again brackets okay so this line right here has own property prop it's hard to explain it while i'm typing it but this returns a boolean which if you recall means true or false and it indicates where the object has the specified property as its own property you have to think of all of these things as objects and properties which is one of the more complex things to understand in javascript but once you understand that it makes programming a lot easier i think so text remember our empty string text variable where we're going to populate it with things plus equals so we're going to add to it and it's going to equal this all right this is going to be a bit of a mouthful so this is what it's going to populate in our dom this is going to be where the answers live property and then we're going to close it off the property is going to be the the data that's inputted by the user and then there's syntax error here missing a single quote it has to be wrapped in single quotes so this green text here is what's going to be populated with our answers but we're not done yet so we're gonna get our current story we're gonna get the answers from our current story whatever point we're at in the current story and get the properties and then we're gonna add these closing tags this is just so that the html elements are all closed properly all right looks good and by good means confusing but this is basically we're just adding the answers that are being input by the user to our story and it's putting it in the html for us right so we're almost done you'll notice i'm not going here and adding things because we want this all to be wrapped in the same thing we are almost done form query selector similar to the query selector all that we did but we don't want to select all we want to select a a specific thing and there needs to be a dot your form dot query selector not all we're specifically selecting the p tag in our inner dot inner html this just means in our html and we're going to give it a current story our question remember our question here so this is what's going to be in our p tag this is what people are going to see first and the very last line of this not the last line of javascript last line of this program form and then another just simple query selector and we're going to select the field set remember i said in the beginning we're going to use the p tag in the field set for our answers and questions in your html just means our html text so this this empty string here that we wrote all of this stuff to and of course semicolon and i messed up somewhere i forgot a dot here there we go the colors help a lot so if you're using a text editor make sure you have a nice color scheme because all of the different colors here really help me when i'm coding in javascript like a lot great but we want our form to start from the beginning so we're gonna go populate form our function we made up here and we're gonna say start and start as you call is up here and it's always going to be this question first this is what's setting that question to be first every time okay let's see what we have interesting the text isn't showing up just checking over the things that i've done got our p tag here you've got to start here aha i know what the problem is we never ended this the semicolon see if that fixed it and it did not see go to the console see where our error is only one argument okay so there's something wrong in our mouth up function let's have a look bug fixing is part of it so i'm not going to cut this out because it's really important to see but this our form has checked okay looks good [Music] story populate right okay i see here that i forgot some closing here cool yeah so in my haste to write all of this i neglected some semicolons semicolons are the bane of your existence like i said before all right got that that's making sure all of my clothing tags it's still yelling at me that something's wrong value that has a semicolon that has a semicolon there you go so this is my notes because i could not see for the life of me what was wrong with that uh see if this fixes yes it fixed it awesome so uh i am pretty sure i just forgot some closing tags some closing parentheses things like that all right so this is just with my notes an explanation i'll include this version and github github link because it's important to have this information and understand what each piece is doing okay so we've only done the first a couple answers here and uh because of that it's apparently not letting us pick anything all right it's going to force us to write the whole story here we go so you probably don't want to sit here and watch me do all three options i'm just going to do the first one and then i'm just going to paste in the other two uh but i want you to to see how to do all of the options so i'm just gonna make this very quick and very simple comma here because we're gonna add more so for our ending options and call it 2a just for my brain to keep it organized and the question these are just going to be the end answers colin the fairy gladly accepts your offer and you oops you take it time you to have a wonderful day the end that's a nice ending our mini adventure ultra mini i guess so [Music] next to b colon expression this needs a comma here don't forget the commas or everything will yell at you question the fairy turns into an angry lion this is for the swat option and chases you out of the forest the end this is why you shouldn't swat at fairies no matter how annoying they are so comma here because we're going to add more and our final option to see is we need questions colon the fairy gives you some awesome new shoes the end fairies are infamous for giving out shoes mysterious fairies living in forests handing out shoes is no basis for a form of government and if you know what that is in reference to awesome so we're done with that but we're going to add more to it so that's why i put the comment there so i'm not going to write these out because i don't want to bore you to death but here are the options for the cave path it is all formatted the same way just make sure these are all named different because if they're named they're referencing this first of all this ghi they're referencing this see and if they're named the same it's gonna mess up your program so just stick stick to this formatting here and you should be should be good to go i'm just you know i had bad luck earlier so let's see so we're gonna go to the cave right so we picked the cave you go caves and we ran into a terrifying mentor i'm not even sure if that's spelled right sorry if it's not and with our mandatory we're gonna do are we gonna run away are we gonna stand our ground are we gonna ask them if they wanna be our band obviously we're gonna ask them if we want to be in our band and there we go the minotaur comes with me we start a band called the groovy hooves and that's the end and if we want to restart our game we just hit restart and it worked thank you for watching this video um i hope that you will take this project and make it like 20 times better and way more creative with the story thanks

Channel: brittany-codes

Views: 1,385

Keywords:

Id: PQrHtlakF6o

Length: 59min 43sec (3583 seconds)

Published: Sat Mar 06 2021