Svelte Tutorial [Build a Chat Bot] - Full Course

Key Takeaways

hello and welcome to the intro to spelt course here on scrim BA so in this video I want to give you a bit of an intro to spelt and convince you that it is the best framework yet so a little bit about me my name is Noah in 2018 I got my first full-time developer job before that I was teaching English in China and had studied linguistics computational linguistics and then in 2019 I started a YouTube channel just about after spell 3 came out and this really helped me a lot with my career which landed me a senior spell developer position just a few months ago so what is felt is it a framework a compiler a language it's kind of all three but the thing that makes it special from other frameworks is that it is a compiler so what are some of the benefits of a compiler for one there's a much smaller bundle size so by being a compiler you don't need to ship the whole framework with your webpage to the client another great thing is that there's no virtual bomb so I know virtual Dom sounds pretty cool but it's actually just overhead and by getting rid of it you'll have a better performing webpage and the third thing is that it is extendable so spell can grow and have features added to it without increasing your bundle size so here in this graph you can see a comparison of different frameworks implementing the same real world app you can click on this image and go to the article you can see spell here is at the top with the smallest bundle size and then here is speed so after the page has already been loaded the performance and you'll see spell again is towards the top okay so now for you as the developer why is felt so awesome the first thing that really caught my eye about felt was how little code I needed to write to get the same end result as I would if I were using something like react or view another core feature of spell is its reactivity and if you don't know what this is exactly it'll become clearer as we go throughout the course but basically it lets you write simpler shorter and more declarative code and finally right here I have that spell is simple the developers have felt put a huge emphasis on to the per experience and this is what really makes Vogt shine right here we have a comparison of the lines of code taken to write these real web apps and you'll see spell again is very near at the top so now you might be thinking wow that sounds great but I want to know how will this help me in my career should I really invest time into learning spell so I would say if you are someone who's more of a self-starter and you've got side projects or a side business spell is going to be a great choice for your projects it's going to be faster development less stress chasing down bugs and you're just gonna have more mind space to think of higher-level problems rather than worrying about smaller implementation details another thing is that your web page is gonna load faster than if you were to use a competing framework just because it's a compiler and that's going to give you a big advantage and thirdly from my own experience and from what I've heard from others people just feel a lot happier using felt than another framework people feel like it's very simple and it's easy to write code quickly and keep your code readable and maintainable now if you're someone who's just looking to get a job and you want to have the best skills to get hired and get a better job then I'm not gonna say that you should only learn spell and not know something like react view or angular but there are some advantages to knowing spelt for one it makes you stand out from other candidates it shows that you're interested in newer technologies what's going on in JavaScript and that you take time outside of work to learn new things another thing that happened to me once was I was given a task to do and I could use any framework I wanted to so I used felt and by using spell I was able to finish the task much quicker and much cleaner than was expected of me so that gave me a lot of great bonus points and then thirdly it's an investment in the future so of course with technologies you never know what's going to happen which technology will be the biggest in ten years but I do believe in spell and if it really takes off in industry and you've been using it and learning it for a year that's gonna look great on your resume so I'm gonna get into the course outline basically we're going to look at components first what is this felt component how do you make one how do you pass them around then we're going to go into templating syntax which is basically how to add for loops and if statements into your HTML third we're going to talk about event handling which is fairly simple in reacts and and I'll show you how easy it is to do two-way binding in spelt so throughout all of this there'll be challenges scattered through and as we go through the course it'll all be building up to your final project so if this is your first time using scrim but you're in for a real treat at any point in any of the videos you can pause and type your own code into the code editor here and save by clicking this button and see your changes in the browser and we'll be using this feature to do challenges throughout the course so after every few videos I'll give you a challenge you'll be able to write it here in the code and then afterwards see me implement it right in this code editor and by the way this is the final project so if you want to look around a bit and see if you can kind of figure out what's going on you can also try it out right here and see if you can get different endings in this choose-your-own-adventure game and finally I've got some resources here that you might be interested in if you click right here this will take you to the mains felt website which has documentation among other things if you click here you can enter your email to be notified when this felt boot camp comes out here on scrim ba' this will be a great opportunity for you to level up your spelt skills to a professional level right here I have my youtube channel which includes lots of little spelt tutorials none of them interactive likes Crimbo here but still a good resource and finally here are the communities on discord right here you can click to join the scrim but community come by introduce yourself everyone's really friendly and this right here is the spelt discord community again everyone's really friendly don't be afraid to ask questions come by and tell us a bit about yourself so that's all for this video and in the next video we're gonna get right into spelt components see you there hi there so in this video we're gonna be talking about the anatomy of a spoke component so a spell component needs to be capitalized just like here at Beth's felt and a component will have three parts all of them optional their script style and then other HTML down here so really this might look familiar because it's basically just HTML so just like in HTML you have script tag with JavaScript style with CSS and then your other HTML wherever you want it to be so here in script will have our JavaScript so for example say hi that and style let's say give color is red the difference here in salt is that this JavaScript right here is basically the state of the component so I can use any JavaScript from up here down here in my HTML so I could put the variable say right here and I could put say say so if I run that I use command S to refresh here it'll do say hi so this comes from that here and if I want to change the state I can do set timeout and say equals bye so after one second it'll say bye and let's see what happens say hi and bye so that cuz that's how easy it is to change the state of your component now here in style we have div colors red as you'll see here this div or this style here is scoped to this component so this will only affect the divs in this component here it won't affect any other divs on the page if you do want other divs to be affected or any if you want your CSS to affect other parts of the page you can wrap it in a global tag like this and put give and background Lu or this will affect all Braves on the page we only have one given it's in this component so it won't really you won't really see it but this global div here would affect anything on the page so that's about it for a component and in the next video we're going to be talking about how to import components and how to use prompts okay so in this video we're gonna make another component and we're going to call its face dots felt this will be the phase component and here we're just going to have some HTML they're just kind of a bare minimum you need for a component and it'll put a little smiley face in there so from a Pratt's felts if we want to use this face component all we need to do is import face from face dots felts like that and then bound here on the page and now use something like face so you'll notice when I use this it'll have a background of blue but it will not have a color of red because this is global affecting all divs and this one is only affecting the divs in this component okay so even though face really is a div it's not actually here in the component so it won't be affected so let's take a look at that so here we have our smiley face with the blue background but color of black still but let's take this out for now okay so the next thing you can do with a component and a component is really just sort of a function for HTML with some other JavaScript magic in it so here to give it a parameter or a prop we can export it like this so export let's sighs lets us pass from the parent a something in for size so when you have a prop you're going to put curly brackets just like here with the JavaScript and you can put any JavaScript you want in here so let's say for and then here from size what we're gonna do is use that variable do an inline CSS font size oops eyes and like that this'll pass for ground here and if we refresh we'll see that as now four times bigger because we passed a four in here another thing you can do if it's just a string is just use it like that like a normal HTML attribute and that will work as well so now I wanted a size of four and another one size of let's say ten I could do it like this and I can also from face give it a default size so let's me fault size it to just the normal one so if I give it a default then I don't have to pass this in if it's just size of one so here we'll have one size for size ten and then this one will be size one because nothing is being passed so refresh that and you see this one this one in this one okay so in the next video we're going to have our first challenge so see you there okay so for your first challenge you're going to do five things first thing you're going to add a prop called index into face that's felt and you're going to give it a default value and then you're also going to add a list of faces in face oops face that's felt and using the index you're going to pass the index into the list which will be used to chose to choose the face so for example if you have a list of three faces and the index is zero it'll be the first one in the list if it's two it'll be the third one etc okay and then add three faces of your own onto this page using your new index okay so I will wait here patiently while you do that pause the video and unpause when you're ready to see how I would do it okay great work so I'm going to show you how I would do this so I'm gonna add a prop called index so right here support right index and we'll give it a default of about one okay and then I'm going to make a list so I'll call it face list and I'll have a happy face a just normal face like that and how about a angry face like this one okay and then here rather than just having this be fault smiley face we can in curly brick brackets you face lists at index okay so the index will be used inside a face list and be put out here on the screen so here rather than doing sizes I'll let's have them all use the default size and I'll have index equals let's zero this one I'll leave empty so it'll be 1 and this one index equals two okay so if we see how that looks so it's my face normal face angry face okay so that's all for this part and in the next part we're going to be talking about slots in spelt hi there so this for you I'm going to talk about slots just a quick note I move the styles down here and I just added some global styles I like to put the styles down here just so we don't have to really worry about them as much and we can interact with HTML and JavaScript up here okay so anyways slots so slots let you do something like this so here you'll notice our face component it closes itself and there's no content inside like this div so a slot will let you put something inside a component so like this is passed into this div component and we want to do that with face so I'm gonna make a new component and I'm gonna call it container dot svelte and then here in container I'm going to make a div with the class equals container so I like that to just match the name of the component file you and then I'm just gonna copy and paste some CSS and here like that and right here is where I'm gonna put the slot so it's pretty simple all you gotta do is make a tag like this slot and now anything that is inside of our container component is going to be inserted into that slot so let me show you what I mean here I'll import container from about slash container dots felt and then I'm gonna wrap everything in that container this all here and close it let's see how that looks well so now we have this container here and everything is put inside of it so all of this that I have highlighted is inserted into the slot like that so that's how the salt works if you want you can also check out named slots and slot defaults I'm not going to go into that but you can go look on that so next video we are going to talk about the spelt templating syntax see you then hi there so in this video we're going to talk about the spell templating syntax and what this lets you do is have if statements and for loops and some other things inside of your HTML so let's get started so if we want to have an if statement just hash tag if and let's change this say to a true or false so let's start it out as false and say for a second becomes true so if say so if we want to say something and rather than using this will say I okay so if say then display this on the screen so hash tag is used to open a a template block and this slash here is used to close it so we'll use that and see how this looks okay so you see it doesn't say anything and after a second it says hi so this is the if statement you can also have an else and right here will say not saying anything okay and here we use a colon because this is an intermediate value of the block so else we'll run that so not saying anything and hi and this is not an ad if so it just says black color okay so that's kind of the basics you can also do something like else if you know not say it's kind of redundant but you can have an if statement as well and that'll that'll work okay so now for the four loops it's a bit weird and I'm not a big fan of how this is named right it's hash tag each and then a list so I'll give it a list and we're gonna do 0 1 2 actually let's mix this up a bit so that it changes so just do 2 1 0 each as face index okay so now I can get rid of all these and I can close it / / / each and now rather than passing a constant value into there we're going to pass in the face index okay so it'll be a face with 2 1 and then 0 so these should flip so it'd be angry normal and then smiley face so let's see how that looks yep angry normal smiley face cool and another little trick I'll show you is that here you can do as index and if this name right here matches the name of the prop so usually you know you would do it like this oops but do it like this right it's kind of redundant since as the same name so you can actually get rid of this and just pass it in like this and that will work as well and there we go so those are the that is the basics of if and each or for loops in the templating syntax there's also a weight which is pretty cool if you have a sync data but I'm not going to go into that and that is all in the next video we will have your second challenge so see you there hey there so in the second challenge we're going to use what we just learned about spelt templating to add a header to our little web app so I've already added here heterodox felt and this is just some boilerplate what you need to do is add in each block right here so that rather than just having one image which is the spelt logo and this little happy guy one of it rather than having one of each it's going to repeat up here in the header so you'll need to use an each block for that and you're going to use an if statement and set timeout to make it appear after one second okay so we'll load the page after one second then you'll see salt logo and happy guy repeating up here as the header okay so try that out and I'll show you how I would do that when you're done okay so first thing I would do is here I'm going to import header from slash later that's felt and then outside of container I'm going to say if show header we'll put the header right here so we got to add that variable right here let show header equal false so it won't be showing and then set timeout um and show header will equal true 1,000 milliseconds cool so now here in header we'll actually let's see how that looks so after a second there it is so it's just once felt logo and one celebration guy so here we're going to add in each each here it doesn't really matter what we put because we're not going to be using these numbers so maybe I'll just put 0 0 0 and here also it doesn't really matter what we do so I can just type nonsense as our variable and then I'll end it so now this will repeat four times for each zero so let's see how that looks cool and you'll see as it gets bigger it kind of stretches out like that so that should work and I'm gonna change this we just underscore use that just to show kind of a dummy variable that we don't need okay that's all so in the next video we will be talking about events in spelt see you there hi there so in this video we're going to talk about the basics of event handling in spelt so to start rather than having the set time out what we're gonna do is we're gonna toggle the header based on a button click so I'm going to add a button and then in spelt through having an inline event the syntax looks like this so on says that an event and then the name of the event will be right there and then inside here we can add what will happen so your function show header equals true like that so show okay so now if we run this and there's a button show and there it shows cool so that's the basics that's fairly straightforward for an inline event handler now we're going to add a button component so button bats felt and I'm gonna paste in some boilerplate right here there's just a button with this these styles right here okay so let's import our but in court button front that /o again we're going to use our button components so because this is a component and not a native HTML button we cannot put an on-click handler like we did before so if we do show header equals true so really this is a button right and let's add a slot to our button so that we can put some text inside of it we show again show and run that if we click that you'll see nothing happens okay even though we have this on click event handler and it is a button so the reason is this is a felt component right and it doesn't know that you should be able to click it and have this event so in order to fix that this is called event forwarding you just need to add an on click with nothing bear so this says on click of this button right here send a click event up and let the parent handle it so unclick if we just add that right there now from here if we refresh again it'll work okay so now you can take that on click so this is event forwarding and that's how you get events from children up to parents ok so in the next video we're going to talk about event dispatching for a bit more complex event handling so see you there hi there so in this video we're going to talk about event dispatching so I've changed the button component to buttons and now you'll see there's two buttons show and hide both of them forwarding the click event so if we come back here if you want you can try it out you'll see that both buttons are going to do show head or true because they both emit the click so it doesn't matter which one you click it's going to run this here so rather than both haven't having them both do click what we're gonna do here is use 8 event dispatcher to make them remit different events so here the bit verbose but import create event this Hatcher from felt and then here we're going to make you can name this whatever you want but I usually use dispatch equals create event catcher well so now we can use dispatch to dispatch different events so what that means is here for example on click equals so rather than forwarding the click event we're going to handle the click event and it'll be a function that dispatches the show event so this can be whatever you want and whatever you use there is what's going to be put right here so show on show show header equals true ok so this will dispatch show and here this one right here will dispatch hide and again this can be any name you want I'm just making these up show and hide and then right here I can do on hide it'll be similar to this unhide equals it'll be show header equals pulse okay so now we have two different events on show on hide and now if we run that we'll see that show shows it and hide hides it okay so the second part of this is that you can actually pass values up through this dispatch so let's do this a bit differently rather than them doing show and hide they're going to dispatch they'll just dispatch click like normal both of them will do click but then here in the second part I'm going to pass false and I'm gonna pass this here as true so you can pass values up through the dispatch and from here they're accessible through II so now we don't have hide or quick or we don't have hide or show we just have click so on quick we'll pass see so this is the event variable that's always there with events so show header equals y dot detail so this e dot detail refers to whatever is passed in the second part of dispatch so we'll see if we refresh this we can still show and hide it setting it to e dot detail which is either true or false so that's all for events and I'll see you in the next video for the third challenge hey there welcome to the third challenge so this one's going to be a bit more involved than the last two and it's going to deal with the event dispatchers so here I have added Const buttons equals this list of objects and a score of zero so what we want to do is take these buttons and pass them into our buttons component and then when they click one of the options so here it would say um I sure do and gross it'll update the value update the score by whatever value right here is okay so what does that mean so first you'll need to add a prop on two buttons that's felt and that'll accept this buttons list of objects then you'll use the each to turn all the objects into buttons and the innerhtml should be equal to text so the inner HTML of the button and the value that it dispatches should be equal to the value right here okay and then handle the event in the app dot spelt component which we're in right now so on click it'll handle this and update the score so based on what they click it'll update the score by the value so pause the video try that out and push play again when you're ready to see the solution okay so first thing we're gonna do here is export ret buttons okay so we know that the buttons is gonna be a array so we're gonna want to do each buttons as writen we just need one here so we'll end it each loop okay so button right here will have button bat text and on click is going to dispatch the click event and it's going to batch but in got value and I'm gonna do it this way it's okay if you didn't do this but I'm going to dispatch an object with value equal to button dot value okay now up here on click e so e dot detail thought value that way it makes it clear what's being handled we're going to take score and would be plus equal whatever that is then finally the last thing we need to do is passed these buttons in and remember this is the same as brought into equals buttons they have the same name so let's try that and see how it looks cool so do you like pizza okay so that doesn't do anything because it's square of 0 I sure do they gives you 1 and gross gives you negative 2 cool so that's how you do it as you'll see it's pretty simple and in the next video we're going to start talking about reactive statements in Speltz see you there hey there so in this video we're going to talk about reactive statement since felt this is something unique to spelt and it's really awesome it's really powerful and even though it seems like we're still far away from getting to the final project that I showed you at the beginning of the course we're actually really close by using reactive statements it'll make it a lot easier okay so what are reactive statements so here I have an example smiley says and I've changed some things up a bit I've added a story here which is just the object just the content of what the story is like and you can change that as you like and I have here score show header like we had before and then I have this variable that I've added smiley says which is hi there your score is score okay so right now this will be hi there your score is zero which you can see right here and we want it so that when they click the button the score will actually be incremented okay so right now if we try that and I click none of your business where I'm good thanks you'll see that nothing changes and here in story so buttons is equal story zero buttons if we look at story here we're on this one buttons value negative one so we want this to update negative one whenever none of your business is clicked so we come back here and you'll notice it's not being clicked that's because this is not a reactive statement so this is executed one time so square equals zero and then smiley says hi there your score is zero okay and then it just stays like that it doesn't change because it doesn't know that score has changed okay it doesn't care it just stays like it was as always so if we want this to update then we're going to use a dollar sign : like this which is technically valid JavaScript and this is interpreted by spelt as saying whenever anything in this block anything in here any of the variables change re execute this block so if you understand that one statement you'll understand how this works so whenever any variables in here get changed re execute this block so now if we see how this works you'll see it gets updated so now score gets updated and this knows to re update the variable so whenever score changes it reruns and updates itself so another thing you could do and anything can go in this in this block here so you can put if statements so let's say for example if score is less than negative 4 so if they've gone down quite a bit then smiley says is going to equal wow your score is low and that's so let's see if that works and here we go and there while your score is low so the way this works is that this gets updated but then since this is second in line it checks if scores listed negative 4 and it updates smiley says to this and so you might be wondering so how does this work here smiley says has never been declared but we're still setting it without a let or a constant so if you have a reactive statement like this and you're setting a variable to this then it automatically will declare it as a lit smiley says ok but if we have something like this we're just kind of a block of code that's running this isn't setting any variable so this in this case smiley says has to already be declared but we're declaring it right here as a lit by doing it this way okay I hope that makes sense it can be a bit confusing it can take some time to kind of wrap your head around how this works exactly so I would suggest playing around with it seeing what you can do to help you get an intuitive sense of how this works so in the next video I'm going to have a challenge and we are going to get really close to finishing the final project so I hope to see you there bye hey there so welcome to the reactivity challenge this challenge is going to get us really close to being done with the final project and it's just going to be eight lines of code so with your eight lines of code you need to do three things first thing which will be two lines is add a happy score and a story index so happy score will keep track of you know how happy the face is based on what you've answered and story index is just going to be incremented by one as we go through the story so here I've given you story j/s feel free to change it basically this is story at story index zero and then one and then two so as it increments it'll take us through this series of smiley says and buttons okay so we need to have two reactive statements one for smiley says and one for buttons whenever story index gets incremented up by one then we want to update the page with the new smiley says and the new buttons options and then third which will be four lines of code is a click handler a function called click handler which increments story index whenever a button is clicked and adds a detail that value to happy score whenever a button gets clicked ok so a detail that value will be emitted or will be dispatched from buttons right here this value and it's just the value right here so if they click none of your business happy score goes down by one because that's something mean to say okay similarly here wow that's a great question value goes up so happy score goes up by one if the user chooses that ok so try that out and once you're done click resume and I'll show you how I would do it okay here we go so first thing is to add our happy score so happy score equals zero and our story index will also equal zero X we need to record statements so we're gonna upgrade smiley says and buttons so smiley says equals story at story index dot smiley says and then similarly we have buttons equals story at story index dot okay so whenever story index here gets upgraded this block will get executed again and it'll update it with the new values okay and then the last thing to do is add function quick Handler and it's going to take easy event here whenever something is clicked story index plus equals one and happy score plus equals e dot B tail dot value okay so let's see if that works save that hi how are you so if I say none of your business so maybe we should expand this a bit how much would we would check to give it okay wow what a great question so out the future do on here yeah cool so we're able to get through the story like that there's just a few little features we need to add on still in the next video we're going to add some of those features on and then there's two more svelte features that I want to show you as well so we're gonna do binding and transitions in it some of the next videos so see you then hi there so in this video I'm just going to give you one last example of reactivity and we're gonna do it in the face here so I'm gonna give you a list of emoji face like this and we have a reactive statement index equals happy score so rather than index being passed in we're just gonna pass in a happy score so from here we'll have face will pass in happy score and just for fun we're gonna say size equals story index plus one so it'll keep growing as the story goes on okay so whenever happy score gets updated it'll pass it here into face and face needs to know to update the index okay so that's why we have our active statement right here another thing you could do if you don't want to have this is just put it directly into the HTML so rather than index you could just say happy score that's five okay but let's say we wanted the index we wanted the face and we wanted to use it other places then we would need this here so I'm gonna do it like this and this will upgrade whenever happy score gets updated in the parent okay so let's save that and see how it looks so normal face I'm good thanks wow what a great question so got happier so this future Wow even happier do I hunt yeah I do yeah even I sure do oh great and you get a kissy face so that was the maximum happiness and now the face gets updated so next video we're going to talk about binding okay so binding is fairly straightforward and it's also called two-way binding so here if I have an input type equals text I can bind a value to this input so that means so we're gonna say name equals nothing that means if the user typed something into this input then it's gonna upgrade name with whatever they type and if main pages is going to update input with whatever name is okay so it's two-way binding they're always equal and whenever one changes the other one changes to the way we do that is we bind value okay so we're gonna bind this attribute of input bind value to name find value equals name okay so let's see how that looks so now we have an input and I'm going to put the name right here so name comma so they'll say the name comma and then whatever smiley says so I'll grade that so here if I say George George hi how are you so you'll see whenever I type here it updates the Dom and they're always in sync now if name were also to change because of a button click or whatever it would also update right here okay so that's all for binding fairly straightforward you can also bind values of from objects or lists and you can also bind properties of a of a component so if I wanted to bind the happy score and then I changed happy score inside a face it would update the happy score here okay so that is binding and in the next video we're gonna finish off the final project see you there story and hi there so welcome to the final challenge to finish off the final project before we get started let me just show you I added a bit of CSS to the h1 to the input here and also a button container or a buttons container so that they are next to each other like that okay so for the challenge you've got three things to do first part is header will appear if user chooses this felt answer so what I mean by that so here let me refresh that and here when I asked which is better spell to react if they choose felt then we want the spelt header to appear that header that we have so right now it's just if show header but show header can never appear so if they just felt the header should appear and as a hints because it's kind of it's kind of tricky to figure out just by looking at the story the happy score will be greater than 0 if the answer is felt ok and it'll be 0 or less if they chose react so just as a hint ok and the number to display the final message depending on happy score so based on what I say here right now it says undefined but we want to we want to display this last message right here so and so nice neutral or mean so if the happy score is above 0 then we want to display the nice message if it is equal to 0 the neutral 1 and if it is below 0 we want to display this message right here in here ok and then there is one last part is to implement the reset functionality right here so right now reset does nothing but we want it to take us back to the beginning and you know if you don't really feel like implementing the reset that's not really specific just felt so don't sweat it ok so the last thing I'll say before you start this you can implement both of these as reactive statements appear along with these you can do that or you can write functions to handle these use cases up to you I'll show you how to do them with reactive statements but that's not necessarily the best way to do it so try them out if you get stuck I'll show you one answer at a time so just pause the video now try it out and then play when you're ready so for this first one header appears if user chooses felt okay so here story is this question appears zero one two so this is story index two but after they answer it it'll be story index two three so we want to check on story index three is their happy score greater than zero and if it is then we're going to show the spelt header so right here next to my other reactive statements what I'm going to do is say if happy score greater than zero and story index equals three show header equals true okay so this will check whatever story index changes it will check is it three and if it is is happy score greater than zero then show the header okay so that's all we need to do let's refresh that and see and you'll see when I click spelt as the future it appears okay so now if you want to try the next challenge then pause the video and I'll show you how to do it otherwise I'll show you how to do this right now so display a final message depending on happy score okay so this will be a bit trickier what we're gonna do here in smiley says we want to somehow handle this so that smiley will say something different if there is a end right here if there is an end key in the object okay so if end so it basically right here if this dot end so normally it's this dot smiley says but in our case it's going to be this dot and question mark it's the question mark so if this does exist then we want to handle it right here in this and otherwise it's going to do what it was doing before and just to make this a little bit clearer we're going to do question equals story that story index and then we can replace all of these with question just a little bit of refactoring here and question cool so if it is question about end then we have three different use cases so happy score equals zero high B squared is greater than 0 or less than 0 so I'm actually gonna write a function to handle this so we don't have to write it all out right there down here function final message so if I'm just gonna do some if statements if happy score is greater than zero then turn question dot and hot call it nice this will return back else if happy score is less than zero overturned question dot and dot mean and finally we will return question dot and dot neutral if it is equal to zero so if it's not either of these ok and then right here we can just do final message and that will bring us what we need right there ok so let's refresh and just go through it cool and here we see I think somebody likes you so I got a happy score you can see what the smiley face and so I get the happy message now if I oh that's not gonna work it but if I go back and I do something need none of your business for react no I definitely just hate you somebody doesn't like you ok so that was the worst I could possibly do okay finally we have the reset so in order to reset we need to kind of hijack the click handler okay so normally it's passing edie tail value which is plus equal whatever number so if we come back to store j s we'll see here the value is going to be reset so we're going to take that value check if it is reset and we'll reset to the beginning ok so here we just need to add an if statement if you dot B tail that value equals reset and there's three things we need to do when you set story index back to zero and we need to set the happy score back to zero and finally show header it will be pulse and it's not res it then we'll do what we were doing before okay so let's try this out safe reset it so I'll type in my name here Noah okay I'm good thanks great question so the future yeah and I sure do awesome so I got the best score got a kissy face and now when I click reset it'll bring me back here and I can do it again okay so that's all for the final project if you want you can kind of you can change the story or you can fairly easily add some more reactive statements like this and have other things pop up or colors change there's a lot you can do with this pretty easily so the next video is the last video and horses the fact hello there great job you made it all the way to the end that is very impressive most people don't make it to the end of courses the fact that you did means you are a very special person so there's a lot of things we didn't cover in this intro to spelt course likes felt transitions contacts tours life cycle methods and sapper there's lots of cool things about spelt so what now I would say learn more so there's lots of different resources I'll get to that next another thing is just make lots of things in felt for me writing in spelt is so much fun and I really can't go back to doing it any other way also join the community the spelt community on discord github here the resources again felt by dev you can find an interactive tutorial there's also lots of Doc's again if you want to be notified about this well boot camp here on scrim ba' you can sign up here this is my youtube channel you can also email me spelt master at gmail.com and feel free to come and join the community here scream bow or spelt both are super friendly you can ask any questions you like and finally I just want to say happy selling I hope you enjoy spelt as much as I do and you continue to learn about it and create stuff and do wonderful things in the world see you next time