Svelte Tutorial for Beginners #21 - Poll Form Component

Key Takeaways

okay then so now we have our tabs sorted and we can switch between contents what I'd like to do first is a form for adding new polls which is going to go right here so to do that we're going to create a brand new component for that form and I'll place it inside the components folder so let's create a new file and call this create Paul form dos belt okay so the first thing I'm gonna do is actually import this now in Apps felt and place it down here where we have content for adding a new poll so let me now just duplicate one of these things and change this and this to create Paul form like so and now down here we're going to output this instead of this paragraph tag and we'll just say create Paul form like so save it now we're not gonna see anything at the minute because that has no content over here and create Paul form so let's create first of all the script tag and then down here we'll do a style tag for later on and then first of all I'd like to flesh out the HTML of this form so we'll create a form tag it doesn't need an action and then inside the form we want to first of all do a few different fields now we're going to have a field for the poll question then a field for answer a or answer one and then a field for answer B or answer two and then finally a button at the bottom now each field I'm gonna place in its own div so we can style it a bit better later on so I'm gonna say div and then form - field and then inside this first form field I'm going to do a label and this is going to be for question and the label will say Paul question okay so now we need an input field below that so we'll say input it's going to be off type text it's gonna have an ID equal to question and then we'll copy this form field because gonna do two more but this time this is going to be for question a or rather answer a so answer - a and I'll change the label text to answer a and then this down here is going to be answer B so answer - B and we need to change the ID here by the way answer a and answer B and the reason we're adding IDs by the way is to link the label and the input because the four generally equals the ID of the input okay so now we need to change this to answer B like so okay so we have this form and we should be able to see that if we go to add new poll we can do well style this later on to make it look a bit better but first of all I want to do a bit of data binding so that we can track what a user types into each one of these input fields now previously when we've tracked this data we've created a separate variable for each input but now I'm going to show you a different way and that's just to create one variable called fields which is equal to an object and the object will have three different properties a property for the question property for answer a and a property for answer B so that now we're storing all of the fields inside one value because all of those values belong together right so then this is going to have a question property which is going to be an empty string to begin with then it's going to have answer a which is going to be an empty string to begin with and then finally answer B empty string to begin with so we have that fields object now we just need to bind to these three properties down in the inputs so first of all we'll bind the value of this one equal to something and in fact I'm just going to copy and paste that in each input field so we don't have to type things out again because we're super lazy or at least I am and then this is going to be bound to fields dot question because the question property is on the fields object right so this one is going to be fields dots answer a and down here we have fields dots answer be awesome so we're binding now the values that user types into the input to these different properties on the fields object so now we're storing those inside here now we also need a button at the bottom so let's do that button this will say add poll now when a user clicks on this button it's gonna fight a submit event on the form so we can listen to that I'm going to say on submit I'm also going to attach an event modifier which is prevent default we saw that before and that prevents the default action when a submit event occurs the default action is to refresh the page we don't want that to happen which is why we're doing this and now we're going to set this equal to some kind of submit handler which is a function we need to create up here so let's now do that I'm going to say Const submit handler is equal to a function and inside that function all we're gonna do is console dot log the fields object right so when we click on this it's just going to log the fields object and the current values of these three properties to the console so let me try this out first of all functionality-wise add new poll inspect and go to the console pod question do you like Marmite yep and na and add poll and we see this fields object now with this question this answer and this answer so we're now tracking those values and storing them in this object and later we can add this object to a data array which we could cycle through over here and output each object right but for now let's just focus on this form and I think I'd like to style it a little bit better so to begin with I'm gonna target the form tag itself this is going to have a width of 400 pixels a margin of 0 and auto so 0 top and bottom auto left and right that centralizes it and also applies margin to the left and right of it equally now we also want to say text - aligned is in the sensor like so now I'm gonna grab each form - field remember that's these things right here each one of these and inside here I'm going to give a margin of 18 pixels top and bottom just so each farm field is spread out a little bit and then it's going to be auto left and right and then down here we also want the input tags which is going to be 100% now that is 100% of 400 pixels remember not the entire screen so down here I also want to say the border radius is going to be 6 pixels that just softens the corners and then after that will style the labels themselves now we want to say the margin is going to be 10 pixels top and bottom auto left and right and we also want to text the line to the left that's to overwrite this thing right here we text a line to the center so that the poll could be in the center the Tsarina button could be in the center but now we're overriding that for the label so the label sits on the left so if I save this and come over here add new poll now this looks a lot better so let's just test this out again ad Paul and we can see everything it still works awesome so now we've created the poll and later on we're going to take this and add it to some data in the app component so then we can cycle through that data and output a template for each poll but for now what I'd like to do is just create maybe a custom button component that could be reusable so that they look a bit better so we'll do that in the next video