Svelte Tutorial for Beginners #25 - Poll Details Component

Key Takeaways

okay then gang so we have this polished component right here which is cycling through the poles and it's just outputting the question property on each pole at the minute so it looks something like this over here if we have two poles now obviously we want to output a better template for each pole where we show the question the possible answers and the number of votes etc so what I'm going to do is actually create a new component for a pole detail and what we'll do is pass that particular pole into that component and the reason I'm doing this is to make it more modular and also less messy in this file because if we combine the two it's going to be a lot of code so I'll go to components and I'm going to create a new file called pole details dots felts and then inside here we're going to have a script and we're going to also have a template I'll start that off by saying div with a class of pole and I'll come back to that in a second and then final it we need a style tag as well like so okay so now let's pass in a pole into this so first of all let's say exports because we're going to pass it in as their prop and then let pole and to begin with we don't need to give it a value and inside the pol list we need to import that at the top that component so I'm gonna say import and then it's Paul details from and it's in the same directory so dot forward slash and Paul details dots felt okay so now we can render that down here instead of this right here the poll question so inside that div we'll get rid of this and instead we'll output Paul details like so and we need to pass through a particular hull into this poll details component so that every time we get a new poll in this cycle this each loop we're passing it into the poll details component then we can receive it right here okay so let's pass in that prop so Paul like so okay so over here we can now access Paul and we can output it in template so what's the first thing we want inside these poll details well probably the question so let's do an h3 and then just output the poll dots question first of all and then beneath the h3 we will do a div and that's going to have a class of answer so this is going to be one of the answers and each answer is going to live in a div with the class of answer so we can style it correctly later and at the top we're going to have a percent bar so div dot percent and it's also going to have a class of percents - a now this percent bar is going to be used to show the percentage of votes that this answer currently house and we'll see that in more detail later on we're just going to place it there for now as is now down here I want to do another spawn tag and inside here we're going to have the poll answer so Paul answer a so that's one of the options and then over here we're going to output as well in parentheses how many volts it currently has so I'm going to say Paul dots votes a so that's the number of votes it currently has now it's probably going to be zero to begin with for most polls because when we create one it starts off at zero but for our original poll which we have in Aptos felt our dummy one it's going to be nine and votes B is fifteen so now we have this for one of the answers let's do it for the second answer going to copy all of that and paste it down here and I'm gonna change this to percents B and change this to votes B and this to answer B like so okay so now we have all of this information we have the question we also have one of the answers that's basically an option that a user can eventually click to vote on this and the current number of votes for that option so if I save it then come over here we're going to see at the minute we just have this one poll because it refreshed but now we have the title we also have answer a and answer B and how many votes those two have so if I create a new one just a load of junk for now then we're gonna see that one right here as well or rather this one right here and they start off with votes each but now without putting all of that information now what I'd also like to do is output the total number of volts so for this one right here it will be 9 plus 15 that'll be 24 now to do that I am going to use a reactive value so let me do a comment up here saying reactive values and then we'll create a reactive value called total votes and that's going to be equal to Paul votes a plus Paul votes B right so that's the total number of votes and then we can output that underneath the poll question so I'll do a paragraph tag and then I'll say total votes is going to be equal to total volts the reactive value okay so let's make sure that works over here we can see now total votes is 24 if we add a new one it should be 0 because 0 plus 0 is 0 which we get awesome okay so now we need to style this a little bit because it doesn't look great at the minute so what I'm actually going to do is just copy over some styles from my github repo because this is not a CSS course and I'm going to paste them in here but I am going to walk you through them so the h3 which is the poll question up here that just has a margin of 0 top and bottom it strips that away auto left and right the color is a mid gray color then we have the paragraph tag which is the total votes the margin top is 6 pixels font size 14 pixels so we make it a little smaller the color is a lightish gray and the margin bottom is 30 pixels so there's going to be a bit of a margin between this and the answers then now speaking of the answers we have that selector right here for each of these answer divs and we have a background of a really light gray so each answer is going to have this background of a light gray we'll see that in a second a curse of pointer which is the little hand and I want that because in the future a user is going to click on one of the answers to vote for that answer then we have a margin of 10 pixels up and down so that the answers have a bit of separation from each other and auto left and right position is relative and that's because this thing right here the percent bar we're going to position that absolutely relative to the answer later on so that's why we give this a position of relative then when we hover over the answer the opacity of that goes to naught point six that's just a little hover effect and we'll see that in a second the span which is this thing right here where we actually output the answer and the number of votes we display that as inline-block so we can give it some padding ten pixels up and down 20 pixels left and right so let's take a look at what that looks like and that looks a bit better so let me just add a new one as well so we can see these side-by-side and we can see now we have these two polls so in the future when we click on one of these it's going to cast a vote for that thing that you click on and then the number should go up and this percent bar up here on each of the answers will adjust because say this one's 50% rate of votes then the percent bar is going to go all the way to the middle and that might be a red block and down here it would also be 50% so that would be a green block to the middle Eve over here a hundred percent of the votes were for this one then the red block would go all the way across the green one wouldn't really even start okay so that's what those percent blocks are going to be for and we'll work out those later on but for now I think what I'd like to do is move on and maybe create a custom card component so that each of these polls can sit inside a card so the card is like a little container that brings the content out it gives it a bit of depth and we'll take a look at that next