Coding a Quiz App in ReactJS - React Resume Projects

[Music] hey guys welcome back to another video and actually really quick before we actually start the project i just want to show what we're going to be building it is a quiz app and it isn't exactly like this one we're not going to have username for example but it's very similar you can start the quiz you can like answer some questions move to the questions and i don't know i'm just going to put whatever here like this and when you finish the quiz it's going to show you your score and also you're able to restart the quiz and just do the quiz all over again if you want to so this is kind of what we're going to be building so let's actually start and go into the implementation of this project hey guys how's it going i'm back here with another video and today we're going to be building a project in react which i actually wanted to build this uh since like a long time ago but i i got caught up with other videos and today i decided that it is the day that we're actually going to build this so this is actually a quiz app and for those who don't know i truly believe that building a quiz app in react is one of the best beginners projects which is kind of like not fully beginner it is beginner to intermediate because we touch upon a lot of different topics that are extremely important so i would say that this is an is a very helpful project that if you're starting out with react or even if you already know react it will definitely improve your skills so we're going to be building this in this video and by the way the code is all in the description so if you want to check it out you can just follow the link in the description so let's actually get started right um you can see right here we have a very simple app.js i'm just going to delete like all the unnecessary stuff um let me delete this just stuff that we we're not going to use i'm going to delete the index.css here and i'm going to come here and i'm also going to delete this okay so now this is our project right so what exactly do we want to do i want to just kind of set up the ui a bit for just a so we kind of have an idea and the first thing i want to do is actually just want to display a title saying quiz app like this and if we go to our project over here and go to localhost you'll see that now we have just a simple react project with quiz app appearing at the top but now we actually want to start building our project so one thing that is important to understand is when i like to make a quiz app um i like to treat like like we have different states right or even if you're building a game you should probably know that there are different states to the game there's the state in which the game is paused the state in which you are in the menu right so this is something that we have to account for in our project we want to have a main menu where you start the quiz we want to have a state for when you're playing the quiz and we want to have a state for when you finish the quiz right so what we're going to do is we're going to create here a state um an actual state from react so i'm going to import state from from react like this use state from react so this is what i'm going to be using and we're going to import and we're going to actually create the state called gamestate and this is just a state a variable that is going to represent which state we're actually in so set game state like this and this is going to be equal to use state and it's going to be a string it's initial initially it will get a value of menu we're going to kind of like determine what menu means but remember we're going to have a quiz app so it's going to have three different states menu play and end screen right so initially when you open up the app you want to see the main menu right so this is going to be the first thing that we do like it's its initial value and now that we have actually our game state set up we can start actually building our quiz right so the thing is that um we're going to divide this project into different components so i'm going to create a folder here called components and we're going to render certain components based on the state right so we're going to actually have three components as i mentioned the first one is going to be the main menu and i'm going to just create it over here main menu.js and it's just going to be very simple i'm just going to put some inputs and a button to say something like start the game start the quiz right and we're also going to have another component called the quiz the actual quiz so let's create quiz.js and let's just create this over here and now let's create the final component which is going to be the end screen so when you finish the game you see your score like how many questions you got right that kind of stuff right so we're i'm just creating it so we have an idea of what we're going to be doing however we're only going to focus initially on the main menu and then move on to the quiz and finally to the end screen so now that we have that done we can actually use our state to determine which component is going to be rendered right so so what i'm going to do is i'm just going to come over here and i'm going to like for for each of these components i'm just going to put a a different task text over here so i'm going to say main menu for the main menu and for the quiz for example i'm going to put quiz and what this i'm just doing this so we have an idea if the state will work so we can come here to our to our return statement over here and we can just ask okay if the game state is equal to uh menu right so if the game state is equal to menu then we want to render the menu the menu component right so i'm just going to do it like this the menu component so it's actually main menu like this and we actually we obviously have to import this so i'm just gonna import main menu from and we're gonna just go to the components folder and try to go to the main menu file okay so in theory what this is doing is just asking okay is the game state equal to menu if it is then i want to render the main menu component let's check to see if this is working you can see that it is we're seeing the main menu like the text that we put being displayed over here and if we change this to something that is not menu you can see that it shouldn't appear yeah it doesn't appear so this means it's working now let's just add the other ones so we're going to ask the same question two more times one is going to be if game state is equal to quiz and one is going to be if game state is equal to end screen so let's just render the component quiz and let's also render the component end screen okay now we just have to import both quiz and end screen over here so i'm just going to say import quiz and import end screen okay and also change this to quiz and change this to end screen okay so now we actually have our logic for rendering our components um kind of set up here we could have done this differently if we wanted to but i think that this is the simplest way of doing it so we're just saying that we determine like that the value of the game state will determine which component is being rendered so what exactly do we do now well let's start by building our menu right because we we just want to have a visual presentation of what our main menu will be looking at like so let's just come over here and basically what we want to do is we're just going to first of all give this a class name because we're going to do some styling and let's call this menu and then inside of here we want to add some very simple stuff i'm just actually to be honest just gonna add a button and this button will say something like um i don't know start quiz and it's going to have obviously an on click which we're not going to add right now but it's going to have an on click which is supposed to change the state of the like the game state to quiz right so this is the idea if we click on this button we change the game state to quiz and it will automatically stop rendering the menu and start rendering the quiz because the game's thing changed right however how are we going to do this right because we want to change the state inside of main menu and we want to have a state that is like accessible throughout all the different um siblings component rights so how exactly do we do this well this for those who are familiar with um sounds like something that can be helped that can be solved using the context api so this is why it can also be solved in different ways but the context api is a really important skill to learn so i think that this is a really good example of why you would need it and i just think that is a great introduction if you've never used it before so what we're going to be doing is we're going to be using we're going to create a global state which can be accessed throughout the whole um project so the global save will be this one right here and we can just change its value throughout the whole like all the different components so how exactly are we going to do this well i'm going to create here um another folder which is going i like to call it helpers um it's just going to be a folder containing all the different extra files that we need to create that doesn't that aren't components and we just want to keep it organized right so let's create a file called contexts.js and it's just going to be a file where we're going to contain all the different contexts that we want to have um in this case we're just going to create a very simple one um like like it's just for organizational purposes but we need to first of all import create context to create a global state create context from react and as always we have to come here at the bottom and we have to export the context so we're going to create the context and let's just call it quiz context is equal to create context and honestly just like this we can just leave it like this and we're just exporting this quiz context to like like whichever file we want to access it so now that we have this done um we can come here to our actual parent component which is the app and we can start actually writing all the logic that will help us um make this into a global state right into a context variable so how are we going to do this first of all we actually have to import the quiz context that we just created so import quiz context from and we have to access the the helpers slash context file and now we have actually like we have access to that variable that we created and why do we need this because we can use actually a hook in react called use context to basically just literally what it says right use the context in this component right here and actually the the the logic behind this is we're going to come over here and we're going to create a kind of a context provider that will wrap around all the different components that we want to pass the the state through so we actually want to have access to the state in the menu the quiz and the end screen right so let's just create the the quiz context dot provider like this and we're going to wrap this whole thing around with this like this and inside of here we can pass actually a value and this value is an object containing um and like all the different states that we want to make as like all the different it doesn't even need to be a state it can be just a normal variable or it can be the function for the state and we can just pass it over here and whenever we call this this context in those files we'll have full access to that state so this is the the beauty of using the context api we can just come over here and pass the game state and also the function that changes the game state so set game state and now we when we call this context inside of this components we can have access to both of these values and this is exactly what we're going to be doing we're going to come here to the main menu.js and inside of here we're going to import the use context from react as well so we're going to come over here and say use context and we're also going to import the quiz context because it's something that you have to import it twice so quiz context from and we're going to try to go to the helpers context okay and now what we can do is we can inside of this main menu we can literally just say const and we can destructure all the different things that we pass in our provider so we pass the game state and a set game state right so if we set this equal to use context and grab the quiz context so the quiz context over here now we can destructure all the different things that we passed there one of the things that we passed there there is the game state right and the other one is the set game state and now we have access to both of these pieces of information both like the variable and the function right so literally what we want to do is we want to come over here and we want to say set game state no actually no not this we're going to say on click and in this on click we want to just basically call the set gamestate function to change the value for the state to be equal to quiz and we're doing this from inside the main menu so this actually should be working and let's check to see if it's actually working you can see that on the on the menu right on the main menu there is a button saying start quiz but if i click on this i hope that it will actually disappear and what will show is actually just the word quiz because remember that on our quest component we have no buttons and we have um actually just the word quiz right so let's test to see if this is working if i click on this you see that this is exactly what happens meaning that we're successfully um accessing the state inside of our main menu so this is basically it um for building up our our main menu we're just gonna do some styling which is important in my opinion and because you saw how it looked it looked horrible so we actually have to import the css right um we're gonna do everything inside of this app.css file which like if you if you're building something more complex then definitely organize it better but um this is just for demonstration purposes and this over here all of this just came with a project so i'm just going to delete everything and we're actually going to come over here and we're going to access the app which already comes with the project app is just this like the main div that starts the whole thing and i'm just going to add some properties to it so basically the first thing that i want to add is i want to change the font family for everything to be aerial it's just something that i like to do i don't know if other people like it but i i literally just like ariel and then we're going to make the display flex and i'm going to do the classic like justifying the content to center and align aligning the contact like aligning items to center as well and we also want to make the flex direction flex direction equal to column so that stuff are stacked on top of each other we are not going to be able to see any of the changes right now um but let's actually start by um adding some some more styling to the menu and you guys will clearly see what i'm what we did over here so the menu will actually be something very simple let's just make it a width of like 600 pixels actually let's make this 500 something like this um the height will also have 500 pixels and we can add some border radius so border radius of like 10 pixels and we're gonna add some background color there's this color which i like to use which is light sea green and i think it will look good here and then we can also we have to display flex and do the same thing that we did before but we're not gonna justify anything yet um actually maybe we will because the button there's only the button right so we're gonna we're gonna say flex direction equal to column and then justify content center and then align items center as well so let's check to see how this looks um it doesn't look like anything okay yeah it looks like this we have a just a box and at the center of our project and this is basically what we're going to be doing right the box will be how our game is going to be set up um inside of here is where we put all of our ui stuff and all that kind of stuff so literally it's it's just like the um the actual setup for our project so now let's just access the button over here and let's just do some stuff with it just just so that we can style it a bit so the button is gonna it's gonna have just some simple styling we're going to give it a width of 300 pixels and the height will be equal to 50 pixels the margin will be equal to 5 pixels um just so that if we want to add more inputs we can just we'll have a margin then i don't want to have any border so i'm just going to say border equal to none i'm also going to give some border radius to the button so border radius equal to 5 pixels and we want to add some font size into it so that the fonts look bigger right so we're just going to say font size equal to 20 pixels and obviously i like to set the cursor equal to pointer so that it looks better so now this is our button you can see that it looks great if i click on it everything disappears because we changed the game state and it just it's just just at the the middle right you can make this look better a hundred percent you can put different inputs you can put like a place for you to write your username if you want to add username functionality that kind of stuff but i'm actually just going to leave it this way because this isn't actually the focus of the project we're going to get into starting to build our quiz which is actually the most important part of our project so what do we do now that we want to since we want to build our quiz right so what we do is we start actually by coming here to we're going to close the main menu and we're just going to come here to our quiz.js and here's where everything starts to to to get just like it starts getting better right we start actually writing some logic behind this so the idea is that we're going to first of all have a question bank and what do i mean by the question bank is um we're going to have a a file over here and i'm going to create it in the helpers just so that we have it over here let's call it question bank it's just a list of all the different questions that we might want to have in our application right and what exactly is this well it's just literally a file where we're going to export an array so we're going to create an array over here called questions and it's going to be an array containing objects and each object is a question so the way we're going to structure this is each question will have a prompt which is the question it will have four options which is like option a option b option c and option d and it's going to have an answer so the best way of doing this is just saying okay prompt uh the prompt is gonna be something like what what is one plus three and the options will be okay let me just put option a will be 24 option b is going to be um 21 um option c will be four and option d will be two and then the answer will obviously be let me just say answer will be option c right so this is how we're going to structure our questions we're going to have a prompt we're going to have four options and we're gonna have an answer each question will have this same structure which will make it a lot like very easy for us to determine which answer is correct also determine um which of the options are the correct answer right so this is what we're going to be doing i'm going to put more questions here i don't want to waste the video's time but basically just creating a bunch of questions i'm going to create three questions and i'm just going to put them right here um and i'll come back in a second okay guys so i'm back here and as you can see i created three questions the first one like we did before is what is one plus three we know the option is the answer is four um then i asked which of this is a streaming platform um we have twitter twitch google and robinhood um the answer is twitch um then the last one is best tech youtube channel i know this isn't the question but which is the best attack youtube channel um the answer is pedro tech but the other options are also really good um so this is kind of the kind of questions you have to put um this is this structure and now that we have our question but our question being done um let's actually start implementing our quiz right so let's come here to the quiz.js which is the actual component which we're going to have our quiz and let's start brainstorming what we want to do right so first of all i want to come over here and give a class name of quiz just so that we have an idea so that when we style this we have our quiz right and let's think about this um what do we want to display right we want to basically just display first of all a title like for each question we want to display a title containing the current question um like prompt and then we want to display all the different options right so option a option b option c and option d and at the bottom we might want to have a button saying something like move to the next question so how do we determine which question we're in well let's think about this initially like initially the question will always be zero right the first question will always be zero so that's something that we can already implement we can create a state here so i'm just gonna say use state we're going to import this and let's just create a state over here which is going to be called current question and the the function will be set current question and it's going to be equal to use state and it's going to be a number so initially it will be 0. so what happens is we're going to have this state which is going to be a reference to the array so this value over here will be a reference to the index in the array so the first question will be question zero because arrays starts with zero right so when we we have the current state equal to zero then it will only show information for the first element in the array which is this so that means that when we click the next question button the only thing we do is we just increment the set current like we just increment current question plus one and now current question is one and one is this question over here so everything will change accordingly to the the question like the element in the array in which um is being referenced by the current question state so this is kind of like the major part of our logic here we can use this to determine which question we're in so since we have this over here literally what we can do is whenever we want to access something like i'm going to create the h1 tag which is going to have the prompt so like literally when we if we want to determine which like piece of information we want to display we can just say okay the prompt will be um first of all we need to also import questions right we need to have access to the questions so i'm just gonna import um from let me just say dot slash um dot dot slash helpers slash um let me see question bank so from here we can just import questions and um inside of here now we have access to this array so what we can do is in our h1 we can say okay i want to access the questions array and now i want to access the the element that exists in the current question right which initially it's zero so this is just something that we can use right and by the way i i just realized i wrote question wrong it's like this question and we can just copy this and paste it over here and then if we want to access the prompt we can just say dot prompt right and now we're basically just displaying the prompt of the question so let's save this and let's check to see how this looks i'm going to start the quiz and you can see that the prompt for the first question appears over here but if we want to move the second question for example we just need to change this to one and we'll make this equal to one and now it will say which is the the streaming platform right um so basically this is the idea let me just do it like this and this is how we're going to be accessing the different pieces of information from our question bank so now that we have this part done we're actually going to start implementing the buttons right because obviously we want to have all the different questions um being displayed like all the different options so let's actually make this work how are we going to do this well we're going to come over here and i'm just going to create a div which is going to ri like wrap around all the options so i'm just going to pass a class name called options and inside of here we're going to have all the different options that we might want to have right so we want to have a button like each option will be will be a button and in this case over here for the button like the the label for the button literally all we do is we just say questions we pass the current question so we want to access the current question and we're gonna have four buttons right so we can just do it like this we're just gonna copy and paste four times because we have four options but the first one will display as the label the option a the second one will be option b option c and options d right so this is the idea let me just say option b um this one will be option c and this will be option d okay let me save this you'll see that now the button should appear let me just click on this um okay why aren't they appearing did i save this yeah okay now that now the the options appear so you know that the first question there the options are all numbers so you see that the options actually appear right the answer for this is four if we go to the next question which is question number one you'll see that the uh the options will appear right so this is kind of how we're doing this and for the on click what we want to do is we actually want to create a state called the option we chose right it's just a reference to the option we chose because we want to have here at the bottom right below this we want to have a button which is kind of going to the next question right so let's just create this button it's going to say something like next question and what we want to do is we want to basically just display this over here we're going to have all the options available you choose your option and then you click the next question and you will register the option that you choose right so to do that we're actually going to create a state called um and let me just make this actually let me keep this as one at one right now but let's create a state called um option chosen it's just a reference to the option that you that you clicked and we're gonna say set option chosen like this it's going to be equal to use state and over here this is going to be a string why is it going to be a string well it's going to be a string because we're going to change this depending on which button we click so like if i click on the first button uh option option chosen will become option a we're gonna put a string called option a if i click on b it's gonna be option b or we can just put like a b or c or d which will make it a lot easier but this is how we're gonna have the reference to which option we chose right so oh no actually we should put option a actually you know what i'm going to do i'm going to change the answers from either like the the reference for the for the the answer won't be option a option b and option c it would actually just be like c right so this is b um let me just make it b and this over here is a so a okay let me save this and now we can do it like i just said okay so how do we actually set the option how do we choose how do we say that like when the user chooses something that thing is actually registered well we can very easily just come here and we know that this button specifically for the option a so literally what we can do is we can just pass an on click event over here which it takes a function and the function inside of here will literally just set option chosen equal to a right so if you click on this button it will just say okay option chosen is equal to a and on this one we're going to change this to b right so b and we're going to do the same thing for this and the same thing for this and we're just going to change this to d and this to c okay and now we have the logic done um you can ignore this kind of like curly braces that appear here this happens because of an extension that i have but they don't change anything i don't even know why this happens but we can just save it right here so this is kind of the idea and most importantly we actually already have our like our whole ui kind of done right we already are able to when we click on one of the options it's already registering which option we clicked because we're just setting it like we're setting the option chosen equal to whichever one we clicked right so this is kind of the logic done however we still have to do some stuff for example um let's think about this how do we how do we determine like how do we determine like if we want to move to the next question right how do we move to the next question well this is the important part we actually have to create a function we're going to create a function over here called um next question so let's just say const like this const next question it's just a function and it's going to take nothing as an argument and instead of it we're gonna just ask some basic questions and the reason why we want to ask some basic questions is because just think about this here is where we actually determine if we got the correct answer for this question or not right so how are we going to keep track of if we like our score right we need to find a way to keep track of a score because that's the whole point of a quiz right so how do we actually keep track of a score well we're going to create a state a global state in our app.js like we did with the game state which is going to be the score and this is where we're actually going to like have our final score the reason why we have to make it a global state is because we're going to display the final score in the the end screen so we have to have access to it so let's do that let's just create our score over here and set score like we did over here and this is going to be equal to use state and it's going to start at zero so basically what happens is at the end of our our quiz we're gonna display something like since we have three questions we're gonna display like our score out of three right so this number over here is just gonna keep track of how many questions we've like got correct so far so it starts at zero right and we have to pass this as a value to our context provider just so that we have access to it in our like when we use the use context hook right so let's just pass score over here and set score like this and now we are able to see um to have access to it over here we're just going to copy the like remember the logic that we just wrote on the main menu this logic right here where we imported the quiz context that kind of stuff we're going to do the same thing over here let's just copy this because it will just save time we're just importing the quiz context and we also need to import the use context hook over here so we have access to the context um like this and then finally we can just destructure the pieces of information that we want to have access to through this piece of logic over here right we're just going to grab whichever pieces of information we want to use inside of here so what exactly do we want to have well over here we don't care about this core value right now we'll only care about like our current score by the at the end when we see our our like on the end screen showing our score but we do have to have access to the function that changes the score right this over here the set score we have to have access to it because we want to keep changing the score like either incrementing it or just keeping it the same if we get a correct answer right so we can just structure it like this and over here in our next next question what we can do is we can ask okay so we just answered we just chose something right what do we do to determine if that answer is correct well we can ask if questions current question dot answer so if the answer of the current question is equal to the option chosen so if the option we chose is equal to the current questions answer then that means that we actually got the correct answer and if that is correct we just increment um set score by one so we just get score actually i just realized we actually need to get the score so i'll just say score over here we're also going to get the score and we just say we want to say we want to set score equal to score plus one so we're just incrementing our score right and like this is just if we get the correct answer if it doesn't if we don't get a correct answer we don't want to increment anything we just want to keep it the way it is and either way if we get a correct answer or don't uh if we call the next question function we want to move to the next question so how do we move to the next question right how do we like move forward well we can just say set current question equal to current question plus one we're just incrementing in the array now current question will become one and that's the next question in our question bank right so now that we have our function done we can just put this inside of our button over here so on click okay just do it like this and pass a function inside of here and we can just say um actually we can just call it a press a reference like this right and now when we click on this button it should move forward i'm actually going to make this equal to zero and for now let's actually console.log our score our actual score so we so we actually let's actually alert our score so we have an idea for actually getting our answers correct right so let's alert score and let's take a look to see if it's working um let's start the quiz we have our first question here what is oneplus 3 if we click four we chose we changed the value for option chosen and now let's click next question you can see it gave us zero but that's just something for react when we click the next question it should be one you'll see so you can see that we actually moved through the array now it's showing the next question which is a streaming platform i'm gonna click on a wrong answer like robinhood and you'll see that when i click next option it's gonna alert one because it's just something related to um updating the value you'll see yeah now it says one so it means it's perfectly working and now we got to the next question like last question and this is important because there are some edge cases that we need to take into account and i'm going to show you guys what i mean if i click um like i'll just put pedotec and click next question it's going to make a current question be equal to three but we only have three items so three as an index is like like it it isn't in the array so we're we're moving forward like despite not having more questions in our array so it's going to break you could you can see that it's actually going to break as you can see right now because we actually are trying to move uh we're trying to access an index that is further in the array than the amount of elements in the array in itself right so what exactly do we do now um so we can actually write some logic behind the the um next question button to actually fix this so how do we do this well we're going to come over here and we're actually going to ask okay if the current question her question is equal to questions dot length minus one and why are we asking this well if we are in the last question in our question bank then we don't want to click on a button that says next question because there isn't any next question let's actually write some logic to say that if we are in the last question then the button will actually display something like finish quiz and it's not going to actually move to the next question it's going to just finish the quiz but if it isn't at the last the last question we're gonna just do it as normally and just move forward in the array so when we ask is the current question equal to questions.length minus one we're just asking if we are actually in the last question so we're gonna use the ternary operator like this and ask okay if this is the case then i want to actually display a button which is going to be we're going to say something like finish quiz and like this finish quiz and over here we're going to pass a function which we're going to create right now called finish quiz right and else like if this isn't the case so if we still have more questions to move forward like to to see let's just do it as normal and just render the next question button right so this is the idea now let's write actually the finished quiz function because that's extremely important so let's just for example call a function called finish quiz and let's create this this function up here so right below the next question we're actually going to create the finish quiz and the finished quiz function is very simple um but it's going to require us to get more variables from our from our context so i'm gonna just make it like this normal function and what happens is where we're going to first of all have to check we still need to check if we if there are final answer for the final question is correct right so we have to write the same logic we need to repeat this logic over here because we still have to increase the score if our final question has the correct answer right but at the end instead of setting the current question um equal to curve question plus one we actually want to just set the game state equal to end screen so we're finishing our game right we're not moving forward we're just changing from quiz to game to end screen and obviously i could kind of merge these two functions but i don't want to confuse you guys i just want to i just want to make like a be clear that this is different things where we're only going to call the finish quiz when it is actually the last question so we're going to for example have to actually get the set gamestate function from our context so set gamestate and we're just going to come over here and say set gamestate equal to end screen like this and now let's see if this is actually working let's come over here um let's start the quiz i'm just going to choose like four um then twitch then page attack and you can see that now we're in the last question and the button doesn't says next question it actually says finish quiz so when i click on this you can see that it's actually displaying the finish quiz state and like for now we did like the end screen we actually didn't put anything here i'm just going to put like a random string so you guys can see and yeah it's actually showing the end screen which is perfect it means that we are currently um like our project is actually working so now let's just very quickly just do some ui for our quiz our quiz is actually done we just need to write the ui for for the quiz and so some css and then we're going to do some very simple logic to create the end screen so how exactly do we write this and this logic for like the ui for the quiz right so i'm going to come here to our app.css and we actually want to create something similar to the menu but for the quiz so it's going to be the same container so i'm just going to come over here and i'm going to say dot quiz like this and to be honest it's going to be exactly the same actually so i could actually just do it like this like this and it would actually work so i'm just going to delete this i'm just going to delete this over here but now what we want to do is we want to set the color for everything inside of the like the menu and the quiz as well and all the texts inside of it i'm also going to create something called the end screen later so we can already actually no i'll just leave this for later so for both the menu and the quiz we want to set the color equal to white because we know our background is like blue so we want to set the labels inside of it to be white and what else do we want to do um to be honest i think that this is probably it i'm going to try to make the should i make the button different um i honestly think that the button should be the same right um let's just check this over here let's run this you can see that it looks like this we obviously want to make the buttons look better but is that actually necessary um [Music] probably right yeah so what i'm going to do is i'm just going to copy the logic for the buttons so i'm going to do something like this the quiz button and let's take a look you can see that now everything is kind of centered and what i'm going to do is i'm going to come over here to the questions bing so i'm going to say questions like this and for the questions i'm going to actually set the width equal to a hundred percent so it's going to be a hundred percent of the of the the like the container because you can see right now that questions is this over here it's all the buttons oh no no it's not actually questions it's options so let me just do it like this so options is like 100 of the of the thing right so you can see we just want to center this so how do we do that we're going to come over here and we're going to display display flex then we're going to say justify content center and let's just check to see if it's working this isn't actually how i want it to look so i'm actually going to say flex direction equal to column so i want to stack them on top of each other you can see and now we want to align item center and let's see if it works you can see now they're completely centered it is looking good in my opinion so this is kind of the idea right and what else do we want to do so we choose four we move to the next question we choose 2h we move the next question and we choose page attack we move to we finish the quiz right so maybe we can do other stuff we can style it better but honestly i'm just going to leave it like this because you guys can do this highly on your own it's not going to like it's completely personal like you can you can do it however you want i'm just going to focus on the logic which is actually the most important part so now that we have styled a bit our ui let's actually go into the end screen and let's start working with displaying the score and actually restarting the game right so how do we do that we're going to come here to our end screen and similar to what we did with the quiz and the in the main menu we're actually going to copy like all of this at the top here and we're going to paste it on our end screen because we want to have access to to the the context and this is just going to save us some time right so what do we do now well we want to destructure the score from our context so i'm just going to come over here to our end screen and i'm going to destructure this using something like this and i'm actually going to delete all of this i just want to access the score because in our end screen we want to display our actual score right and we also want to have access to our question bank because we want to see the length of the list of like to see how many questions you actually have so to do that i'm going to come over here and i'm going to say something like import from um helpers slash question bank and we're going to import questions from this and now what we can do is instead of here we're going to give this a class name of end screen like this and inside of here we want to basically just first of all add a an h1 saying something like um i don't know quiz finished and then we want to add kind of like a our score so i'm going to add an h3 tag just to make it a little bit smaller and over here is where we actually write the logic to this player's core so what i'm going to do and you can see i'm already starting it is basically we're going to display a number here then a slash and then another number this number over here is our score and this number is the amount of questions in the quiz so to find the amount of questions in the quiz we literally just have to say questions so we're accessing the question bank dot length and to find our score we actually just have to put score over here because we are actually accessing the global state so that means we're just going to display our score out of the questions length right so that means it should be working and finally we want to have a button to restart our quiz so button let's say restart quiz and to restart a quiz the only thing we have to do is we need to set the game state equal to main menu again like literally it's all we have to do and we also need to set our score to zero that's something important as well so how do we do that well we're going to come over here we're going to first of all get the set score because we need to change our score and we want to get the set game state when i have access to both of those functions and we're going to call on on click over here let's just create a function called restart quiz so let's create this function up here so const restart quiz equals to it's just a very simple function inside of it we're going to do two pieces of info like two two things we're gonna set score equal to zero and we're gonna set game state equal to menu and this should restart our project you can see that if it's menu it's gonna display the main menu and we're gonna also set the score equal to zero so let's check to see if this is working right you can see that i'm gonna restart i'm gonna answer two out of three questions correct so what is one point one plus three four next question which of this is a is a streaming platform i'm gonna say twitch and finally the best tech youtube channel all of them are really great so i'm just gonna start i'm going to choose tech with tim and when i finish the quiz you'll see that it will display our score which is two out of three and we can click on restart quiz and you can see that we are back in the beginning in our main menu we can start the quiz again and do everything perfectly again so how do we like what is the last thing we have to do now well the the only thing we have to do now is actually just style our end screen so that's going to be actually really easy because we literally just have to come over here add the end screen to this because all of them have the same styling like end screen and also add the end screen over here so that we have the the button style for the end screen as well so button and now let's check to see how it looks um let's just answer a bunch of re like random questions and you can see that it will show restart quiz the color of this is still black which isn't what we wanted to fix that we just need to come over here and say dot end screen as well you'll see that it will display the correct color and it is actually working everything is working perfectly this is how you actually build a quiz in react i i really like building this project i remember when i did this in the beginning um it really helped me understand both like how to use hooks and also how to work with the context api so i really hope you guys enjoyed this video um i actually made a tutorial on this in a course um that i have in the codem website so the link for that course is always in the in the description if you want to check it out it is a free like the courses for the first four projects that i build it is completely free so check them out one of the projects is this one right here so if you're interested the link is in the description so i really hope you guys enjoyed it if you enjoyed it please leave a like and comment down below what you want to see next subscribe because i'm posting every single day and i would really appreciate it and i see you guys next [Music]

Channel: PedroTech

Views: 15,086

Keywords: css, javascript, learn reactjs, reactjs, reactjs beginner, reactjs tutorial, typescript, react js crash course, react js, pedrotech, traversy media, traversymedia, freecodecamp, deved, reactjs projects, quizapp in react, react project, quizapp tutorial, quiz app tutorial, reactjs resume, react portfolio projects, reactjs portfolio project, beginner project, quiz app, web development, react hooks, context api, learn react js, react js tutorial, react js projects for beginners

Id: 8LNb18ibNGs

Length: 49min 47sec (2987 seconds)

Published: Fri Jan 29 2021