How to Make a Quiz App using HTML CSS Javascript - Vanilla Javascript Project for Beginners Tutorial

what is going on everyone so today I'm gonna show you how I created this quiz application using HTML CSS and JavaScript so here we are go ahead and click on plate and then is gonna ask me some questions so I'm gonna go ahead and click on and get it right there turns green also the score updates and then the progress bar will progress as well so I'll go ahead and click the right answer again turns green there and then if I click the wrong answer so for this one I must say 20% is gonna turn red and then again let me see if I hit the wrong answer one more time you'll see that it turned red again here and now we'll utilize local storage as well so here I can type in my name but I already played through this again let me just say um Brian - and then i'ma hit save and actually before I hit save I'll show you I can't even click on save unless I type something in so that's a cool little effect we're gonna do - so I'm hit saved and then now we go to the high scores button and now you can see that my score right here is 200 and then these are previous or try as I went before I started this video and simply I go back home and then go back into the application again and then same thing on mobile same concept here so without further ado let's go ahead and start coding alright so here I am on vs code and the very first thing we're going to do is create a index.html file so go up here click on the new file and simply type in index.html then I'm gonna go ahead and I have M it installed so when I hit shift exclamation I can just press tab it's automatically fills out for me and then here we can just put like just put homepage for the title and then I'm going to do is we're gonna link a start a CSS so imma type in link press the tab key and automatically creates that for me and then we're gonna type in style that's CS s and then eventually going to add font awesome so already have this up on the side but that this is completely optional you do not have to worry about this if you don't want to but that's basically if you want to have the icons for like little a design effect but uh leave it out for just now but uh what I'm gonna do now is go into the body and we're gonna start creating our actual dibs so first things first is create a class call container so in order to do that you press dot container and then I just press tab and now within this container I'm and press enter so now we're inside of it and Emma creates a ID so i'ma go hashtag and then Badou dot or not Handelman hashtag home and then dots flex column and then we do dot again flex Center and then press tab here and now I'm gonna hit enter again and these classes are essentially going to style pretty much the entire page and they're gonna use them on other pages as well and then we're gonna go and create the first h1 or we can just say are the sea yeah are you ready now I'm gonna hit command s and save this and then I right-click and I have a live server installed as well so that way I can actually see it live without me having to constantly refresh the screen so pretty much we can see here that it's working so if you don't have that installed go ahead into the section extensions tab and pretty much install goes in there and then let me just get rid of this right here for one second so now under the h1 the press Enter and I'm gonna create our first a tag which you saw earlier was the play button and pretty much so press a press tab there and then the link we're gonna create this link eventually but right now we're just gonna put slash game dot HTML and then I'm gonna add a class of BTN and then within here I'm gonna say play and then a little cool I'm short Club you hit press shift alt and a down arrow on the Mac it automatically copies it down I'm not too sure in the windows but uh that's one way to do that and then we're gonna change game to just high scores and then simply edit the innertext and change that to high scores here and then we're gonna change the class I should we keep the class here but let me add an ID so ID is equal to high score - BTN and then we can go ahead and save this and now you can see this what a screen looks like now here let's go ahead and let's create the status ESS actually because I want to show you how to make this look a lot better than it is right now so start a CSS press enter and eventually we're gonna add the quant awesome icon so let me go ahead and put that in now just to save some time but basically if you do have fun awesome reviews before then this should be pretty easy to do but I just copied this code in right here and that's right next to high high score so basically do I class equals FAS space so let me so basically copy this code right here into your next high scores and that'll give you the icon and right now you can't see the icon because I don't have fun awesome installed or a links but if you don't already have an account of fun awesome go ahead and create one and then simply when you go up to you're already happy here go to your profile image and just click on the fun awesome CDN and I'll lead you to this page we can copy this link here so I'm gonna go ahead and copy this and if you don't have an account you could probably just look at my screen and just type exactly what I'm typing but that's probably gonna be really annoying and maybe it might not work I'm not too sure if it works um for everybody's account maybe this might be a specific or not but um if you can go ahead and add this to the top of your heading head tag right here right below the start of CSS save that and I can see we have the icon now again if you can't get this to work then don't worry about it it's not necessary and if you can't get to work you can just delete this and worry about that later but that's just in case you wanted to have the icons there so now let's go to status CSS now and then here I'm gonna target the root of the page or tell you just say bye - but right here I'm basically gonna say background color now I have to be RGB of 29 26 and then 26 so now it is pretty much like a darkest gray depending on my screen you're looking at and then when Miss sherry target everything here with the a stretcher shift 8 my keyboard and we're just gonna do box-sizing border box and then margin:0 padding:0 and then me Ram mainly so ramen typically is 16 pixels but with this little cool tricky and do we do this and set to font size of 60 2.5% and basically anytime you type in a rim one round will be 10 at that point 10 pickles and then 1.6 would be essentially 16 it's much easier to figure out what you're doing in terms of ram but again some people do some people don't and then font-family I want this to be the specific font from Google and it's called you see Nova Square this quar and then comma cursive I'm gonna go above the root and I'm gonna import a Google font so again you do not have to do this this is just to make it look the way I have it so just simply search google fonts and click on google fonts here and then once it loads up I'm gonna typed in Nova it looks like it's this one right here so Nova square with this like can't pronounce that but uh click on this one hit select style and then pretty much when you go to embed go to import because we're gonna be using multiple pages so if you do the one on the link you can have two cop in every single HTML fons gonna be annoying and just copy just the import right there without take out don't get the style tags and then just copy it there and then hit save when I go back to home page you can see that the text looks just like the one I had earlier in the sample so now let's start styling so I'm go with h1 and MSA font size 5.4 M color I want this to be White's and then I want the margin bottom to be 5 rim here now you see it looks freaking giant Norma's but that's okay and then next I'm gonna do H - I'm gonna say font size of 5.0 actually 0.2 rim and then margin bottom the sage for rep and then I'm gonna target the container now so this is what we created in their first HTML page so I'm gonna go ahead and do dot containers targeting the class container let's set a width to 100 of you port width let's see Heights 100 viewport Heights display flex justify content center align item center so typical things you see with the Flex box and then I'm gonna set it max width to 8 you REM just to keep everything in the center and you can't see it right now but I'm about a center in with margin:0 auto so having saved until now and right now it looked like it just disappeared so let me go ahead and add padding to ram and let me see what happened so let me inspect this really quick and let's say you can still see it so I guess is just my ya know ma'am Peters bug it out but yes so here that is what it looks like right now and then let's go ahead and target the Flex column which was the class we have one we have over here on the div with the ID home so here is gonna say display flex and then flex direction column and then we got flex center same thing justify content center and then we'll do a line item Center and then we have additional ones that we can have this in case I end up adding some of these or justify Center let's just put just five content center here and then we can do text center then text align Center there and then last let's do a hidden and then this boy now under this let's create the button so now if I go back here you can see we have our classes with the BTN so play and high score so now when we edit this you'll be able to see it finally and also notice how everything's centered now so button new font size of 2.4 REM let's do paddy I'm gonna do two round 1 0 with let's do 30 REM text-align:center and then margin - bottom so spacing from each other I'm gonna do one Ram here text decoration let's do none and then color so I want the color to be RGB and then parenthesis 28 comma 26 comma twenty six and then background linear gradient and then within the parentheses there's gonna be a lot of typing something ninety degrees or 90 deg comma RGB of 18 comma 93 comma 255 and then we got 0% comma RGB again and then parenthesis now with in here and do 0 comma 1:02 comma 255 and then go outside of this parentheses and do 100% and then add the semicolon at the end and they can see we have our buttons now you're probably wondering how do I come up with this I mean there's free generators for linear gradients on line so I just basically have that from there and then basically let's add a border radius to round out the corners of four pixels so now looks pretty similar to we have so let's do button:hover now so button:hover and that's gonna sage cursor:pointer just that way it has a little hand symbol when you hover let's do box shadow say zero zero point four REM one point four REM and then 0 and then RGB a parenthesis 8 comma 1 1 4 comma 2 4 4 comma zero point 6 semicolon and then enter and we're gonna do transition I'm gonna say transform and then just put 150 milliseconds and then last one is transform scale one point zero 3 semicolon at the end save this and you can see we got the little scale action going up with little shadow as well so that's pretty much how I got that there and let's add this one class here for disabled because uh once we do the JavaScript you'll see this stuff added so it's a cursor not allowed so that was when you saw at the end when I couldn't click on the Save button and that's just do box shadow none and then just transform and now let's see if I can target see if I have it on there high score yeah so I have a different color for the high score button so now we're gonna try it the ID so ID which is hashtag high score - BTN and then it's gonna be background and for Linear's you gather your background because if you try background color it's not gonna work out but here I'm gonna copy it in so what you could technically do is what you could do is copy this and then just change the RGB values which is probably the easiest way to do it and then if I go and save it you can see that the color has changed do hashtag high score - BTN colon hover now and then this time I want this to be simply just box shadow this so let's do box - shadow and then zero zero point four Ram one point for RAM and then 0 and then art RGB a with the color - five five two five five comma and then zero comma zero point five so pasty at the end and it looks like the crown which is the FA - Crown class I want to get it to this side so FA - crown and again if you couldn't get the phone on sore spots at work then just don't worry about this part but a 2.5 mm and then margin national left one red and I can see how like this so now we have pretty much the home page made so now let's go ahead and create our game page because what happens when I clicked here it's gonna say this doesn't exist so now I'm gonna go over here to the files and just type in game dot HTML and while we're at it let's go ahead and just create the CSS - so game dot C as s and then game dot yes so let me just get let's go back to HTML so summation mark and then just put like quiz page and then let's go ahead and start hitting this one so first things first I'm gonna have to link the Stata CSS this time because you want to bring some of the class that we created from the previous one to it and then also I'm gonna do link again and then we're just link our game CSS so first thing the body gonna have another container and then press tab so class container enter and I'm gonna have ID so hashtag game and then class justify - Center dot flex - call so Cu Oh Ellen tab and then we're gonna press enter into here and then when you create an ID if you're gonna short came from HUD or heads-up display and then press tab here then press enter and I'm gonna do class HUD - item and then you can Lily name this whatever you want to like progress or just display bar but I'm gonna do that with class and then press tab here then press enter here and I'm gonna do ID so hash tag I'm gonna say progress tax then I create a class called HUD - prefix press tab here then enter and this actually should be a P tags let me just change that really quickly and have an extended - I think of the changes both of these the same time so case you're wondering if yours isn't already doing that let's just put question here and then under the P tag so i'ma press ENTER now i'ma say ID a progress bar press tab and then enter in the progress bar must say hash tag so ID again progress bar full and then press tab so this gonna be empty because we're gonna be editing it with JavaScript and CSS so right now you just want to worry about putting any in here and then outside of this div right here so here's the first progress bar I'm gonna go outside of the HUD item so the hazardous play and I'm gonna press enter here rush share price runway enter there so you can see we're still in the heads-up display but I'm outside of the first HUD item so now I'm gonna create another HD item I'm going to say HUD so class so dot HUD item press tab I'm entering here MSA p dot HUD - prefix press tab here and then enter and there's gonna be score and now underneath the P tag so the paragraph tag gonna say h1 dots HUD - main - text and then put hashtag score so now we created a class and a ID and I just leave it at 0 for right now make it safe so right now you're probably what's going on so if I were to hit play you can see that we have essentially our scoreboard up there but it just does nothing you can't really tell because it's not styled yet so now the h1 then click now on the div and then on the next day so right now here's the full HD div so we're gonna press ENTER now so we're still inside of the game ID div but we're outside of this div now so hit enter right here and pretty much we're gonna do is add our questions so you can see essentially what it looks like so let's go ahead and do the first one so hash tag so that would be question so ID question press tab say what is the answer to this question now this is just filler just so that you can see what's going on and the text is black right now so you can't really tell but eventually once we color it with CSS you'll see it I'm gonna say dot choice neener press tab and then enter here and then dot choice - prefix press tab there and that's gonna be like ABCD type stuff so enter under that one and I'm gonna do that should be a P tag actually so make sure change that and then the P tag again dot choice - text and it's gonna be just choice of CH oh I see and then we'd have to add a data attribute to this so that we can actually figure out what we're clicking on so it's usually data - then whatever you end up naming it some say - number I'm gonna set that equal to this is number one and pretty much we can do here now we have this created this choice container we pretty much can copy this the amount of times you have our questions so that's the first one press ENTER second one third one fourth one so now I can just change this so like B this would be data number two and then we got C then number three and then d-day and number four and then this could be like choice to choice three choice for my zoom in you can kind of see what's going on but that's pretty much what it looks like right now and then for you forgets go to the bottom the last if you have on your page and then type in scripts colon SRC this is we add our game J s file here alright so we're pretty much good with the HTML let's go to the CSS and make this look a little better so I'm gonna target the body is the first thing curly braces I'm gonna say color first thing FFF that we can actually see what's going on now you can see it better and let me shrink this for you real quick so now let's go target the choice container so choice that container hell your braces I wanna say display flex margin - bottom of 0.8 rim got the width of a hundred percent border radius I want that to have rounded four pixels we got the background and that's going to be RGB of eighteen comma 93 comma 255 and then we got font size of three R M and then min width of 80 red so now you can see looks kind of crazy on mobile because we got mobile stuff soon but this is what it looks like right now it looks kind of strange but let's go ahead and keep adding some stuff and let's do a choice - container of Hubbard look put cursor:pointer must say box shadow is gonna say thing we have a copy already positive zero zero point four REM one point for ram 0 rgba of 6 comma 103 comma two four seven comma than a pasady will be zero point five and then save that and under this parts let me should see this better I'm gonna say transform scale one point zero two and then transition transform we do 100 milliseconds here and it looks like I put a semicolon here just I have a colon so now if I echo you can see looks kind of ugly right now but uh you can see how it looks like this let me drag that back over and then let's do a dot choice - prefix and let's do padding of to read and then that's top and bottom and then 2.54 left and rights and that's do color whites so they look ginormous why don't worry win fix this eventually choice text I'm going to do padding of to ram and then width of a hundred percent just in the call right there and let's actually go ahead and let me add the media query right now cuz you can't least see what's going on so let's do add media screen and let's do max width : 768 pixels click base is gonna target the choice Taner that's gonna say min - width of 4 you read all rights much better and I can actually see what's going on and then let's go back above this under the choice text and then let's go and add the corrects right now looks like this we're gonna do is add the dot correct so this is what happens in the JavaScript when it turns green so basically background : linear gradients of 32 degrees comma RGB print the seas 11 comma 2 - 3 comma and if you want x I just type in green doesn't it's the same fact I just wanted mine to be able to look a little different and then let's say 0% comma r gb gbg4 the C's 41 to 32 left 1 1 1 outside the parentheses now 100% and then some going after that now we can basically copy this and just say incorrect and I want you want to change the RGB so I'm gonna say and erase this part to say - 30 , 29 comma 29 comma more than one and then for the second part I want it to be 2 - 4 comma 1 1 1 wash it 1 1 comma 1 1 comma 1 and there you have it there now let's add the has a display on the top so let's see we just put heads display here presents a really quick now so targeting the idea HUD will say display of flex justify content space between so this essentially pushes it pretty much out to the edge and then here under the HUD maneuv dot is you D - prefix I'm gonna say text-align:center then font size would be to read and thence go under here let's target's dot HUD - main - text curly braces and just do text align and that's gonna be Center here and now I'm going to target the progress bar now so this is what you saw the loading type effects and it's a width of 20 ram heights of 3 red border is 0.2 REM solid RGB is RGB 11 comma 2 2 3 comma 36 they got margin - top - REM border-radius 50 pixels and then overflow set that to hit so now looks like this now press enter here imma do hashtag progress bar full question mark or not question curly brace on that and then simply we can just say Heights 100% background looks like it's the same so I should copy this RGB color here back around here type that is B and then with would just be 0% to start off with so now if you look at the page it currently looks like this as you can see that looks like this that's currently we got going on here so now let's go ahead and edit the JavaScript now cuz nothing is happening and then I go back to home can't we do anything right now so I know why it didn't um it's making my thing like ooh let me see my mesh type something so I realized why the text is so small is because in the HTML put a div instead of an h1 so let me see yeah this should be an h1 okay so h1 so go back to game to HTML and change the question we types to h1 okay that makes so much more sense now it actually looks much much better here and now you can see it's nice and thin so pretty much as we listen right now but now we have to do is add in our JavaScript now let's go to our game and here's the fun part first thing is we're going to have to select our eyes that we're going to target someone go Kant's question so that equal to documents so if you're doing anything with a Dom then you pretty much know how this works by the way to do this type document I'm gonna do a query selector right so now depending on who you talk to from what I've learned is that query selector is the most neutral way of doing things because I can target both the class and an ID so in case I'm wherever to change my ID to a class or a classroom ID I can basically still target it or simply change it so putting this the quotes and half that question because if I want to put document that getelementbyid the united up changing that to a class then this would be all messed up but again just depends on who you learn from and then now I'm just gonna go and do shift alt down arrow again to copy this and then copy this to three four five times si my target is the choices so I'm gonna save this so I'm just naming it choice this is the variable I'm just naming it as choices and then here with a Duke document that career selector all and essentially we're gonna target the dot choice - Tex now I want to have this in an array so basically gonna say array from and wrap it around like this the next one we're gonna have is progress X and that's gonna simply target the ID of progress X and then here we're gonna target these cortex and then simply go down you should question and then just put that stack score and again you have confused what's going on these are all of the classes that we have here and then also ID scores there and then you can see the rest on the HTML and then last one we got is the progress bar fool Xie and then this is simply going to say progress bar let's save this so I think happens yet because we haven't done anything but the first thing I'm gonna do is create another variable same as let's let me say current question let me save it you go to an empty object so there's nothing inside of this let me say let accepting answers it's just about that right so this equal to true and again I'm not using semicolons most of time I did up here know why I did it I can realize that but okay you don't have to use semicolons if you don't want to for Java scripts so I'm gonna just keep it for that rest of the video let's score equals zero and then let question counter equals zero so score starting at zero and also the questions starting at zero and I'm gonna say let available a misspelling I'll fail level questions so equal to an empty array and now we're gonna create the questions that I I just made these up but basically we're gonna save it to a variable called questions so let questions equal to an array now within this array and created objects and pretty much gonna have the question : I'm just gonna put up you know what is 2 plus 2 and then comma I'm gonna say choice 1 : just gonna put quotes of two comma and then we can basically do this up to the four so this can be choice to change that to 421 3 4 just gonna be like 17 then have this combo just say answer : and this is basically saying that number 2 is equal to 4 which would be choice to here and then put a comma here and then basically we can just copy this and do this again so that'd be its question 2 question 3 and question 4 then just erased a comma at the end and now I have all this stuff safe so again you can add custom questions that you want but I don't have to retype the entire thing all over again so I'm just gonna copy in my questions well basically you can see here now again you can Lily doesn't really matter what you put just make sure they're different questions so you can understand what's going on and that's pretty much the questions tab so now under this let's create another constant here say kotts score underscore points you know I'm capitalizing it it's just known in JavaScript that um essentially if something's going to be a fixed and you're not planning on changing it so imma say 100 here and then con máximos en I'm gonna do arrow syntax and basically we're gonna put in here and I set the question counter is starting at zero and score can be at zero and then available questions which we have up here this is gonna be equal to the Narae and we use a spread operator to basically all the values from questions so we're basically getting all of these question values here and then pretty much gets new questions and then BOOM and now we have to create this function here getting your question because you can't call it nothing's there so now I'm gonna say get new question so that equals who their function here for the C's they're going to say if available questions dot length its equal to zero or the questions counter is greater than the max you see miss better than max underscore questions what we're gonna do here is going to say local storage source Avis the local stores now when I say set item and they're gonna have most recent score then comma score and then now I'm gonna say return window C dot patient plushie yeah and I'm gonna sign / in dot html' and it should be in quotes by the way so this is essentially gonna keep track of the score here and then let's have some more flushing I do this let's do question counter we do plus plus and I'm gonna say progress tanks dot inner text and this is gonna say equal to temp it should put the back ticks I'm gonna do have a little of this so question dollar sign curly braces I'm gonna put question counter and then of Max underscore questions so this essentially is gonna be like question one of four two of four three or four etc and as incrementing by one each time and then I'm going to update the progress bar by saying progress bar and progress are full and styled up not down style die with which set that equal to back ticks dollar sign curly braces question counter and we're going to vide this by the max underscore questions and then pretty much we have to put this in parentheses so go to cover this with parentheses so right now it's in parentheses and then they're gonna say times 100 and they go outside the curly braces and they put a % so it's basically going to calculate what question we're on and then correspond that with the percentage that we are currently yet now we have Const questions index it looks like I have the brace yes make sure the back tick is there so now you have cons question index you want to say n equal to math dot floor so we're gonna round this and then put math dot random to get a random number when it times this by available questions dot late that's how we can calculate the value of the question index here and then I'm gonna say current question you want to set that equal to available questions and then the array and then say questions index which is the one we just had up there so it's basically going to keep track of what question we're on and then question dot inner hex is equal to current question dot question so that's essentially the the question that we're having so it's gonna know which question basically the text or aka the question to ask and now for choices when do choices that for each and then we're gonna pass in choice parameter than arrow function curly braces here and say cons is equal to choice dot dataset so this is the dataset that we had earlier with the - number and basically gonna save it to the number and that way I'll know what toys that we're clicking on then we have a choice dot in your text so they equal to current question then a rape and then basically quotes choice plus the number that's the inner text now and then outside of this choice we're gonna create metal book questions here and we're gonna splice it I'm going to put questions index then comma one so you can see your splice kind of gives essentially what it shows remove elements from an array and if necessary interests you elements and their players returning to lead items so that's basically the questions index that we had created we see right here yeah right there and then we're gonna put accepting answers make sure that it's set to true so now we're gonna go outside of you getting your question create another I'm going to do the choices but the choices again and when I say I'm gonna iterate through it again but for each passing choices parameter arrow function and basically we're gonna say choice dot add eventlistener and how happens when we click so we're gonna say click I said E arrow function curly-brace enter say if is not equal to accepting answers we're just basically going to return and then under this wanna say accepting answers we're gonna said that you go to false now and they're gonna say con selected choice equal to e dot target I'm gonna say con selected answer is equal to selected choice you just made there dot data set of the number which would be the again choice one two three four and I'm going to say let's class to apply equal to C elected answer and I'm going to say if that's equal to the current question dot answer I'm going to use turn area so basically is gonna be if that's true and put a question mark we're gonna say toggle the correct CSS that we created with the green or if it's false toggle of the red CSS bar which is classified by incorrect and then basically have to go say if class to apply is equal to correct curly brace here increment score by score underscore points so believe I put this yeah so here score points 100 points perfect question so basically if you get the question correct you're going to increase your score by a hundred points and then we go here and say selected it's a choice or target the parent element I'm going to say class list dot add class to apply so that way we can add it whenever we get it right I'm gonna say set timeout so that way whatever we do click on the question right or wrong it'll have time to show us so we're gonna say pass an error function empty parentheses curly braces they're gonna say selected choice dot parent elements that class list dot remove class to apply and then we're gonna call get new question so this is gonna run now is gonna give us the next question and then basically within the curly brace here to say comma 1000 so now you can see what happens whenever I click it right now it basically is turning red and it's giving us nothing because the and page doesn't exist just go under here and let's go ahead and do increment score that you go to num that's just a printer output here and then basically just say score make sure we add that to the dome and then we're safe cease cortex dots intertext and we'll make sure that updates to score get rid of this quotes here and then last we have start game and call it here and right now when I click on it nothing is happening so I'm gonna inspect this and it says questions counter is not the fight on 60 so it should be right here let me see if des alright so it looks like I thought I misspelled ahead ass up here I have it saved as question counter with no s so that is this little typo so now if I click X you get pretty much see yes you zoom this out here see there's the quiz and we got that bar what the percentage scores here let's see I'm just click on something so score is updating let's see click wrong it's red turns green toss building and C to buy and then it's put 4 here so right now nothing's gonna happen because we haven't created the end page well you can see pretty much most of the quiz functionality is working now so that's pretty sweet to have that so let's go and let's create our end page so we got to think two more pages about the crea because the high score page as well so I'm gonna go here and then click in a new file and let's create the end HTML if I wanted why are we creating these is because they're essentially linking to this file here and then let's make a and dodged a yes [Music] so again for the HTML and just press exclamation mark tab I'm just gonna leave the title blank for now and worry about it and then just leak the Stardust CSS and then we're gonna have to go back to our index and get this font awesome that's if you're following along with that just so we can get the logo and then pretty much here we're gonna target the container again so in container press ENTER and then hash tag we have end and then clasp bead on flex center dots flex column then enter into here and then base we're gonna say a swan hash tag final score I just sit at 0 for right now and then underneath this I'm gonna create a form MSA with a class of and form teener and actually we don't worry about that because we're gonna do some stuff with javascript enter here and then within the for I'm gonna create an h2 with the ID of and - text and basically it's gonna say enter your name below to save your support so let's actually let's go through this really quick so I can show you what we're actually editing so here's the end page right here and then h2 there now let's do inputs times gonna be text name is equal to you should be named D is equal to use your name and then we have place holder equal to enter your name save that there and now we've got an input so now outside of input I'm going to create a but it's oh but in and let's do class so dot BTN hash tag save score BTN and then go back inside the button I want to add the type equals to submits and then on click when I set that equal to save high score for this easy event and then I'm never gonna leave it as pretty much disabled because I don't want people to actually click on that and that in the bottom is gonna say save so now we have the same text so outside this button now let me go outside of the form and I'm going to create another language and say a dot BTN and then this is gonna link to the slash game be HTML and then within the a tag we're gonna say play again and then we're gonna copy this down again and it's gonna say go home so go home and this is gonna be the slash which is our home link right there and then I have the home icon from fun awesome so I can just copy that in there and basically save here so now that pretty much is what it looks like so now all we have to do is stop this so I'm gonna go back to our CSS on style just so you can just add this again at the bottom I'm just saying like end page yes here just go back to style.css so here I'm gonna say dot and - form - container simply going to set it to a width of a hundred percent say display flex here and then flex direction what is to be column and then let's do a line items center and then max width will be there you rep so we're currently looks like right there and then let's go ahead and edit the inputs let's do margin bottom so that's your one room let's do with 20 mm and then I'll scale Patty 1.5 Ram font size let's do one point a trim border let's set that equal to none and then box shadow say equal to zero zero point one Ram 1.4 Ram 0 rgba parentheses 86 comma 1 85 comma 2 35 comma zero point 5 guy like this and then step input : : placeholder curly braces and then the color something gonna be hashtag a a a and then let's do idea of user name curly braces to save margin - bottom of 3 REM width is a hundred percent and then our line is equal to none so now I can see how starting to look much much better and then rolls done with this CSS we're gonna say ID so it has like n - text gonna put a font size of 2.4 m now say color of white so hashtag FFF then text a line is going to be Center next 1/2 save score BTN set the border equal to none and then I'm just gonna target the icon so I think home and that's gonna be margining - left hole-in-one rim font size equal to 2r and then color equals to RGB of 28 comma 26 commas 26 ok so this is pretty much we got going on here and as you can see the Save button is disabled until you actually enter something and we have to add some more JavaScript I believe soon fix this so let's go ahead and let's go to the end Jes now so I have it created up here and now I'm gonna do is target so conce use your name so they equal to document dot query selector for the sees and we're gonna target boats hashtag username what you get that's the all the faces they had put the placeholder and I was gonna copy this four times so for like this and then basically I'm gonna say save score BTN you document that query selector of save score BTN then I have final score and that is equal to final score and then we got most recent score and there's gonna be equal to most recent score and let's go down press enter here and I'm gonna say Const high scores which is a high score page and I'm gonna say we're gonna parse this because we're starting to the local storage method make sure your string so parse local storage getting the item now this time hice pores and outside this parenthesis let me make sure to see this NSA or they empty array right here and then Kant's max underscore high on the score scores equal to five and I say final score show suppose right final score dots in earth TX I'm gonna set that equal to the most recent score and then here the target usernames username dots eventlistener parentheses or say keep up so whenever we press a key this essentially is going to re-enable the Save button arrow function sure you make sure to generate and then I say save score BTN not this abled is equal to the username dot value so basically it's gonna say but if it's equal to the username that value is not true then basically they're set there and then save high score it's equal to e which is equal to arrow function say e dot prevents default so basically this allows us to click the button it doesn't just automated up and right now nothing's gonna happen yet because we're not finished but now I'm gonna target or create a variable called Conte score set equal to score and just leave this value to most region score there with a comma and then I'm going to say name I'm gonna leave the value equal to username dot value so now outside of this video we're gonna say high scores dot now we're gonna push this score value on to my scores and then now let's go and say high scores dot sorts and then pretty much and say a comma B it's a parameters arrow function and then here gonna return and B dot score minus a dot score and then high scores dot splice SPL I see right there at the fifth number here so again moves elements from an array and if necessary inserts new elements at their place deleting the elements there and then we're gonna target local stores now so local storage dot set item I'm gonna pass in high scores I'm gonna say Jason we got stringify this I'm gonna string of find the high scores and then under that I'm gonna say window dot location occasion dot a sign I'm gonna say dot or not so that I'm gonna say cool slash here and then pretty much this is all the code for the and that's a yes so right now nothing is gonna happen because we still have to create the highest scores page so you can only see what's going on and this can't say anything to the high score page because it doesn't exist but so far most of our things work so last but not least us create another file so click on here is going to be high scores dot H email and let me exhale ball you so you can see much better and then I'm gonna create a high score CSS and then we create a high scores dot you guessed it JavaScript alright so again exclamation mark just say high scores and then here again we're gonna have to target the link start a CSS link again I'm gonna link the high scores dot CSS and then I'm gonna have to copy the font awesome CDN which is right there and then copy that there and again let's do dot container and it gets here I'm gonna say hashtag high scores I never say down again flex enter then dot flex column so in here I'm gonna say hashtag final score there's gonna be leaderboard which is what I caught it and let me actually go to this page you can't see right now but that's what we're creating right here and before I screw this up we gotta make sure this is an h1 and then I'm going to create a ul with the ID of high scores list I'll leave that empty then under that I'm gonna create a tag so link tag with the class with dots BTN and then simply the href seem to be the home so slash and then I'm gonna say go home and I'm just gonna copy in my phone awesome icon so that's gonna be let's see here right there and now you can see it looks like this so now let's go to D CSS right here and let's start this up so now the body going to be the color of hash and set whites we got high scores list so this ID high scores list save this style it's to none and then margin - Auto is for rep and then we're gonna say dot high - score font size equal to 2.8 REM and then margin that bottom is equal to 0.5 REM so now we don't have any scores yes you can't say things so let's go ahead and go to Jas so now I'm gonna say Const high scores list it's equal to document dot query selector and Miss a ID of high scores lists and I'm gonna say Kant's high scores equals to JSON that parse start parsing again local storage we're getting the item of high scores and I'm gonna say or an empty array and then when I say high scores lists dots in your HTML it's equal to let me add this on another line high scores now we're gonna map so basically creating a new array or entering through and creating a new right here so it's a score parameter you know for instance has going to say return backticks here when you say li class is equal to - score quote again closing tag and it's basically gonna be the score that you see so essentially gonna say temp a little dollar sign curly brace so score dots name and then that's basically whatever you type into the input at the end of the quiz is what that will fill in and they're gonna say score dots score and they will close it off with the ally tag here and at the end we have to join them so join it with just coats here so now let's go back and let's go through our quiz again so let's see make it a little bigger to see oh this one going to do bond here and then now hit my name looks like I have some sort of errors let me inspect this with quick so one thing is go back to the end HTML this should just be on click like this and I forgot to add these script tag that is probably what's going on so scripts and J yes so now let's hopefully see it okay there we go simple mistake but just put my name or just put yo save it and now we go back and then click on the high scores and Kelly nothing's dead yes let's go ahead and I mean make sure I put the script tags on all of the HTML files really quick so this one's missing the high scores one ok there we go so script so go to high school HTML script tag there and then simply put high scores dot J s so here is the end quiz that I created here so pretty much to go through it the green you can see the red let me see if I miss something red and then and green here and then just put your name save it and I could school right now says no so looks like we have one missing thing it looks actually I believe that should be an easy fix and should be on the realize the error we have simply this set to the ID it should not be set tied they should just be most recent score because that is we have here and this should be set to actually my document this should actually be local storage so that is the issue and just type it to quick didn't realize this and now if I go back and let's actually bring over here let's go ahead and hit play and now let's see when I go enter and that's for seven let's just put win save I scored now you can see that we finally have it saved here as win so now I were just a clear and delete this from local storage then they would just delete that but now you can see it is fully working so again this is the JavaScript HTML CSS quiz app so if it did enjoy this video and want to follow me along my coding journey where I'm documenting myself learning how to code and just show you guys what I am building that definitely go down below and hit that subscribe button this video a thumbs up sheds with your friends and comment down below any suggestions or tips that you saw or anything that you thought about this videos at all and aside from that I'll see you in the next video peace

Channel: Brian Design

Views: 59,092

Rating: 4.9014492 out of 5

Keywords: how to make a quiz app in javascript, quiz app javascript, javascript project, beginner javascript project, how to make a quiz app, html css javascript tutorial, javascript tutorial, javascript tutorial for beginners, javascript for beginners, javascript crash course, javascript full course, javascript game, js tutorial, html css website design tutorial, html css projects for beginners, create a quiz app, survey app javascript, js projects for beginners, vanilla javascript

Id: f4fB9Xg2JEY

Length: 70min 43sec (4243 seconds)

Published: Sun Jun 28 2020