Build A Quiz App With JavaScript | Mini Project For Beginners

[Music] [Applause] [Music] [Applause] [Music] prepare to die [Music] [Applause] prepare to die [Music] so what is up guys welcome to another video today we are going to create these quiz app as you can see that that's the quiz up and the question of the squeeze app is dynamically rendering or dynamically getting from an external api and we are getting the question and also we are rendering that and as you can see that that's the question and also we have our options here so the question is what is the capital of the india so it will be perfectly random so it can be anything so for this time it is showing this one and let's say that i think this one the right answer and if i submit and that's the one the cartons are so as you can see that whenever i submit we have two options i can go to the next quiz or means the next question actually so also i have option for finish and here you can see that i have these scoreboard so means i already played one and i also scored one so let's go to the next quiz and you can see that we have this preloading image which is looking really good and as you can see that that's our next question and we have these options so let's say that this is the correct answer and if i submit that and i don't know by luck it is the correct answer so i played two and the score is also two so let's go to the next one and as you can see that that's a completely random question and i have the option for that so let's say that that's the curtains are and if i submit so i was wrong so you can see that i played three but my score is two we can go to the next question and you can see that i have my options and i can submit that and if you want you can finish the quiz any moment so if i finish that you can see that the scoreboard for the quiz is here i played four and my score is 2 and if you want you can play again here so if you click this you can see that my scoreboard is perfectly reset and also we have my question and i can play or start my quiz once again so that's what we are going to make in this video so i hope we will learn so many things through this mini project and if you do please like and subscribe the channel and don't forget to share this video with others and no more talk let's dive into it so welcome to another 30 days 30 seconds video and for today we are going to create a quiz app with vanilla javascript and if you are interested to check out this repo where you can find all the interesting summaries that i did in this 30 days 30 summits challenge you can come here in this repo i'll link it in the description so you will find the link and if you come to this repo please give it a start and feel free to check out all the interesting submits so come here in our html so first of all let's get a boilerplate with exclamation sign and hit tab so it will create a butter play in our bs code and let's rename the title so quiz app and inside the body we will have a section so section and inside this section i will have a d with a class of container and inside this container i will have another div which will have our escort board actually so inside our container we will have our scoreboard and after that inside of our scoreboard we will have our first span so this will be our own s code so let's give it a class of score number so a score so score number and after that let's say that my score for the initial state it will be 0 and after this span we will have another slash and after the slash we will have another span so this will be the s pen for our how much quiz we already played so this will be the answer number actually or the plate number so we will have a class or answered so here let's say that i played five and my score is zero so if i save and refresh you can see that i played five quiz and my score is zero so actually we will dynamically change those number but for now let's keep it like that and after that let's come to our actual quiz form so let's say that form and here we will not have any kind of action and here inside of our form we will have a id so this will be quiz form and actually let's make it underscore and here inside of our form we'll have a h1 and here let's say that the question will be so for now let's have a question and let's say that capital q and with colon and here we wrap the question with the s pen so also let's have a class inside of our span which will be the qs and here let's have our question so for now let's say that this is a question and if i save you can see that that's our question and also let's have the answers means all the options for our question so let's say that d with a class of all options and inside of this div we will have all of our options so for each option i will have a div with a class of option so option and inside that i'll have my input so it will be the input and the input type will be the radio so radio and after that i will have my id for our this option so this will be the option number one so option one and also after that the value so for now we will have a placeholder value let's say that this will be the one and actually we will generate these options id type and value dynamically from our javascript so for now let's keep it like that as a placeholder so let's say that name will be quiz and that's it so that's our input and also let's have the label for this input so for this will be the option one and the level will be so let's say that these is option one and if i save i should see this option one as you can see that so let's have more options so i will have these four options if i save as you can see that and we can't actually change this because here as you can see that the level and the four is actually same for all of our options so we need to change them so let's say that this will be option two and this will be also option two and also this will be option three and this will be option three and for now this will be option four and that will be option also for safe save now you can see that we can actually select our option so it's looking perfect for now and after that let's actually get our button the submit button so it will be after the option div here as you can see that that's the last options that we have and after that we will have a div with the class of button buttons actually and under this div we will have our button which actually the submit button so let's have the type of submit so type will be submit submit and inside that we will also have the submit text and that's it if i save now you can see that we have this little submit button and finally what i need to do actually i need to link our css here so link css and also in the bottom we will actually link our skip tag which is the app.js so script source and here app.js so first of all let's grab the font so for the font i will use nonito so no nato that's the 90 font and from that i actually get this semivolt nonito so grab it and copy the import tag and paste it inside of our style.css so now we have our nominated fonts here and here first of all let's remove all the unexpected gap from our style.css so let's say that the universal selector padding will be zero and also say that margin will be zero and also say that box sizing will be border box and that's it so now you can see that we don't have any kind of unexpected gap anymore so in the html let's say that the font family will be non e2 so no need to and also font size will be something like 20 pixel now you can see that the 92 fonts is actually applied so after that let's come to the section and say that the mean height will be 100 v8 and the width will be 100 and also let's say that the background color will be so let me copy this background color which is this blackish background color that we have in the background so if i save as you can see that that's the blackish background color and also let's say that display will be flax and align items center and also justify content will be center now you can see that the question which is our quiz question is now in the center of our website so after that let's come to the container so container here and say that the background color will be a slightly white color that we have in our background so if you can see that we have the same color but it is slightly white or slightly bright color so after that let's say that the padding will be something like not pairing left we will have the padding for 50 pixel for the top 30 for the right side and 30 for the bottom and 30 for the left side so if i save as you can see that we have this nice padding and the width will be let's say that 90 percent and if i give it 90 percent as you can see that that's too much so we need to keep it max width so max width will be something like 600 pixel and if i save as you can see that now it's perfect and also let's say that mean height will be so the mean height i want to is 500 pixel so now you can see that we have a minimum height so looking good and after that let's come to our border layers so let's keep it some border radius here so 8 pixel will be enough and looking good actually and the color will be white color of course because otherwise we will not see this text and after that let's actually come to the position and the position will be relative because we will actually position other thing absolutely inside of our this container so that's why the parent which is the container must have the relation positive sorry the position relative so overflow will be hidden and also that's it actually i don't need anything else so we actually need to now style our escort board so container and come to the scoreboard and here let's say that the position will be absolute and also let's say that it will be in the top 20 pixel and from the right 20 pixel so if i give it something like that as you can see that now it is perfectly in position inside of our this container and it is in the top right corner so after that let's actually come here in the form and let's say that we need to get the h1 and style it and let's say that the font size will be something like 1.4 ram and 4 ram and as you can see that 1.4 me is actually looking good for now and after that we need to make some line height here so line height will be 2 m and also let's say that the margin bottom will be touring so margin bottom to ram so looking fine for now and after that let's come to our options so inside the form we have our option and let's say that the i think we have a class here so yeah we have the class so we can select it with the class and say that now what i can do actually i need to say that font size will be 1.2 ram and also the margin will be 10 pixel and 0 and 0 and 10 pixel so as you can see that we have now some space in the top and also in the left side so perfect and here let's say that the padding will be 10 pixel for all around as you can see that for the all side so we will have some transition here so transition and the transition will be 0.3 second and it will be ease and we will actually change the background color so the border areas will be for pixel so i will change the background color and that's when we will actually notice these four pixel border radius so here let's say that whenever we will hover them we will actually change the background color so that's why we changed although he added this transition here so after that let's say that the width will be 100 and also let's say that display will be flags and align items center and also say that justify content center so now you can see that actually not justify contact center i need to stretch and now you can see that it's perfectly in place though you can see that we have some issue but we will fix it so let's come here in our level so let's say that form and inside the option i have the level and for the level the width will be 100 percent and also let's say that the margin left will be 10 pixels so if i save it now you can see that we have now these 10 pixel left here and also let's say that the cursor will be puncher and also let's say that justify stuff will be a stretch yeah a stretch now you can see it's looking much better and let's say that whenever i will hover the option so form if i cover any kind of option we'll change the background color and make it slightly different color so say and paste it here so you can see that now we have this background color and we have this nice little transition so if you notice that we don't have perfect align here so let me check what is happening here so i think as you can see that we made a mistake that will be align items so now you can see that it is actually in center perfectly so sorry for this mistake so now let's say that whenever we will select our answer we wanna give it a style so let's say that here whenever we'll select someone so inside the form we can say something like if the option and inside the option we have the input and the input if i specify the input so the type will be actually the quiz sorry radio so that's the input type that we have and if it is checked so if anyone have this checked input what i want to do actually i want to change the level of this input and make it a different color so the color will be so it will be slightly different color and bluish color so let me copy and paste it here so by save as you can see that whenever we will select a answer the color of the answer is now change so that's now easy to identify which is selected so after that let's actually style this button here that we have for our submit button so inside the form i can say button so the width will be 100 so we will have a white button so margin will be so it will be in the top so we want to have some space in the top so 20 pixel will be enough and also we'll have some padding so the padding will be 10 pixel and one side so let's say that one point three m and mon serrat will be our font so not monster sorry nonito will be our font so font family will be nonito oh no need to what i'm doing so if i save as you can see that the font is actually applied and we have this white button and finally i need to change the background color so background color will be so let me copy this color so you can see that we have slightly dark color here and we will not have any kind of border so border will be none and also the outline will be none and the color of our this button will be this color so it will be let me copy so now you can see that we have this button and also we have this button text color so i wanna have the cursor pointer so that if i save as you can see that we have this hand whenever we are hovering so transition will be one three second and also let's say that it will be ease and also for the background color because high number will hover the color so to hover the button we will change the background color so let's say that whenever we will change sorry whenever we'll hover the button we will change this background color so it will be slightly white color that we have in our background of the button so save as you can see that whenever we will hover we will have this slightly so that's it as you can see that the ui is looking perfect and the next thing is we need to work on our javascript so in our javascript what we are going to do actually we are going to fetch the question or the quiz question from an external api dynamically so the api we are going to use is this api trivia api so you can see that that's the api and it will not actually require so as you can see that use of these api does not require any kind of api key and actually what i need actually i need to create a api url so let's say that whenever i will fetch every time it will give me one question so you can select how many question you want and also you can select a category so i will keep it all category and difficulty any kind of difficulty you can choose it from here and also you can select it will be a multiple choice or you can see that we have option for true and false so i will select any type so it will be randomly generated any kind of question any kind of type so after that we can actually generate our api url so if i generate one so you can see that that's our api url and now we can copy this and here instead of our app.js so let's have a constant and here let's say that base url and here let's have a quote and set the codes let's paste it so now you can see that we have our api endpoint and now we can actually fetch this api endpoint and we will get a question so to show you i can do something like so copy this url and paste it here and if i hit enter as you can see that that's what we have now we have a response code and after that we have a result array inside this array we have our category which is the general knowledge and also the type that's a multiple choice question and the difficulty is the hard and also you can see that we have a question so the question is this one and also we have our current answer and also our incorrect answers so those are the options so we will have these data whenever we'll fetch this url that we have here that we generated from this trivia api so you can generate your api url endpoint whatever you say from here so just select the number and select the category and all the other things that you wanna add so whenever you have this base url so we don't need to worry anything else so what i need actually in our javascript so let me just adjust this panel here and first thing what i need actually i need to select a bunch of things here so first of all let's say that constant container element so this is the container that we have in our html so that's the container that we wanna grab here so let's say that document dot quarter selector so we wanna select this container so we can select with this class and also let's say that constant form so that's the quiz form that we have so we can say that document dot query selector and we have a id inside of this form so we can select it with the id so which is the quiz form and after that let's come to the question element so constant question element so there is the question that we have in our quiz so let's actually grab it with document dot query selector and we can select it with the class the question that we have so you can see that that's the question inside of our h1 we have the assessment which actually responsible for our question so we have this class and by this class we can grab this qs so that's it and after that let's also have the options so constant option element so option element so let me have the constant here so option element will be so same document dot query selector and we will have these class so let me show you which class i mean so that's the class that i want so all questions so that's the div where we have all of our option i think what i need to do actually i need to get rid of this div which is our buttons div and outside of our all options we will paste this so it will be outside of our all options these buttons so this will not make any kind of difference but what we have now we have a div which have all options and after this div we have our buttons and inside this button we have our submit button so we need to grab this all options button sorry all options element so all options and perfect and now what i need i need to get these buttons element so constant buttons element and let's say the document dot query selector and we need to select these buttons so inside this buttons element we will have our button so also let's have our scoreboard here so constant score element equals to document.queryselector and we will select our scoreboard so scoreboard and inside the esco board if i come here in our html as you can see that that's our escort board and inside this let me show you so that's our fastest spin and that's our second spin so the fastest span is our score number so that's what we want to get so inside the score we have a score number and we wanna also grab the answered elements means what i mean actually i need to get this answered number or how much game you played or how much round you played so constant i can say answered element i can say document dot query selector and i can get it from the scoreboard so scoreboard and i just can grab it with the class which is the answered number and that's it for our constraint so after that save it and that's all our constant and after that we just can say that whenever our window will be loaded so window dot add even listener dom content loaded so dom content loaded so whenever our dom is perfectly loaded we will call our quiz app function so let's have the squeeze up so we need to make this quiz app so function quizapp and higher we will have all of our functionality so basically that's our main function whenever our dom is perfectly loaded we are calling this function so it will fetch first of all it will fetch the api so we will call this here inside of our quizap function so let's say that we will have another function which actually fetch the api so let's say that the function name will be fetch quiz so fat quiz and let's actually get the function here so function fetch quiz and where we will actually fetch our api so for the fetching what i need actually i need to make sure that the function is in the async way because we are going to use async code inside this function so here let's say that constant the response that we will have from the api will be stored in this response constant and we will actually await here and we will fetch it so fetch and in this fetch it will take the url that we want to fetch so the url is the base url and it will give us the response and from the response let's convert it into the json so let's say that data equals to await once again and response and response.json actually so it will convert these response into the json and add it or restore it into this data constant and finally we will return this data so before that let's actually console.log what do we have here so data and if i save and open the console log here so you can see that we have object here so inside the object we have our response code which is the zero and also we have our results so if i open the result we have this so you can see that the category the question category actually so it's actually about the video game and the correct answer is the true and the difficulty is easy and you can see that that's a true and false okay here the question and here the incorrect question and here the correct question sorry here is the incorrect answer and also we have the current answer so if i refresh and it will actually give us another one so you can see that that's a multiple choice question for this time and here we have our three incorrect answers and one correct answers as you can see so we have all of our data here so if you notice that inside this data the only thing that we care about is these results array we don't need these uh so we don't need anything else so you can see that we have other bunch of things so we don't need them actually we only need these results array so let's say that from this data we can say that results and now it will actually show us these results array as you can see so let's return this data so let's say that data dot results that we wanna return and we don't wanna have this anymore so now whenever i will call this fetch function fetch quiz function it will actually return something so we need to store it this data so we can say that constant data and we will store this thing inside this data so now what i have is in our quiz app we have our data which is actually the fetched result so now what i need to do actually i need to do something with this data so let's say that we need to separate our question and also the options from this data so for that i need some variables so let's have them here so let's question so question equals to so it will be an empty and also let's have the answer so those are the empty variable and also we'll have our options so this will be an empty array for this time and also let's say that the s core will be so for the initial state the s code will be zero and also let's say that let answered ques so how many question you already answered so for the initial state it will be also zero so now we have this and now we need to initialize these variables with these data so from this data i can get my question and we can insert the question in this question variable so let's say that the question will be so inside the data so let me actually console log it so that i can show you so if i come here in the console log as you can see that that's our data that's we have here so you can see that inside the data we need to go to the first item so you can see that so every time we will actually fetch it will give us only one so that's why we will get every time zero item so if i wanna get more something like 10 questions at a time it will be something like the first one zero the second one one and third one and it will go on so for this app we will always get these zero number means the only one item we will get from this api because that's how we set it every time we'll fetch we will get only one question so we will get the item manually by saying data 0 means the first item inside our data and inside that we wanna get the question so the question is this one so we can say that data zero dot question so each will get the question and now we have the question here and after that let's also have our option so let's say that the options will be an empty array and also let's say that we wanna have the answers here so the answer will be so you can see that the answer is the correct answer so that's the answer that we wanna have so this is the correct answer so we can do something like data zero means the first one and inside that we have this answer actually correct answer i believe yeah correct answer correct answer now it will get the correct answer and after that what i need actually i also need these options here so let's get the options so i just can say that data zero means inside the result we just can get this array which is the incorrect answers so incorrect i think they used underscore every time i am having this type of brain so now we are getting these array so what i can do i can map through the array and we can get every result so every option and we will push this every option inside these options array so i just can say that options dot push and we wanna push the our every option here so that's it okay we have an arrow so question of undefined in line 20. so what was that so the problem is as you can see that we have async code here means whenever we are fetching the quiz as you can see that we are fetching the quiz and actually it will take some time whenever it will be done it will return us the data so to get this data we actually wait some time so for that we also make sure that we have async here also because we need to wait here for the hour fetch quiz because it will take some time and we need to make sure that whenever it will be done and after that actually we will run this code and if i save now we will not have our error but we will have a new error as you can see that the map of undefined so answers i believe yeah that's it as you can see that now we have our perfect and no error so now what i have is i have a question i have a answer also i have all the options here so the problem is you can see that i have the options and i have the answer separately i don't have them together but i need to have them together i can easily do something like options dot push this answer but what it will do actually it will push this answer every time in the last or in the last place of the era so it will be something like the last option will be always the correct answer so let me console log it for you console.log options and also the answer and if i come here now you can see that we have the option which is one two three and also we have the answer which is the one nine seven so this is the answer and also we have this option so what i can do actually i can push this answer inside of this number or inside of this array as you can see that we have three option here we can push it but the problem will be as you can see that we have the t1 and if i push it the answer will be always the fourth one so that's not what i want the answer should be in any place so we don't wanna show our users that every time the fourth one will be the curtain so we wanna have these curtains are randomly in place inside of our this array that we have here so to place these characters randomly inside this array what i can do actually here i can say options options dot splice so we are going to splice and we are going to aspires from math.random so it will be completely a random number so we are sorry math.floor first of all because so because we don't want to have the decimal point inside of this random number so now we can use the method number sorry random so it will give us a random number now we can multiply it with the options dot length and also we wanna need to actually add a one so now it will be the splice start point and we wanna remove nothing actually we wanna add something so that's why make sure that we have zero because we don't wanna remove anything and inside that we wanna place our answer so if i save now if i come here in the console now you can see that we have our these options and the correct answer is the okay 47 which is here the second one and if i refresh now as you can see that the correct answer is the this one and which is the last one now you can see that from the previous one and this one we have a correct answer which is actually placed randomly the previous one was the third one which is the correct answer but this time we have the fourth one which is the cartons are as you can see and if i refresh so this will change always as you can see that now we have the fourth one and this time we have the second one and this time what was the curtains are which is the second one as you can see that so it's changing so now we don't have to worry about the constant placement of the current answer so now it will place the curtains are randomly inside of our these options so perfect and when we actually get rid of this problem now we can go further and generate our html for the question so now for now as you can see that we don't have any kind of question but we have it inside of our javascript but we don't have it in our dom so let's actually generate html and show our question to our user so for that we will have a generate html function so i can say something like generate generate html or template you can say and here it will take our question and also it will take the options and it will generate our html or the template so let's get this function here so let's say that function and here we have access of our questions and also we have our access so let's keep it question and also we have the access of our options array so perfect and here we will generate our html so first thing that i want to have here is the options element and here i just can say that options element dot in html first of all let's clean up so if i save now you can see that we don't have any kind of thing inside these options element because we are clearing the options element so when we have nothing inside these options now we can say that of all let's actually get the question so question i can say that question element dot inner text so in our text will be the question that we have so if i save now you can see that we have our i don't know that's a wrong question okay now you can see that we have our questions here every time we will refresh we will have a new question so let's also generate our html for the option so come here and say that options so we have the options we can map through that and let's say that every option and here let's say that we will create for every option we will create something as you can see that we have here so for every option as you can see that in our html we have this div and that's what we are generating here in every option we are mapping through this every option that we have and we are actually creating this thing so we can see that we have a div with a class of option and inside that we have a input and we have a level so first of all let's have this div with a class of option so we can say that div or we can also name is item so item equals to document dot create element and we wanna create a div actually and now we can apply or we can add a class actually so because you can see that in our html we have this class for the div which is the option class so div dot class list dot not div actually it is now item so item dot class list dot ad and we wanna add this option class here that we have and now inside this option div i have these two things as you can see so let me copy this input and the level and here what i need to do actually i can say something like item dot in our html so inside this item that we have here we wanna have some html inside this item so i just can say that item.html and i can open my now inside that we just can paste our copied code now you can see that what we have we have input and also we have the level so now what i have is i have this backticks and whenever we have these backticks we can actually manipulate this a string with the javascript so how we can do that i can say something like the level will be the option that we have so i just can cut it and we can create this dollar sign and curly brackets now we can write javascript inside this string so the level that we want to have is we want to have the level that we have for our option so let's have this option here so option and if i save so as you can see that we have our option but we don't or we can't see it because we need to actually append this inside of our this option element so inside so let's append this so i just can say that option element dot append child and actually i wanna append these item so now you can see that i have my options perfectly because as you can see then the option that i have here have the same name that we have our option so now you can see that it is showing all of our option that we have here when the fetch is sent and also we need to change the option id so it will be something like option dash one and every time i will render that or i will so let me show you what i mean so for that every time whenever i will have these the label or the id for the input is the option one and for the second one also have the option one and the for the third one also have the option one so we need to actually dynamically generate this id because you can see that now we can't actually select anything because for every time it is selecting the option one because the id is the option one that we have so we need to change these id so for that i can say in our map what i have actually i also have the index and with this index we can make it dynamic so here let's say that we can dynamically change it with the index so for the first one it will be the one for the second one it will be two and it will go on and also make it here for the option it will be the index so now if i save and come here and now you can see that for the first one it is the option zero actually i need to make it index plus one so that it have the one two three instead of zero one two so now you can see how is the option so now you can see that there's option one and that's the option two that's the option three so now we have separate id for each of our item out of our option as you can see so also for the value i will have the option name or option that we have here so that's option that i want to have as a value so i just can say that that will be the option so now if i open this now you can see that for the true the value is the true and for the false the value is the false so whatever the option will be the value will be the same so that's it as you consider we just perfectly generating this input or the options that you can see here so after that whenever we perfectly generating actually we have now a perfect quiz app here which we can select our answer and we can submit our answer also so let's handle this submit answer so here after the quiz app let's have our submit handle so let's say that inside of our form dot add-in listener so as you can see that that's our form that's what we are calling here so we are adding an even listener which is the submit event actually whenever we will submit this form by clicking the submit button so we are listening for the submit and whenever we will submit that we wanna do something so we will have our event here and what i want to do i can say something like first of all we need to prevent the default behavior so prevent default and also let's say that if so sometime the user will actually submit the quiz without selecting anything so for that actually we need to prevent that we don't want that so for this kind of thing i can actually check it here so if our the squeeze have any kind of value if we have any kind of value that means the user actually selected something so we need to check it so i can do something like e.target dot quiz which is the name of our this form sorry this input if this input have any kind of value means we are actually selecting something so if we select we need to go further so let's say that we will check it so let's for now that's console log so console.log and we'll say that you submit that this quiz and here else what i want to do else i will return means if the user don't select anything we will return otherwise if the user select any answer or any question or any option each will actually console log this thing so if i save and come here in the console so let's actually select this one and submit so you can see that the submit you submitted this quiz means actually it is working so let's see that whenever we will submit without selecting what it will do so if i submit as you can see that it is not doing anything perfect that's what we want actually so let's come here without console logging so instead of console.log i just can call a function so let's say that check quiz so it will actually check the quiz so inside this we will actually pass our selected value so to get the selected value i just can say that e dot target dot quiz dot value we are calling this function and inside this function we are passing our selected value and let's actually come here and create this function so the function is the check quiz so function check quiz and inside that we have the value which is actually the correct answer oh sorry the selected answer so i can name it selected here select that and here what i need to do actually i need to say that whenever i will submit first of all how do i need actually i need to change these insert or the plate number because whenever i will submit the round is finished so i already played or i already answered one round so i need to improve or i need to change this number so for that i need to actually afford that i have these answered question number and also the s-core number so i need to actually increase those number so if i select or if i submit i need to first of all create or sorry i need to increase the answer number so let's say that answered question will plus plus and we need to check our selected if it is the correct answer we will increase our score also so to select or actually to check it i can say something like selected is equal to our answer so we have our answer here as you can see that so that's the answer that we have here so we are getting the answer from the rpm so we are actually checking the answer with the selected one and if it is true we will actually say that s code dot plus plus not dot actually score plus plus so means it will increase the score number so now you can see that we are actually increasing our answer question and also the score number so for that actually we can't see them here as you can see that that's the static value that we have in our html so to change them i will call another function here so let's create another function which is actually update scoreboard so update core board so that's the function and let's get the function here so function update score port so inside this update scoreboard function what i want to do i want to say that score element dot inner text will be scored elements means this one that we selected in the top of our javascript file and inside that i wanna change it with the score sorry and this one that we have score so if i save now whenever i will have a correct answer it will actually update the s code and also let's say that whenever we'll submit we actually change we want to change this plate number also so let's say that here the answer element dot inner text will be answered question so now if i come here and let's say that for the initial state both will be zero and you can see that the both is zero and if i come here and console log so let me copy sorry not here here let's console.log the answer and if i console.log now you can see that's the curtains are so let's select this one so that's the condenser and if i submit now you can see that both are one means we played one and our score is also one so let's say that we are selecting a wrong answer and if i submit we played one but what i have is our score is zero because we selected the wrong one so it's working perfectly so now you can see that we actually updating the scoreboard perfectly and after that in our check quiz option sorry function what i want to do i want to say that form dot quiz dot for each so when we actually submitted so when we actually submitted our form or this quiz now we have our all the options and now what i can do actually inside these option we can actually loop or map through them so as you can see that that's a note list so for that we don't have the access of map and now what i can do instead of map i can use forage so form dot quiz dot forage means these all options that we have here now what i can do i can say that for each of our option i can say that for each input i wanna check the correct answer so let's say that if the input dot value is equals to our answer means the value is equals to our correct answer means that's one that we are looking for and what i want to do actually i want to add a class simple class so let's say that i can say something like import dot parent element dot class list class list dot add and i wanna add a correct answer correct this class so if i save and inspect and as you can see that here here here quiz form and all the options and if i open this that's all options so if i say that that's the option that is selected and if i submit now you can see that the actual current answer is the last one which is this one fourth one so you can see that also whenever we submitted we are checking all the options and we are also adding this class which is the correct class in the option that we have and you can see that that's actually the correct answer it is doing its job so now what i can do i can add a separator style to this correct option whenever we submit our answer so let me show you what i mean here let's say that from form what i'm writing so form here and in the option even the option have the correct class i wanna change the background color so let me copy the background color it is the green actually i don't need to copy it so that's the green so now you can see that that's what i'm talking about so whenever i am selecting one and i'm submitting one whenever i'll submit i will go through each of every option and see which is the currency and if i find the currency i will actually add this class to this one and it will basically make the background green so let's submit it now you can see that that's the last one which is the color tensor and it is making the background white sorry background green so now what i want to do actually after that let's come back to our even listener here so after the quiz checking what i want to do actually i want to hide this submit button so instead of submit button i want to show two more button so i want to show a button for the next quiz or i wanna have another button for our finish quiz so for that first of all we need to remove this button that we have here so let's say that e dot target dot query selector and inside that i have a button and i just can say that a style dot display equals to none so let me check it so whenever i will select and submit now you can see that the summing button is perfectly hidden so after that i will generate two buttons as i said so let's generate them so for that i will create another function so generate button and here let's create the function so generate buttons and let's generate actual our button not like that it will be curly brackets and for that first of all let's say that constant finish button so the first one will be the finish button btn and we actually need to document dot create element and we will actually create a button and after that i'll say that finish button that we have in the inner text the button text means that will be the finish and after that i will also have the finish button dot set attribute i wanna add a attribute so the attribute will be the type so the type is it is a regular button so now add a class list in this finish button so finish button dot class list dot add and i wanna have the class which is the finish pattern and finally what i need to do actually i need to append this in our buttons element so buttons element dot append child and it will be the next sorry finish button so if i save and whenever i'll submit but it's not we have a console log so in the line 80 we have a problem okay the problem is it is a function we need to say that so function are not like that like that so now you can see that whenever i'll select and submit it will remove the submit button and it will add this finish button and also what i want to do actually i want to have another button which is the next quiz button so let's do it same thing so constant so what i can do actually i can duplicate this thing and paste it here so instead of this finish button i will have the next button so next button and after the next button so actually let me duplicate or let me select it multiple times and let's say that next button and also let's do it here so it will be say that next quiz and also the class will be the next button and if i save and let's say that i submit and now you can see that i have finish button and also the next button so perfect so i want to show them in one line so for that i need to go to the style.css finish button finish button and also the next button i will say that the width will be 50 percent and also display them as a inline block so as you can see that now these two buttons in one line and after that let's also say that i wanna have a one pixel border so this border will separate them from each other so let's say that the finish button and here i will say that border actually so border will be one pixel and solid and it will be for only the right side and the color is the black now you can see that we have this border and also we wanna have the same for the next button next button but for this time it will be in the left side so if i save now you can see that we have one pixel and one pixel total two pixel solid border in the between them so it's looking amazing so now we have these two buttons so whenever i'll select select one and submit now we have this two buttons and now what i need actually i need to add functionality for these two buttons so come here whenever i am adding these two buttons i need to add some even listener so let's say that's here so finish buttons listener and i wanna add a event for the click so whenever i'll click i'll call a function so for that it will be the finish quiz because whenever i click this finish button means i wanna finish the quiz so the function name will be the finish quiz so i will create this function in a moment so also same for our next button so next button btn e with capital and also i will have the function which is the get next quiz for me and if i save and i will actually have those function so let's have those function first of all let's say that let's get the new quiz so function get next quiz and here first of all whenever let me show you whenever i'll click this next button what i want to do actually first of all i wanna remove these two buttons that we have here so to remove these two buttons what i wanna do i need to select them first of all constant next button equals to document document.queryselector and i wanna say that next button inside our buttons element so i don't need to do that so i have now the next button and also select the finish button finish and also select it or to name it as a finish button so now we have selected these buttons and now what i need to do actually i need to remove them from the buttons element so buttons element dot remove child so remove child and i wanna remove the child which is the next button and also the finish button so perfect so let's say that we have this and submit that we are now in the next button sorry we have these two buttons and if i click this next quiz nothing is happening so why it is not doing so in our console we have an error in the line 93 so here yeah that's the one finish quiz is not defined okay we need to create this function also so let's get this function down here so function and for now let's say that console log quiz is finished and select this submit and whenever i'll click this next quiz perfect we just remove these two buttons that we have so after that i wanna run our quiz app here that we have the our main function once again so basically it will run our quiz functionality once again for our next quiz so quiz app and that's it so if i save and let's say that this one and submit and next quiz now we are getting our quiz so the problem is as you can see that we don't have our submit button back so we need to get our submit button back so for that what i need to do actually before our quiz app so before we call our quiz app we need to get back our submit button so from here i just can say that buttons element dot query selector and we need to call our buttons so button and now we have multiple button we need to select it with the type and here let's say that the type is actually it's a submit button and here i just can say that a style dot display display and the display will be block perfect so let me check it so perfect now we have our summon button back and we can actually submit the next one as you can see perfect it's working perfectly so the next thing that i want to do actually hi number i'll submit it i wanna do something and i will finish this quiz so that's what we are doing here so in the finish quiz first of all we need to do same thing that we did in our next quiz we need to remove all the buttons that we have down here so just copy this and paste it that we have here and also let's get back our this submit button and after that what i want to do actually i wanna have a nice overlay for our finished result so whenever i will finish the quiz i wanna show something nice something nice result sheet for our user so for that i will have an overlay actually so let's have the overlay here so let's say that constant overlay equals to document.cat so document dot create element it will be a div and also in the overlay i will have a list sorry class list and i wanna add some class so the class i want to add is the result overlay and now we have this class so also inside of this overlay i wanna show the result here so let's say that i just can say that overlay dot in our html will be so backticks or template details whatever you say so here i want to have a div or i just can say that div and inside this div i'll have a class and here let's say that the class will be the final result and also here i will show the result so i will write the javascript with this dollar sign and curly brackets and inside that i will say that is code and slash i will say that how many question they answered so answer question so that will be the answer board and sorry that will be the result board and after that i will also have a button to play the quiz again so let's say that button and here i will say that play again so now what i need to do actually i need to append this overlay inside of our container so i just can say that container element dot app and child and i wanna append this overlay perfectly and now i should see something so if i submit and finish now you can see that i have the overlapping means i have the result and also i have a button for our plugin so the next thing that i want to do actually i need to style it so i need to have the overlay perfectly so no for now i don't have any kind of a style so that's why it's looking so ugly so for that i can come here and say that inside the container i just can get this result overlay overlay and here we need to first of all get the perfect container and here let's say that the position will be absolute and also it will be in the top zero and also in the lab zero and not like that and also let's say that the height and the width will be the hundred percent so that it will cover everything so width will be hundred percent and if i save now it is covering but we can't see that it is covering because we don't have any kind of background color so the background color that i want to have is let me copy the color paste it here and if i save now you can see that it is perfectly covering because we can't see anything so that's mean it's covering so let's say that the texture line will be the center and now i can see everything is center and also say that display will be the flags and align items align items will be the center and also that justify content will be the center now you can see everything is center and also i want to say that flex direction will be the column so now you can see that not the column divides only the column so perfect and now i i need so now what i need actually i need to style them so for that i just can say that in the container i have these results overlay and inside that i have another class which is the final result so what i need i need to say that i need to increase the font size which will be the five gram so big one so you can see that that's our result and also i wanna style this play again button so i wanna have the style the same style that we have our form button so for that i just can say that i will have the same style for this one so container and result overlay and inside that i have a button and if i save now you can see that i have the same style and also i want to have the same overlay sorry i wanna have the same hover effects for this one so just copy this and also apply it from this one so now you can see that however i'll hover i will have the same style that we have in our form so now we have this new button which is the play again so let's also add functionality for this button too so you can see that that's the button that we have so whenever we have this button we wanna add a even listener for this button so i just said that so to add the functionality for this play again button i just can say that document.queryselector and here i just can say that i wanna select this button which is inside of our final results so find not final result resultability so result overlay and inside that i'll have this button and here what i want to do i wanna do something means i wanna add even listener actually so i wanna add even lesser the event will be the click so whenever i'll click this button i want to do something so i will run this function with this event and inside that let's do something so let's say that whenever i will click this function means i wanna play the game once again so for that what i can do i can call the function which is the play again actually i can do it very easily here i don't need to do these things so here i just say that play again so let's create this function here so function in and here let's say that whenever i'll call this function so i will do something simple here so whenever i wanna play again what i wanna do which i wanna decide the scoreboard so for that i need to say that the score will be zero and also the answered question will be also 0 and means i want to reset them from 0 and also i wanna call my quiz app manually so it will start the game once again so if i save and here you can see that if i submit now i'm played one and the score is one so let's also get the next quiz so it's saying that this one and if i submit this as you can see that i played two but i don't have any kind of score so let's say that this one submit so as you can see that i played three but the score is zero so let's say that i wanna finish my game or finish my quiz so finish it and as you consider that the score that i have so i have 0 and i played 3 quiz and if you want you can play again so let's say that if i click play again nothing is happening means we have an error here so no we don't have an error so actually here in our result overlay or what i can do actually here you can see that maybe this is not working so instead of this thing i just can say that this overlay we already have this i don't need to select with the documented query selector so overlay so let me check finish plug in still it's not working something wrong with this thing so whenever we'll click we should play again and the plugin so let me check what is happening only thing that i want to do actually whenever i click this here i wanna plug in so that's right so also i wanna remove this overlay so that's the overlay that's why we don't see any kind of change so we need to change these overlay so to change this overlay or to remove this overlay what i want to do actually here i need to make it an arrow function here and inside the arrow function i will say that overlay or i just can say that container element dot remove element or remove child you have child and i wanna remove the con sorry overlap one remove the overlay and after the removing this overlay i will call this our plug again function so that's why it is not working so i hope it will work now so now you can see that whenever i finish i have the scoreboard what is happening so let me check it once again so now you can see that we have our scoreboard oh sorry i am adding this even listener with the overlay i don't want to have the even listen in the overlay i want to have it in the plugin so overlay dot query selector so i wanna select the button okay so now that's the problem so finish now you can see that that's our thing means that's our scoreboard but whenever we wanna plug in i can click this and it will remove first of all remove the overlay itself and after that it will play again means it will it should actually they said the scoreboard it is actually resetting the scoreboard but we can't see that because we actually did not update our scoreboard so let's say that whenever i will call this or i will start our quiz app first here i wanna update our scoreboard so update the scoreboard call this function it will update the scoreboard so now it will so now it will finish or it will fix the issue so let's check it so whenever i will plug in now you can see that the escort board is reset perfectly so what i wanna do actually i wanna add placeholder so i have a image here so let me show you so that's the image that's the placeholder image so you can see that it is something lag here so whenever i'll submit i have these and whenever i have the next quiz notice now now you can see that we have this lag feelings means it will take some time to fetch the api so in this time i wanna show these ui skeleton ui so to show this skeleton ui what i wanna do actually i wanna add a function here so whenever i will call this our quiz app i will add a placeholder so let's say that add placeholder so that's a function we will create this function in a moment so let's get this function in the end of our this all functions so add placeholder so placeholder so here let's say that first of all let's have a constant and this one will be let's name it placeholder and equals to let's say that document dot query selector so sorry not query selected document dot create element we wanna create a div actually so for our placeholder so inside the div i will have a class here so let's say that div class list not like that placeholder class list class name not class name class list dot add and i wanna have this place folder and also i wanna append this in our container so container element dot placeholder sorry dot app and child i wanna append the placeholder that we have here so perfect so now if i save okay i think i have an typo here so that's why so holder something like that sorry for the typo so now you can see that in our line number 141 we have an error here so because we need to make sure that we are adding a function so the keyword function is needed so in our container now we should see a placeholder div as you can see that so we need to make an style for the placeholder so let's come here in our style and add some style here so inside the container we have this placeholder so container i have this placeholder so placeholder i just can say that the position will be the absolute also say that the top will be zero and also say that the left will be zero and the height will be 100 because i want to cover it full and we could be also 100 and the background image for our placeholder will be the image that we have in our so here is the so it's in the root directory or so i just can get that url and that's the image okay perfect and after that i want to have a background color so the background color will be the one that we have already in our background of the container so that's the one and also let's say that the background position will be center and also say that background size will be 90 percent and also background repeat will be no repeat perfect as you can see that that's our placeholder or you can say that pre-loading image whatever you can say so you can see that and what i want to do actually whenever our data is fully fetched or fully loaded i wanna hide this placeholder i don't wanna show that for a long time so let's say that whenever our data is fully fetched i wanna remove this placeholder so we will do that whenever we will generate our html so in our generate html as you can see that we are generating the html that's mean we already have our data we need we are adding our html here so this is the time we need to remove our placeholder so i will add another function for these things so let's say that remove placeholder so that's the function and inside this function so let's get this function first of all so function remove placeholder and here let's say that what i want to do i wanna remove this placeholder from our container so let's say that container element dot remove child and i wanna remove these placeholders so first of all to remove it i need to get it or i need to grab it so constant i just can say that document document dot query selector and i need to select it with our so name it first of all so that's why it's showing this error so we need to say that we wanna get the placeholder so that's what we have as a class so get that placeholder so please hold down and we need to remove it so press holder so if i save now you can see that we have it submit next button that we have our placeholder whenever the perfect data is loaded we are generating our html we are removing the placeholder from here so you can see that it is working perfectly we have finished the quiz here as you can see i think that's it we don't have anything to add as you can see we have this nice placeholder or you can say preloading image and also let's test it with the mobile so in the iphone x it's looking good so next so now you can see that that's our image so now you saw that it is taking too much time sometime but that's what we have as a free api maybe when you you will use your own api or the paid api it will be fast but for now it is a free api and it is working well actually so now that's it as you can see if you want what you can do actually you can add some mobile responsive css so let's say that in the media the max width 768 pixel and let's say that in our html i will change the font size will be 17 pixel now you can see that it is a little small in our mobile and also in the container and and the form the h1 means the question the font size will be 1.5 ram so perfect you can see i love these pre-loading image that we have maybe we can add a shiny effect whenever we have this preloading image so for now that's it actually i don't need to add anything else so as you can see we have this quizapp perfectly working so that's it we have so many functional thing that we learn in this quiz app so also i want to show something here so let's say that we have this okay so in our inspect the we need to remove all the console first of all so let's remove the console from here and also remove the console from console we have three console so also remove the console from here so what i want to show actually so that's our test or app whatever we have so the user what he can do actually in our code you can see that we have bunch of global variable as you can see so the user can have the access of this global variable in the console so he can access them and also you can notice that in our global variable we have also our answers so if the user wants what he can do actually he can come here in the console and he can search for answer if any kind of answer they have and he will get the answer as you can see so that's the answer as you can see that that's the next quiz and if i come here and also if i get the answer for this one as you can see that that's the answer so basically what we have is we have the access of this global variable of our code so we need to prevent that so for that what i can do actually i can create something so in our top of the code i can create anonymous function so let's say that function and here i will have this anonymous function so inside that i will have all of my code and paste it inside that and what i want to do actually now you can see that i wanna wrap it with a parenthesis the whole thing and also i wanna run this instantly so for now what i have is i don't have any kind of global variable and also i don't need to run this anonymous function or call this anonymous function because we are actually invoking it right there so that's it if we save now the user if he wants he want to cheat let's say that he will come here and say that i have this answer sorry answer so you can see that we don't have this answer anymore because we don't have this global video so now it is fixed perfectly now we have perfectly going on this app so that's it for this video i hope you liked this video if you did please give it a thumbs up and don't forget to subscribe the channel because i make this kind of javascript related video so if you want to see more video like this one please subscribe the channel and make sure that you also hit the bell icon and my name is arfan and i will see you in the next video till then bye bye for the harvest prepare to die

Channel: WEB CIFAR

Views: 4,050

Keywords: javascript quiz, quiz app, quiz app tutorial, quiz app javascript, javascript quiz app, javascript quiz game, javaascript quiz tutorial, build a quiz, build a quiz app, javascript project, javascript project tutorial, javascript quiz application, quiz app tutorial javascript, web development quiz, web development quiz app, quiz application, quiz tutorial, quiz tutorial javascript, quiz tutorial game, quiz game tutorial, web cifar, shaifArfan, js projects, practice project

Id: qXXM9nVxLWk

Length: 101min 11sec (6071 seconds)

Published: Wed Sep 23 2020