Build a Quiz Application using Vanilla JavaScript

hello guys welcome to my youtube channel texas blog my name is rujid basad and today i'm going to show you how to make a quiz card using vanilla cheese so for this let's open our winter spot shell and let me type uh cd into our code directory and here i'm just going to create a quiz app okay cd into quiz app or we can open it with a code which is opening in a visual studio code and we can create three files index.html and then style.css and script.js and we can close our sidebar and index.html we can have a doctype html and you can use with app like this one and after that we can load our two files so style dot css and skip tag that is shift dot js with default attribute as you know default attribute we are using because the browser will load at first all the dom object element because html element and then it will load from the background so here we just need to use script.js file and let me open this quiz data at first so let me copy this and paste it right here so actually we have question we have some options abcd and then the correct answer so save this file and after that we need to go to our index.html file and we can go to our style.css file at first so let me uh use this one so box id borderbox and then body margin 0 then padding not padding merging zero and then font size not font size font family we are going to use uh let's express sensory and let me open google and here we just need to go to fast.google.com okay so right here we have roboto so for this tutorial i can use robot first and i can choose like regular font then port 700 okay now we can import this into our css file like this one and after that we can say roboto and then sensory okay now we need to use height 100 ph display flex align item center and then justify content center save it now at first we need to create some structure let's say container and inside the container we have h2 element so we can use uh who is app sorry not this one i can use id id is going to be question question text okay now we need to have an unordered list so we will ally and inside the li element we can say input type radio and name is answer and the id we are going to use a and then we have a level so level for a and then it should be let's say answer one or answer and i can copy this three more times and we can change it b c d d c b ok now we need to open this with our live server open with live server like this one so i can close this tab here i just need to use this one it right here so we have this positioned correctly now we need to set some background on our body so we are going to open a new tab so here we can use gradients let me use this thing so copy css and for the body you can paste it save it and we have this background but i think i need slightly different background okay let me place the next button this one okay this one now we need to have a container and the container we will use background color white okay now then we need to have some width and for the width i can use 500 pixels like this one and max width is 100 so it will be responsive let's see if i resize this it should be like this one okay and i can set the margin okay not machine i think it should work so i can make it just 600 pixels now inside our index.html you can copy this and after you will element i can use a button element so id submit button and you can write down next write this one so i can copy this so here i'm just going to use content and paste it okay now in our style.css content would have with padding 3 rm cell like this one you can use like and i need to use some border radius on our container so border radius let's say pixel and i can use some uh let's say box shadow on it box shadow so 0 0 10 pixel and 5 pixel rgba 0.1 okay let me change it to 100 now what we just need to make this bullet point uh we need to remove this so you will need style type none okay and then you will like margin one rem and for left and right we can use zero like this one and font size you can use 1.2 area and for the h2 element we can use size let's say 1.3 rm okay now what and we need to use our margin for another list so for unordered list we can use margin is zero padding is zero like this one we don't need this machine right now so after this now we need to style this button element so button let's say background and i can use some background from okay copy this one and paste it here and you can use border now padding 1.5 rem let's see 1.3 and color white font size 1.3 rem like this one for the container you can use overflow again so you can see the border is using this one this is our thing so we can use the cursor pointer on our button so cursor pointer like this one and on hover we need to change the color so button over background let's see we use this we need to use this color save this refresh so you can see we have this uh changing this color and now we need to make another thing that is button we can use outline none on our button so outline none so you can see if i click here you can see there is an outline so we need to remove this so save this so you can see when we click on it there is no outline but we need to tell that this is going to be click so button uh focus and then button active and we can use position relative and we can slightly move the button to top 5 pixels so if i click it you can see the difference and we can also add some background let's see at first 192 a56 and we can change it to this one click and see the difference and let's see if i make it one pixel okay this is nice now you can see if i click on this level it will be automatically uh checked the radio button because we have used this label for a so for this attribute it will select an id with a okay now we need to use cursor pointer on level so here level cursor pointer like this one now our design is mostly completed now we need to go to our script.js file and after that we need to do let's say let uh quiz count is zero okay now i need to make a function constant load quiz so load quiz we need to select the h2 element so for this we need to add some elements so let question question element document dot get element by id question so let's see from individual html as you can see we have the h2 element and we can copy this thing and go to script paste here so construct document dot get create element by adding this one and you can make this constant now for the load quiz we can use let's say quiz count we can increment it by one then you can use let's say let current quiz and the current quiz should be you can change it to here and then quiz data with quiz count now we need to select question element the inner html this should be current with the question and let me load quiz right here save this so you can see the quiz is loading in our html now we need to uh render our options on our this element so let me copy this and after that we can select all of these in our html and then current quiz dot and you can change it to b c d so it's not working so current quiz question a let's see if there's an error or not no okay let me uh do something right here console.log current quiz abc d now if i copy this and paste it here you have this okay okay okay we just selecting this radio element but we are not selecting this level so how can we select this level element so for this we can use query selector query selector like this one and you can use let's say level four and then here this one and this one we can use this thing so you can see mountable is lots we have this element okay now now we need to create this one that is at first you can see we made this submit button so in our script.js file const submit button document dot get element by id submit button then if we click on the submit button we need to add an event listener so on click event we need to load with like this one so so we just need to cut this into this one okay now if i click on it so you can see and we have this error cannot read property question of undefined so we need to fix it let's see we need to use the discount so let's say if let's say if a quiz count is less than the length of our quiz data then we are going to load our quiz let me use this one so mountable list okay there is no error actually so i need to remove this the console log now else i can use alert you finished all the quiz so let's see you finished all the quiz now we need to see if all one of the answer is selected because you can see they can skip it but we need to prevent it okay now we need to make a function const say get selected answer so let's answer document dot query selector input element with the name of answer we need to use query selector all because we have four elements with the name of answer okay now here we have got this thing now we need to use uh we need to create another thing that is selected answer it should be false so if uh we need to use our for loop on this answer element so answer for each element if element is checked then it can say selected answer is going to be [Music] element dot id and we need to return selected answer savvy so in here need to do some thing that is uh let's say select terminate selected answer get selected answer and you can console the selected answer if i click here it is false now if i click on it the selected answer is going to be a if i click on 8 which is c and click so we have c okay now we need to check if selected answer is not false so then we need here load quiz i just need to use if selected answer then load quiz so let's see without it so it is preventing us to [Music] go to next question if there is no selected answer so if i click here you can see we are going to go to the next question okay now we need to create a score for this so let's see e let's score is zero now we are going to get uh let's see we have this quiz count plus plus and if we have the selected answer we can count this quiz so if we have this selected answer now we need to check if selected answer is equals our quiz data make it a squeeze count okay which count and we have this correct of property then we can increment the score and you can console love the score so mount everest next so score is one and if i click right here score is two okay if i uh use eight score two score two you are purchasing and it is you just place second person if i use this score is three so it is working now we need to make another thing that you can see if i click here and press the next button the element is still this answer is still selected so we need to deselect all uh deselect this element so you can make a function here so cost deselect answer so we can copy we can use this answer not here you can use this you can make this constant after that you can for each from here you can use it so you need to make element dot checked is equal to false so here we just need to copy this and use it on this function you can call this deselect answer on this load quiz save so mount everest click so all of this is deselected hypertext markup language next okay so we need to remove all of this uh console so where all of these consoles you can comment out here and we have another console where is it let me search for it like this one comment out now when let's see want to be rest this one this one this one this one this one this one this one this one is from this one so here you can see you finished all the quiz i think there is another error cannot read property question of undefined so we need to fix it where okay who is count which data.length we need to use negative one so we need to uh decrease by one so let's see the load so instead of showing this alert we need to uh we need to display uh a card with s2 element or h1 element so we can add an id so id which is quiz and then here we just need to for duplicate this and we can use quiz element and then quiz element dot inner html so in here just need to use h1 so after here from that congratulations you just code score out of a quiz quiz data length now i need to use a button then play again and here we just need to use a on click attribute so when we click on it we need to reload it for reloading reload browser javascript location dot reload so here we just need to use window location dot reload there's a typo okay now close it if i refresh so we still have some designing problem so we can fix it so before the h2 we have h1 we can add a padding one rm and you can add font size to 1.2 rm not 1.2 if i make it and we can use text align center converges congratulations you just score 7 out of 11 if i click on display again button the browser will be reloaded so let's see okay [Music] um congratulations we just scored 3 out of 11. uh 3 out of 11 quizzes questions [Music] so like this one so this is the end of this tutorial guys please subscribe my channel for the upcoming video tutorials have a nice day

Channel: Surajit Basak

Views: 210

Keywords: techcetblog, javascript, javascript quiz application, javascript quiz web app, quiz web app UI, javascript web application, js web application, how to create quiz app, create quiz web app, quiz app javascript, avascript web app, quiz app tutorial, javascript quiz game, programming quiz, build a quiz, javascript project, web development quiz, javascript quiz, quiz tutorial game

Id: _Im_xc_jMnk

Length: 37min 24sec (2244 seconds)

Published: Sun Dec 27 2020