Dynamic Pie Chart in React.js | No chart libraries

hey what's going on guys i'm glad to see you again on my channel my name is victor and in this video i'm going to show you how i built a project for a person who is a life coach so basically i build a react.js app which has a chart with dynamic slices and you'll see in the them what i mean by dynamic slices but the main reason i'm sharing things with i'm sharing this with you is because i couldn't find a lot of information related to this topic and i thought this may be useful for some of you guys um i know that i could also use the d3 js library but i i thought that this is going to put too much weight on my app so i decided to build this just using css and svg html tags and i'm gonna write everything from scratch so you can follow along with me but if not there is gonna be a link in the description from where you can grab the source code so that being said let's go ahead and get started so this is the demo guys we have the pie chart here on the right side and it has eight slices and each slice is assigned to one of these questions and this question sounds something like this from one to ten how happy are you with your health line and the user is grabbing this black black dot and it's sliding it to the right and in this way they answer to this questions so we have for example health is nine and at the same time you see i'm sliding it and at the same time the slice is filling up with colors and each slide each slice has a separate color and it's of course you can see the colors here so you can already see which question is assigned to which slice so let's say for example love life let's say 5 career 10 personal growth and you can also just click like this money stand friends and family is like six final and recreation 10 physical environment and so this is uh the main functionality i wanted to build in this video now i'm going to create the react app i'm gonna i'm gonna create it here by typing in sudo i'm using solar just because i installed the boundary on my windows machine so i have to use sudo in order to use the root user which is the admin so i have sudo ntx create react app and i will name it dynamic chart i'm gonna type in the password for my sudo so it's gonna be like this okay so this is gonna take a while so i'm gonna just pause the video and i will uh replay it whenever it's done all right guys so this is done so let me see ls cd dynamic chart i'm opening this one i'm going to clear this up uh actually now i'm just gonna close this demos this is the demo so i'm gonna close it get rid of this one for now i'm also going to close this tab this is the d3 javascript library i was telling you about i was looking to this one to use it but i didn't because i didn't want to um there's a lot more stuff in here it's not because it's not good it's just because my app is too simple for um just to use this library so i didn't do that okay so here i'm going to open my vs code and now i'm going to open a new terminal so if you use vs code there is a tab on the top it's saying terminal new terminal and here i'm gonna type in npm start so i can start the node.js server from my vs code so npm start and this should open up a new tab in my browser all right before it's opening i mean while it's opening let's i'm gonna clean up a little bit my app so in the public folder index.html uh here i'm going to let's see so it's open it's open like this we see this logo so everything is good now i'm gonna clean up this comment from my index.html file from the public folder i mean you don't have to just do that because i don't know i like it when it's when it's cleaner like this and then let's close it so i'm going to start from the source folder with the app.js file and app css and in the app.js file i'm going to remove everything i have in the give class name app and basically here gonna also remove the logo svg and in the app css file i'm gonna leave the app okay let me just remove everything i'll type in from scratch so it's gonna be app plus because i have just the app class left in the app.js component and here is going to be a width 100 and below i'm going to have another class which is going to be app.content i mean app and then content like this and here i'm gonna have with 100 as well and the max width is going to be a thousand pixel and i'm gonna have also display flex this is gonna be used in our app just to separate just to split the page in two parts left and right on the left side it's gonna be are gonna be the questions on the right are gonna be it's gonna be the chart so display blacks and i will also have margin auto okay i'm going to save it i'm going to close this file because i'm not going to have anything there um now from the from here where we have our in the source folder i'm going to create another folder which is going to be components so i have create new folder components and then this folder i'm going to create a new folder which is gonna be questions and another folder in the component for components folder which is gonna be slices all right and then in the components folder i'm going to create a new file which is going to be pi dot js pi dot js and pi dot css css all right and let's start from pi.js this is going to be a class over here so we have to import the react and the component so we'll have import react and component from react and then here we want to import the pi dot css file so we have import what's that fi css okay so i'm gonna type in here export default and the class it's gonna be a class and the class name is gonna be pi and this is gonna extend this is going to extend component so we have extends component now here we will have render function and before we go to the random function there's going to be a state so as i already said if you saw if you remember from the demo we had eight questions and each question had eight uh had a slice assigned to it so here we will have state and in the state we will have all these questions so the first question and each question is going to have some parameters so this is the first question we have here and the parameters um are going to be the actual question which the first one was help and then we have here the rotate we will use this later on later on in the app so we have rotate and the rotate it's going to be for the first one rotate that's that's gonna be the position of the slice all right so here we have zero point two four zero zero zero zero and then we have g20 and then we have 20 all right you will understand later on uh where we will use this stuff so here and then we have the feel the field this is the color for each question this is the color with which we're going to fill the slice so we have f 5 c 0 0 and then we have the transform the transform is the it's kind of like the answer user answer so we have 0.1 it starts from 0.1 and goes to uh q1 so it's 0.2 0.5 0.9 and then is one when it's one then the slice is full when it's uh 0.1 the slide is empty it's just the first step it's like um from 1 to 10 it's like 1 2 3 4 5 6 7 8 9 10. so this is how this is the structure of the state for each question now we should add this stuff for eight questions um so let's go ahead and and do that right here i'm gonna just copy the latest one we need seven more so we have one two three four five six seven [Music] this is the second question and second question in our case is love life and the rotate is 45 45 feel it's 9 2 4 4 5 f f and it's 0.1 all of them are going to have the transform it's going to be 0.1 transform this is already said how full the how full the slice is [Music] okay this the third one is the career career and the rotation this is going to be 90. and if you see we add 45 so this is zero plus 45 uh it's 45 and then 45 plus 45 is 90. so and then it says the same this is the slice size i know you know i will show you whenever we get that circle and pie chart but let's just um make this state properly here so we can use a little without any problems okay so i have career rotate 90 in the color here it's going to be um i have the script ready guys so i'm just going to paste the color here just not to spell it so it's f23 for b transform is 0.1 and the fourth question is personal growth so the for which this one personal growth and the rotate is 135 135 the color is 35 7 a f f and then next one is five fifth question fifth question is money freedom money freedom rotate is 180 the color is e5ac00 next question six and the sixth question we have friends and family friends and family in rotate is 225.00 of course and the color is zero zero a b three a transfer uh transform stays the same uh now it's seventh question the seventh question we have fun and recreation so we have fun and recreation rotate this g 70 and fill is this color right here it's zero zero eight nine b five and then last question the eighth question is physical environment physical environment rotate this is going to be 315 and the color is going to be ac0 okay so the state is done now we should go ahead and [Music] work on the render function on the render function we should have a return function here so we have return and in the return function we'll have a main div last name content from from here content from the app css this one so we use this class right now so we have give class name content and this d we will have uh two other divs the first one is going to be the s the left side which is gonna where we have the questions and on the right side is gonna be the chart so here we have give class name questions block and here we will have questions block and there's going to be a list here so we have ul and then here just add li and let's put your questions like this let's leave it like this for now and then here below we will have another div class name it's going to be chart block chart block and in the chart block we'll have another give class name which is going to be chart pi we will add the content for the s the classes for these ones we'll add them in the pie chart okay so i have chart block and here we'll have the actual chart um that's gonna be the circle so here we have another div class name and we have chart pi and there's going to be an inline styling and this inline styling is going to be weight 450 pixels like this and then here we will have the spg but before we do that let's just leave it like this for now so let's put chart here i'm gonna save this file uh and then let's import this ijs file in the app.js file so here we have import i from component slash pi and we want to output it right here in our app um app d class so we have pi like this oops and there's an error uh adjusting jsx element must be wrapped in the closing tag so let's see let's go back here oh i should close this div the content div needs to be closed after the chart block like this all right let's go back and we see our stuff here i mean it's messy right now because we didn't add the styling yet so let's go to our fire.css file and let's add some styling there just basic stuff so we have the chart chart block and this is gonna be with 50 and the display it's gonna be flex and we also have question questions block so questions block and this is with 50 pixels 50 somebody 50 percent we also have the question block questions block ul styling so let's do that here questions blog ul and then here we have list style list style type and this is none and we also have the padding 0 and margin 0 as well and we want to add some styling for this for the li of this list so we have question block li and here we have padding and padding is going to be 5 pixels on top zero on the sides and 15 pixels on the bottom and then also here we have the border bottom it's going to be one pixel solid and it's kind of gray darker gray like this dd all right let's add also another styling for the paragraph from this questions block so we have question block p and this b it's gonna have fun font weight bold and here we will have next next line text transform uppercase and we have also the margin and the margin is going to be zero on top zero on the sides and five picks on the bottom and the font size font size is going to be 19 pixels okay i'm going to save this for now like this and we will continue in this file later on um let's make sure everything works fine here so we have questions here we get this border and the chart here so we split we say that we split this page uh which here which this is this is what i wanted to do now let's go back to our pie just i'm in this 5.js file here and where we have chart here here we will start building our chart so i say that i've used the svg html tags and i'm going to start by doing that here so we have svg class name there's a class name we'll have to add this one later chart by chunk so we have chart high chunk and we have the width whoops it's weight like this for 40 pixels and we have the height the height is the same for 40 pixels and we have the view box view box is zero zero four four zero and four four zero and then we have the xml and s xl and s and this is http www.w3.org svg all right so we have the svg here and we have the svg making sure everything is fine here http www.w3.org spg okay now in the svg area um like if you if you don't know much about svg there is this you can just search on google about look svg html and there should be the developers.mozilla work which is same because we're going to use a lot of parameters here we're going to use this s c x c y r which is the radius this is the position on the x and y because there's like a axe and different attributes but whenever i'm gonna go along with this one i'm gonna still search and show you what uh some of this uh attributes mean so here we have the svg now we should create them um we should do a def pass we should use the and the ef as tag just to get started with that and in this tag we will have the first order uh first border of our so between all our slices we will have borders it's going to be like a white board and we will add that border it's going to be the initial border and then later on using this position of this initial border we will be able to add other borders for all the slices so let's do that here i'm going to show you how it looks like we have d f s dfs and here we have a g g tag and id this id is very important we're not going to add styling to this id but this is going to be important because we will use it to add other borders according to this id so here is going to be over overlay and then that's going to be this one what g what is g you may ask what is g let's see what g is so if we go let's see g s v g html so if we go here we want to find the the gsvg so developers mozilla element is a container used to group other svg elements so this is like a section in html5 you know um so we have the gid overlay and then we have direct brick re ct is like a rectangle and we have x it's going to be 219 as the position right now y it's going to be 20 height it's going to be 200 and weight it's going to be 2 it's going to be two and then the fill that's the color this is going to be white make the capitals everything is capital okay and then the oops not sec this is going to be [Music] re ct look at this so let's check that out rct svgps so we go here and it's telling that direct element is a basic svg shape that draws uh rectangles defined by their position so here we get examples so this is what we're doing but this is the border this is going to be the border of our app all right um not not board of our apps gonna be the border for for our slices so we're gonna use this later on in the app uh i just type it in here because whenever we'll start typing that i will show you how we'll link the id to those other other borders now below this the ef where is that the the def ass we'll have another mask mask id so we have mask id and this mask id is going to be wedge hyphen mask and then we're gonna be like feel white so it's gonna be filled with white and then here this is what what this mask does here in this tag we're going to draw the actual uh circle the chart so here we'll have the path like this path transform and this is going to be a translate translate and we have 20 and 20 and then we have the d attribute and then after the d attribute will have field rule so we have field rule uh rule like this and here we have zero and the path is gonna close now what's this the this d is the path it are the coordinates uh according to which we're drawing a line so let's go back here on google let's put a dspg rgb so if we open this stuff from here it's saying that g attribute defines a path to be drawn so if you see this heart here they also have this path um path field none we we actually feel with white but they don't feel it stroke red that's the border kind of and they have d and they have this path these are coordinates for this heart to be drawn so there there are different dots here like this okay so this is this uh we're gonna do the same thing so where we have our d we're gonna add some coordinates here and coordinates are gonna be capital m 93 and we have seven point two four one two four one a lowercase a two and then we have dot 600.006 so guys so it's 721 okay i'm just gonna copy and paste it there because this is a kind of long one like this and i will paste it like this you can just pause the video guys and grab it from here so it's m93 space seven point two forty one lowercase a two hundred point zero zero six space two hundred point zero zero six space zero space zero one one seven three point five five one minus point eight six five capital l g zero zero point zero zero four space two zero zero space one one two point three three space to zero space two four one lower k z all right that's kind of long that's but um that's the way it should be uh and then below below here we'll have a circle circle tag and this circle is going to be cx 220 and then we have cy it's going to be 220 and then we will have fill this is going to be the color we fill the circle with and this is going to be e f e f e f and the stroke it's going to be that's kind of like the border of the circle so the stroke is going to be like e 3 e 3 e 3 and then here the stroke width the stroke width it's going to be 1 and here we close it so we close the circle as well okay now below here we will have the slices so the slice um let's gonna let's add just one slice and we'll add the styling for this stuff just to see how one slice is going to look slice is going to look like and to create the slice here we have to add a g parameter like a g rgb and this g attribute is going to have the trans transform right the transform is going to be here we're going to use the rotate so this is going to be the first slice let's go to the first question from our state and rotate in our case is this one so let's copy this one for now it's just hard coded for now but we will uh work on that later on so we have transform rotate and rotate and then we're going to close it and in this g tag we'll add a g mask so we have g mask and the g mask is gonna have url id this id from here i'm gonna copy it and paste it here like this because we are adding this in this mask because this is the the line we drawn for our chart you know so we have wedge mask and after that close this and in this g tag we will add a circle kind of like the slice is going to be also a circle but then we'll give different position different coordinates so we have circle class name slice and here we have cx and the cx220 and the cy is 220 and r this is the radius it's 200 and we have the feel the feel is the color so let's see what color we have for the first question here let's copy it we got the fill and then we have style style and in the style we use the transform uh value from our state the transform is 0.1 this shows how full the slice is like this and then we just close it so we have circle like this all right we have this in place uh let's save it a style prop value must be an object by char let's see what's going on here so style barb in which file is this and the 5.js margin right okay so something didn't wow style see what's going on here so we have deep clustering chart by style with 450 pixels does it want me to remove it like this unexpected must be an object so we have width okay i think it's 79 say 79 this one from here oh yeah so i couldn't do this style like this 0.1 this needs to be transformed the transform is missing from here so let's get rid of this transform it's going to be 0.1 okay so it works now so here we see the first we see the first slice it's working like this we don't have the questions yet and we have we don't have the whole thing here but the first one is working and we got the color and it shows it's full but it's actually um transform [Music] oh transform this needs to be scale i'm sorry about that guys so we have scale all right like this and we close it used to be scale it's still not working something here let's put five yeah it works it works but we don't have the styling properly here that's why it's showing like that but if we remove this one you saw that the slice the the slide that slice is working um props scale probably here we should add some poster piece not probably but i think we should do that no no no actually not yeah some styling is missing there that's why it doesn't uh that's why it's showing like that so let's go ahead and add some styling so let's go to our pi css and let's um add more styling for so we stop here chart block p now we should add the chart pi so we have chart i and on the chart file we have outline 2 pixels red and then we have display block and then below we have position relative position relative and then we have margin zero auto like this and then the load margin we have width and that's a hundred percent and then below we have chart pi before chart i before and here we have content and we leave it empty for now and we have display block display block i was looking like why does that come over there okay display block and then padding padding top uh 100 heading top 100 percent and then below this one we have the chart by chan let's make sure we don't misspell it from here with that pie chart chunk i'm gonna copy it and just paste it here and here we have the pie chart on the position is absolute so we have absolute and then we have top zero and left zero and then with 100 and the height is also a hundred percent and then we have on the slice that's the slice styling and this is a class and here we have transition transition uh transform transform 0.5 seconds that's kind of like uh it gives an animation whenever it's gonna fill up that's gonna be like an immediate so we have and then we have transform origin origin is gonna be center center all right um and then below we'll have our uh range input styling but we'll add that later on let's see what we've got here so we see right now that our slice it's working here you know it's uh it's not full uh but yes if we add for example seven we see that's gonna fill up so we have the first slice slice here guys now let's go to our pie here for some reason i don't see that background color for our chart so i'm just making sure questions block feel we've got the circle fuel let's inspect this stuff to see circle well we'll see that we'll see on on the way there so okay so we've got this this is the if you see remember the gid that's the overlay border so um i was telling you about this border actually let's let's create now let's go back let's go back let's go back let's open our slices folder let's create a file here which is gonna be slices.js and in the slices.js file we want to import this is going to be a functional component so we just import the react from react and below here we have const slices const slices this is going to be some using es6 here props um forgot arrow here i'm going to use props and then here we will have a variable which is going to be left slices and basically let's just return for now slices and let's export this because we have to import in our file.jso export default slices now let's grab the slides we can save this file let's go back to our file let's import this one right below our file.css so we have import slices from slices slash slices and now using this slices we can call it where we have our slice so where is our slice our slice is g [Music] g transform this one so let's do that below let's call this component slice component now let's let's cut this stuff from here cut it from here uh let's save it um react is defined by number used and let's see what's going on here everything works we don't have any major errors so we will have to paste it now here in our slice we will have to um calling these slices we will send the state to this component and then here this slice component is going to be called eight times because we have eight slices here in our state so we'll send all these data to this component this component is out it's gonna output all our slices from our circle okay and then uh to do that we should have a let slices and i'm gonna paste it let me paste all this code here for now just like this i mean this is not correct syntax but let's go back to our pi dot js file and in this file we want to add some achieve some props to our component to the slices component so the props are going to is the state so where we have our slices here we want to send slices and we will send this oops this state dot slices okay now let's go back here we get the reactant for react uh where we have our slices here um we send all the state so we have an object now we have to look through that object so and then to assign everything to our slices variable and then after that just return so here we will have um object dot keys and we have props dot slices because that's we're looping the slices and then we have map and here we have slice key we grab the slice key and then we have i it's an index and here we open the parenthesis like this [Music] forget that and then here we get this slice i'm just gonna cut it and i'm gonna paste it here in our where we look through our object so we have g transform but like now we have to add a key to our g tag so it's going to be a slice key here where is the transform we're going to get rid of this stuff and we're gonna put here props dot slices and here we have slice key because this is the question we get i mean the yeah the slice number and then we have dot rotate so we get the slice position from our state which is this we get the rotate and then we get then we're gonna get the feel and then transform so we have rotate and then we have g mass is going to stay the same we got circle class name slice this all is going to stay the same except field so wherever we have our field here we should use the props data from the props which is the state so we have props the slice oops slices slices and here we have the slice key and dot fill and then where the style is here we want to add the stuff from our where's that style the transform is gonna stay the same just get rid of this one okay the sl transfer is gonna stay the same now we have the scale so we still have to add the scale so we'll have here scale parentheses and then here we have plus and next is going to be props dot slices and we have slice key and then we have dot transform and then we have plus so we have to close the parentheses and that's it right here okay we got the circle over there okay so let's save it slices is assigned a value but now we're used now we have to return this slice so we have the return function in our in the slices component so we have return and here we return the we have to have a wrapper so i'm going to use an empty wrapper like this and then here we have the slices that's the variable let's save it let's go back and let's see we have an error cannot convert and define a loyalty object in the slices js for number four crops slices let's go back to see what's the problem so we have slices here key props so it looks like there's a null we don't get the data from here this state slices let's check our state slice this okay we're missing the slices from here because the state structure needs to have slices i forgot to add slices like this okay so we get the slices we're gonna change the structure a little bit guys again this slices and like slices we open this one we close it at the end of of the state and let's just make this look a little prettier like this okay so i forgot to add this level of our state which is slices and let's save everything now here and let's go back and we see this circle here uh we get this slice it's a really small circle and if we play with the state now from our pi js go to the state let's say for example on the second question you want to put five here and you save it you see that the slice is um it's filling up so let's go back now what we want to do next is um let's see we want to add also questions so we have to create a new file for the for the questions and let's do that right now in our questions folder let's create a new file which is going to be questions dot js and we also want to add another file which is going to be questions.css where we'll add some styling for our questions so we have questions.css all right let's start from our questions.js so i'm gonna import react from react and let's also import the questions.css file import questions.css and then we will have this is going to be a functional component so we have cons questions and we will get props here and then we will have basically we will have a loop through uh it's going to be something similar to the slicer.js so i'm just going to close this file for now pi css we're going to leave that like that app.js is going to go away i'm going to close it [Music] here on the circle something i'm i'm missing something guys because i want to see where's that background here so i'm going to check to see if i have everything so we got the mask here that chord there coordinates uh field rule none this e shouldn't be here it should be non-zero and we got the circle but oh i see now i'm i'm missing the radius so i should have r 200 let's see if that fixed the problem yes so this is what i was looking for this is the circle background okay so now it works now let's go let's go back to our to our questions to our questions let's save this file for now uh let's go back here to the pi js because i think we forgot to add the borders you know between these slices we should have like like borders and the first border is already saved um is this one and according to this overlay we want to add more borders in ours for our slices so below our slices we want to add and use tag so it's use um and it's going to be x length h r e f and we want to link this one to the overlay overlay this id and then we we want to use the transform rgb and we want to rotate this one to 19 220 and 220 like this so if we save it and we open our browser we can see that there is a border here all right and we want to add this stuff for all our um you can play around with this position i already have the script that's why i know the position of this uh of this border but like for example if i inspect it now and i change that position just so so you see how i was playing with this so i have the x link here so if i change the 19 g for example uh 15 i press enter you see the positions uh it's shipped shifted okay so i'm gonna add all of those here we will have money one two three four five six seven we'll have seven more so one two three four five six seven and we change as the position from here which is 19 now it's going to be 63 63.7143 and then next one is going to be uh 108.70 43 71 43 and then the next one is going to be 153 point 71 43 and the next one is going to be [Music] 198.71 43 and the next one is going to be 243.7143 and then we have 288.71 43 and the last one is going to be the 333.71 43 so if we save it now and we go back we see that we have all these borders for between our slices which looks a lot prettier now and as i already said i'm linking them to this from this position this is the initial kind of position of our uh for our borders and then from here we add these coordinates because from there this is the radius so that from the first one which is here it's invisible right now uh we put where the coordinates and it goes like this radius so this is the first one we add more rotate more rotate more or more so this is how it works um and now we can go back to our questions which we can work on our questions so here we have our questions um we have to let's just have a return from now just to make sure the structure is properly here let's say questions here and let's just export default questions and let's copy it save it let's go to our file let's go up there where the questions are so where we have this okay let's add a li here l i like this okay let's save it uh where is li we want to import this question okay so we have to import questions file in our js before we we call it here so let's go below our slices and let's import questions from questions slash questions and then here we get the questions and we want to import them right here like this let's save it and let's see okay questions here so it's it's working everything structures we imported everything properly now here in our function we want to add li tag so we have li and of course we want to send the same data we want to send the state to our questions component so then from there um we can output the questions here so let's do that right here like this so we have slices we're going to send all the slices oops so we have this state dot slices and we will also have another component for our answers because the uh the slider that's gonna choose the answer is gonna be also in this component and uh but before we do that let's just output the questions first so we've got the props here now in our li tag we will have a um let's see here we want to loop through our props first so we have left on questions and we have object dot keys and we have props dot slices and here we have map and we have the question key question key and then we have index here and then here we have this arrow and we open the parentheses so here we can add our ally tag now so i'm just gonna grab it from here and i'll paste it here like this and now here in our li this ally is gonna have a key because if we don't add it there's gonna be an error so the key is gonna be question question key and then here we have a we have our p tag and here's where we output the question so we have props let's see like this we've got props um dot slices dot actually not dot but we have the question key question key dot question okay let's save it uh question the sign that we used and then now we can return this one in our return function so here we have our return is gonna be an empty wrapper like this and here we have question oops question so that question is not fine okay because i misspelled it so let's pull it here needs to be questions you probably already saw it guys okay so i save it save it like this we go back i cannot come convert and find our little object what is that questions js fifth line questions jsp fly slices because i misspelled this one all right let's save it let's go back so we get these lines here but we don't get the questions questions um i'm missing something here so we have props slices question key our question this to be just question one question because that's how that's the structure of our state as you see we have slices then the slice of slices then question key which is one two three four five six seven eight and then after that we called we get the question which is health and all so here we have the questions there we we're gonna output we're out putting the questions here everything works fine um what we should do now is we should offer them an option to answer to this question so here we should use an input uh type range field and to do that we should add another d it's going to be in this li tag it's below our p tag so we'll have the div class name and this is going to be answer and the in this answer d plus um we will have an input [Music] let's put input and i'm gonna close it here and this input is gonna have type range and then we will have um minimum which is going to be 1 and then max is going to be 10 and then below is going to be value value is going to be empty for now and also below is going to be a class name range input so we have range input and then we will add some styling here the styling is going to be let's let that wait for a little bit so let's add this for now let's go back and see how this looks like so we've got this stuff here but um it's playing now because we don't have any method we don't call any method whenever we click here we're on change method we should use the unchanged method and then we should add some styling on this one so let's uh add some styling in our pi css pi css file where let's see let's do it from our pi css file so in our file css file we should add i'm gonna add a comment here which is gonna be range range input okay i'm gonna add the class range input and here i'm gonna have margin top two pixels two pixels um web webkit appearance none web kit appearance none and then we will have with is going to be a hundred percent and then height height is going to be 15 pixels and border radius is going to be 5 pixels outline none outline norm like this opposite opacity opacity is going to be 0.7 uh webkey transition is going to be 0.2 seconds a web kit oops from position it's going to be point g pass and then here we have the transition transition opacity is going to be 0.27 seconds so transition um it's gonna be opacity it's gonna be pointy s like this okay save that and then we should add some styling for our hover so we have range input hover opacity is going to be one and then here we will have wrench input webkit slider thumb so we have webkit slider pump okay so here we will have webkit appearance non webkit appearance none and then we will have appearance none okay and below we will have width this is that black dot guys so width is going to be 25 pixels high it's going to be 25 pixels and border radius 50 so we have border radius 50 and then background it's going to be black and then we have the course or pointer and okay and then another this is the last thing here we want to add more range pump so we have wrench input and we have moz arranged hum and here we have with 25 pixels and we have a height 25 pixels and then border radius is 50 and then we have background black and so it's mainly the same thing but so we have and then cursor pointer okay let's save it and now let's go back and we've got this stuff here we work we were working on this dot for some reason that stuff didn't pop up okay range input so we have two pixels webkit appearance non-width height border range input okay so now we should add some styling for our answer div and let's see i'm missing something here because that line should show up that slice but that color is going to be dynamic so that color needs to be added here okay um here we should so we have range input and there's gonna be a should have like an inline styling for this one just to add the color so let's do that here we will have style and here we will have um say style it's gonna be background background and here we'll get props props dot slices and we have a question key question key dot transform now this is going to be actually the field because we want to fill up that line on the sliding line with the same color as our uh questions slide slice is so let's see style fill okay let's save it let's go back now so we have them here okay so this is it's working now like this because we get this color from the state okay now in our input type here value let's put value g let's see so yeah according to that value this is going to change now there is something we should add here in our yjs file wherever we call our questions there is going to be there should be a method which is going to grab the answer from here and and update the state so according to that answer we're going to update the state and then from here we will uh and the pie chart is going gonna the slice is gonna fill up so below render function we should add another component which is going to be let's call it select score select score so you will grab question and we will also crop the event and here we will have to update the state but because our state is uh nested here we can't really update the state whenever the state is tested so we will have to uh kind of um assign and the state in the uh as an object to a new variable and then from there updated so let's see um but because you saw here that this are numbers here and in our state we have this transform which is 0.1 in our answer input type range we have from 1 to 10 so here we should filter this data a little bit so it's going to match so it will match the this structure from here so to do that we will have a variable which is going to be const target value and we will get the event target value and if this event is equal to 10 then that means we wanna sign one because here is from zero point one two one so here we assign one otherwise uh we assign zero point kind of like concatenate plus e dot target dot value like this e target value and then below here we will have cons here's here we are getting the we're updating the state now with the answer we will get from uh from here so um questions let's do like this first console log let's see what answer we're getting from that field first so we have set score now we want to send the set score as a prop this questions component so we have this dot select score now let's save it and here we should counsel log the target value right okay we send it there save it now in our questions here we should add a what is that one change event so we have on change so whenever somebody is sliding that stuff we want to call the props dot select score select score and we want to send question key so we select the score from that sliding bar and we send it back using the the question key so we know for which question uh this user answers and we have type branch while you use g okay let's save it let me just remove this value from now because it's just messing things around okay so we can play with this now but if i open my console and if i answer for example i slide it i can see these numbers from here for each question all right and now having this back here where the console is i can update the state now so to update the state as already said our state is nested and we can't um update it whenever it's nested state we should assign everything as an object to a separate variable and then from there updated so we have cons new state and we assign object dot assign here's an empty object and we assign this state and then here we have new state dot slices and we have the question because we get the question number from here which is the question key we get the question dot transform target value so we update the state value so we assign the state to this variable as an object and then after that we update this value which is a transform value for this specific question all right and then after that we just update the state so we have this set state new state we update the state with new state let's save it and let's go back and let's see now so boom boom boom boom now we see it works the only problem is that it shows 10 so it should show 0 and we should add the value there in order to add a value in our questions here where we have our input type range let's add above our question it doesn't really matter where you add it but there should be a value value and then here we will add some kind of uh validation as we did here so we should add something like that and today we will use props dot slices question key dot transform transform if this is equal to 1 then we assign 10. otherwise we assign props dot slices of slices um question key dot transform and now we want to replace uh replace the zero point with an empty string so we get just the full number from 1 to 10 we don't get 0.1 or 0.2 okay let's save it let's go back so now we see that all this stuff will close this so now we see that all this stuff is at the beginning on the left side so if i move it like that it's staying like that it's grabbing the data from the state okay so we've got this working here um now we should add a little bit like a small black thing here that's showing which what number we choose from this slider so to do that we should add where we have our input below our input we will add the span uh class name and the class name is score and okay let's select that score but here we should add some styling because this color is going to change according to our question so style and some style so here we have background background color it's gonna be props dot slices of slices you have question key dot field like this and then below here in our span we will have a give last name uh left left arrow because we have we want to add an arrow here and the style here it's gonna be it's gonna get the same thing but this is gonna change a little bit question fill let's let's add this left arrow class in our question css also here we want to add okay before we continue let's do that because here we have to update i'm going to update the border so you i wanted to understand what border are we we are updating okay let me just close this d for now i guess okay so in our question css let's also add the um styling for our answer and for our score and for left arrow so here we have answer and the answer is gonna have just display lex and then below is gonna have support we'll have score and here we have padding two pixels uh margin left 10 pixels and then we have with 5 and then text align center and then color white and the font size 12 pixels and border radius radius 5 pixels oops and now below here i want to add the [Music] left arrow plus so this is going to be margin of margin top spanning 1.5 pixels margin margin left it's going to be minus 7 pixels um border oops border top we will have six pixels solid transparent and we we're gonna have oops we're gonna have the same thing for our border for the bottom border and also the position it's going to be absolute so we save it now here i want to add a border which is going to be the left um it's going to be the left border kind of not the right border which is going to be 5 pixels so that's going to transpo transform this left arrow in a in an error kind i will show you whenever i'll inspect this element so here we have border right and it's going to have five pixels solid space and then after that we concatenate and we add props dot slices and here we have question key and we have then dot fill so we get the color dot field like this and now in this div oh actually this div is going to stay like that below this div we will add the actual data data from our state so now here we'll add the the kind of like the answer the user is choosing so we have props dot slices question key dot transform uh this is equal to one then we output ten otherwise we output props dots slices question key dot transform dot replace zero so replace zero point with empty string with an empty string like this okay so let's save it now and we see we got an error unexpected token uh questions line 20 so here somewhere i missed somewhere in this i made a mistake or something so we have props slices question key transform okay like this props slices oh i forgot about comma here okay so if we go back we can see that we have these numbers here now so whenever we update it and each each one of those has also the same color as the question you know here so now we can update them like this all right we get the stuff like that all of them are working very well okay let's see if there's anything else i wanted to do here uh okay so i i just wanted to explain what i did with this border stuff from here so let's inspect this and here this is this is the class left arrow so this is the left arrow you see it um we get the stuff here for making this triangle basically i'm making a triangle in css and then this border is the one that's giving the color to our triangle that's why i wanted to add it as an inline styling because this color comes from the state so having this one from here we can update this color for this triangle uh for each of these questions separately so each each of them has a separate color but if i remove this one from here it's going to disappear like that you see all right guys that's it for this video if you have any questions leave them in the comments uh if you like the video please give it a thumbs up subscribe for my channel and i will see you guys in the next videos

Channel: Vicode Media

Views: 4,728

Keywords: react, react js, reactjs, react.js, react tutorial, react app, react chart, react css chart

Id: gu0m588ef_o

Length: 85min 51sec (5151 seconds)

Published: Sun Aug 02 2020