The Svelte Crash Course

foreign T in as much detail as possible and we're going to begin with answering the question what is svelte well I don't know about you guys but anytime I need my questions answered I do a quick little Google search and that's exactly what I did I went ahead and I searched for svelte and what ends up happening is this is actually a word that is in the English dictionary and what it means is Slender and elegant and you can use this word on a person so you can say something like she was svelte and sophisticated well why is this important well let's scroll right over here so we can get the definition of the actual framework that we're utilizing and you can see here that it says svelte is a free and open source front-end component framework or language so it is a front-end component framework where we can create uis but it is extremely slender and elegant it is extremely svelt so this is a very unique framework in that it's very very very simple to code out the code is very elegant and as you can see here we can build a very simple application with not much lines of code we have our script tags right over here and then we have our HTML and if we want to look at something maybe more reactive like clicking a button you can see that there's just not a lot of code compared to other Frameworks like view angular or react we just Define our function right over here we have our state we have a function that is going to update the count and then we have our HTML that is going to update whenever we click so this is just a lot of Elegance it's very very simple stuff and it kind of looks like just plain old vanilla JS so this is what we're going to learn we're going to learn this wonderful framework and we're going to learn it by building three different projects so the first project we're going to build is a very simple calculator application and this is just going to get our hands dirty with felt and learn some of the more basic concepts like reactivity State Etc so what we can do here this is again just a very simple calculator I can do five and then I can say times and I can say 4 and if I say equal you can see here we get 20 and I can go ahead and clear that I can also do six divided by 2 and I get 3 in this case a very very simple calculator application but it's going to get our hands dirty within the basics of svelte next up we're going to move on to this application which is a image gallery so this is going to be a little bit more complicated we're going to dive even deeper and and learn more about svelte and its its uh features so this right here is a image gallery where we can search for a bunch of different images based on the an image API so for example if I want to look for cats I can say cats here I can click on search and we get this really cool effect where we get a bunch of cats you can see we get this really nice animation that comes right out of the box with svelte so again we can search for literally anything that we want if we want elephants for example so we can say elephant I can go ahead and search and now we get a bunch of different elephants again because this is coming from an API we're not storing this data anywhere within our application now once we're done with this we're going to move on to the final boss which is a quiz application so this is really really gonna go a lot deeper into spell we're going to really understand a lot of the different features within it so over here we have two different cards we can either take a biology quiz or a chemistry quiz so let's say I want to take a chemistry quiz when I click on it it's going to redirect me to a different page so if you were to look at the URL it is completely different and over here we can answer all of our different questions so which compound has the highest boiling point well I don't really know my chemistry knowledge is is not that great I can you know pick whatever it is that I want and then when I submit it it tells me which one is right and which one was wrong and which one is uh the one that I selected so this is wrong this is wrong this was the one that I selected which was wrong and then this one is the right answer and now we can see here okay I'm going to zoom in here once more you can see here we also keep track of our question state so we got this question wrong now we can move on to the next one and let's go over here let's say I don't I honestly have no idea as this was the right answer so I got both of them wrong and at the very end once we're done the quiz you can see here I got zero percent zero out of two and I can go back and answer these questions again so let me go ahead and answer them right was this the right one nope that was actually no this was the right one so you can see wrong wrong wrong right now this is green and also this is the right one so now we have green green this time 100 two out of two and we can go back of course we can have as many quizzes as possible in this case we just have two we should probably have a little bit more than two questions so this is what we are going to be building a three project course and I think by the end of it you're really going to have a solid understanding and appreciation of svelte so let's get into it the first thing that we need to do in order to start coding a svelte app is to First create a spelled app so let's go through the documentation and take a look at how we can do that so if we go through the docs you can see here that we have some simple commands that we need to execute in order to create a new svelte app and specifically we're going to run mpm create spelled at latest and then an app name so this is going to assume that you have node and npm installed on your machine and once you have that installed you can go ahead and execute this command if you do not have it installed very very easy stuff just search for node and download the latest recommended version for your operating system once you do that what you can do is you can open up your terminal or your command prompt if you are on Windows machine I'm going to zoom in here a little bit and you can do an npm-v to get the version of npm that you have installed and if you get a version like this version over here that means you do indeed have it installed else that means while you don't have it installed and you have to go ahead and install it and same thing you can of course do it with node as well okay so now what we can do here is I'm going to copy this command and I'm going to move into my desktop directory because that's where it's going to create the spelled app and now what we can do is we can do npm create svelt at latest and we're going to call this calculator app because that's the first thing that we're going to work on So Cal Q later app so let's go ahead and execute this and this should create a new directory called calculator app so we're going to go ahead and say yes to this and it's gonna go ahead and ask us for some questions I want the skeleton project and we're going to use typescript typescript is a pretty much the standard at this point so we're going to say typescript we are not going to add eslint we're not going to add prettier we're not going to add any of these things so let's go ahead and kind of just skip over all this or I don't want any of this stuff and there we go so now we have our calculator app so now what we need to do is we need to open this up inside of vs code so I'm going to open up a new vs code instance here now of course you can use whatever text editor you want I'm going to be using vs code and this is also pretty much a standard at this point it's probably the best text editor out there so I'm going to open up my calculator app and I'm gonna say absolutely trust trust uh everything in here and you can see here that we get a very basic application so I'm going to go ahead and just zoom in here I think that's a little bit too much you can see here that we have this really really simple application so we have uh you know we have the this Veet we have a typescript config we have a spelled config we don't really have to worry about pretty much anything in here except for what is in the source because this is where we're going to be doing I would say 99 of our coding so you can see here in here there's three or three different things we got two files in One Directory so you have an app.html we don't have to worry about this this is going to be something that we'll talk about a little bit later but this is something that we probably shouldn't touch we also have an app.d.ts again something that we also shouldn't worry about and touch but mostly we're going to be touching things inside of the routes directory so right now you can see we have a page dot svelte file and right in here we have an H1 and we also have a P tag so it looks like just basic HTML and while it is basic HTML it's going to render as basic HTML as well so let's go ahead and try to run this inside of our browser now by the way if you go to your svelt page and you don't see any of the syntax highlighting like for example this isn't blue it's just like one large white file what you can do here is you can go to your extensions and you can download the svelte extension right here this this uh nope this one's failed for vs code and it's by svelte what it's going to do is going to add syntax highlighting for your spelled files so go ahead and do that but now nonetheless what I want to do is I want to go ahead and run my application so let's go right over here and I'm going to continue these commands here so the next command is move into that directory well luckily because we opened it in vs code we're already in the calculator app directory then what we need to do is npm install so npm install is going to install all of the dependencies that we need for our application to run so this is not a vanilla JavaScript application we are using dependencies which are code that is built by other people that we need to install onto this project and that code that we need is specified in our package.json so you can see here in our package.json we're saying that hey we need these dependencies and specifically these are Dev dependencies because they're only used in the development environment but we need to get this package right over here this felt package this felt kit package we need to get that code within our current APP directory right now and in order to do that we're going to do an npm install so an npm install let's go ahead and just do that an npm install is going to go into this package.json look at all of the dev dependencies as well as other dependencies that we need and it's going to install them into our application so let's go ahead and do that and you can see here right away we should get a directory called node modules and that's going to contain all of the JavaScript code that we want and we have specified right over here okay so now once we have that we should have everything we need to run our application so I'm going to go ahead and run the app by using npm run Dev so if you go back to our package.json you can see here in the scripts directory we can run npm run Dev you can run npm run build we can npm run preview check check watch so we can do all of these different things now if you want to run our application locally on our local environment we're going to do an npm run Dev which is going to run Veet Dev in the background so let's go ahead and do that now so we'll say npm run Dev and for me it's going to run the application on localhost uh 5176 for you it might be probably if this is your first instance of of uh svelte it's probably going to be something like 5173 but only because this I'm running three other svelte instances it kind of just goes ahead and increments them every time so your yours most likely is going to be 73 minus 76. all right let's go ahead and run that and there you go you can see that the HTML that is specified within our plus page dot spelled file is what we are currently rendering and of course if I were to change this let me just go ahead and auto format it so it doesn't complain anymore now if I were to go ahead and change this for example to the uh let's say welcome to svelt instead of svelte kit you can see here that this changes as well so it seems that again this is what is being rendered and if we want to modify this in any way we're going to have to modify the code in this file so we created our svelte app we got it up and running let's go ahead and get our hands dirty in the next few sections the first thing that I would like to do is build the HTML structure for our calculator application so let's go back to the complete version right over here and you can see that there's a bunch of HTML that we need to add in order to create this UI element so we need to probably add a few different buttons here you know we also have to add styling we have to have some sort of container all together so let's go ahead and build that out so what we're going to do is we're going to go back to our application we're going to go to the page.spel file and we're going to completely remove everything now once we remove everything you can see if you go back to our application we get a blank app now in order to create the HTML like we saw before we just go ahead and stick it into this file so let's go ahead and accomplish that together so we're going to create a main tag and then within this main tag I'm going to add a div that's going gonna have the class of calculator because we're gonna later on style our elements so let's go ahead and add the classes right away now over here we're going to have a bunch of other div elements so the first thing that I want to add is a div element for this display right over here so this is displaying you know the the values that we're clicking and also you know the the overall result that we get here so that is going to be our display or our results so we're going to say here dot results and that's gonna this is I'm using an emit abbreviation here what this is going to do is create a div with a class of results now that's going to be the results and also we also need another div that is going to house all of these different digits so I'm going to say digits and that's going to go ahead and create a div with a class of digits and then within this we're going to have another display and this is going to have our numbers and then we're going to have another div that's going to have our operations so let's create another div here that's going to have all of our different numbers and then within this we're going to have a bunch of different buttons so we're going to have a button and then on this button we're going to have you know our C button to to kind of clear things out like this right here let me zoom in here so we're going to have our C button to clear things out and I have to zoom out we're going to have a bunch of other buttons like our one two three four five six button so let's go ahead and just add those in manually as well so I'm going to go ahead and just add those in so we got one two three four five six seven eight missing one more let's copy that paste that in and nine so now we have all of those different buttons so let's go over here so now we have c one two three four five six seven eight nine now we're also missing zero so let's go ahead and add that in as well and over here we're going to say zero and we're also going to add the decimal point in here as well so now we have all of our different buttons or our numeric buttons including the C and the dot that we need to build our calculator now we also need this part over here which is going to be the operations so let's go and wrap this in another div so I'm going to go right over here and I'm going to say operations so I'm going to say RB rations and then over here we're going to have a bunch of other buttons that are going to be our operations so let's go just grab this button and we need a few operations here we need division operation and we need the multiplication we're just going to use the X for this let's use the addition so we're going to say Plus and then also we'll say minus and are we missing any other operation also the equal just so we can go ahead and figure out you know what this is equal to so the equal operation and that's it that should be our HTML structure so if I were to go over here you can see that we have all of our buttons of course they're they're not styled at all we need to of course style them to make it look a little bit better but right now we have to find our HTML structure within our spelled application and that's pretty much all you need to do for defining our structure you have a page.spel file and you just stick your HTML in there and it figures out exactly what it needs to render and that's exactly what it is doing right here now of course this looks hideous I do not like it whatsoever so in the next video let's just do a quick little refactor so that this can be a little bit prettier in this section of the course what we're going to do is focus in on styling our application so we built the HTML but as you can see it is a horrendously disgusting looking application we need to add a few more styling so that it can look a little bit prettier like this over here now luckily adding styling to our svelte application is really easy all we have to do is within the spelled vial itself create a style tag so I'm going to go ahead and create this style tag then within this we could Define all of our different styles so for example let's say I want to style this div right over here that has a class of calculator I would just go ahead and say dot calculator I'm going to go ahead and just say background color of let's say aqua and if I were to do that you can see the Styles have been applied right and that's pretty much all it is that you need to know for styling a spelled application your CSS knowledge can well transfer relatively easily now because this is a svelte course and I don't want to worry all too much about styling I'm just going to go ahead and paste all of the different classes as well as their styling within our app right over here now for you to go ahead and grab this all you have to do is you have to go to my GitHub repository that I'll have in the link in the description below go to the calculator application go to Source go to the routes go to the page.spel file and just go ahead and copy all of these Styles and just paste them in here that's pretty much all it is that you need to do now once I paste that in there of course these styles are going to be applied however it is pretty horrendous at this point it obviously it doesn't look like our final app and that's because we still have to apply some of these class names to our HTML elements for example the button needs to have a BTN class that we have defined right here so what I'm going to do is I'm going to grab this and we're going to go let's go here I'm gonna grab this and just literally paste it in all of our different buttons so I'm going to say button button button button button we're gonna say button button button button and button all right there we go so now we have our applications looking a little bit better but it's still kind of horrendous though the first thing I want to work on is this button right over here so the C button which is the clear button you can see that it is pretty much three times as large as all of the other buttons so that's what we need to do we need to make this three times as large now luckily we have a class for that which is going to be BTN x large so I'm going to say here on top of all of The Styling that I get from button I want to make it BTN x large and you can see now it is well x large it spans three different buttons another thing we also need to do is we need to make this button uh two uh buttons or the the width of two buttons again luckily we have a class for that as well keep going to the wrong uh page here and that's going to be button large so I can go ahead and go to this zero and I can say button large like so and now you can see here we have our zero now this is looking pretty good it's looking incredibly similar the only difference I can see now is that the operations have a different background color so let's go back over here and let's go to the operations and what we want is we want that orangey color so what we can do is we can grab this BTN Orange and we can just place it right in here so you can say BTN orange BTN orange BTN orange BTN orange all right so now once we do that you can see we have our calculator fully styled and everything is ready to go so that is how we style our application I know we kind of quickly kind of copied and pasted this these things into it but really all you have to know for is felt application is to to style a specific file uh the HTML all you have to do is add the style tag now we're pretty much done with the HTML as well as the CSS now let's go and get our hands dirty and make all of this functional and this is where we're gonna really see the powers of svelte okay everybody let's go ahead and dive into the JavaScript spelled side of things and the first thing that I would like to do is to clean up our code a little bit because right now as you can see we're rendering a bunch of different buttons that have a lot of the same attributes so you can see button one to nine are the exactly the same they have exactly the same class all that is different is what is inside of the button and really this button too is kind of similar this button is very similar except it has a different class and this button also is exactly the same and same right over here a lot of these buttons or all of these buttons have exactly the same attributes except for the content within them so this isn't a very good approach because you know we're hard coding all of these different buttons even though they have a lot of the same functionality and style filing to them so instead this is what I would like to do I would like to in some sort of JavaScript way Define our uh all of our different operations in some sort of array so for example all of our numbers we can just Define them in an array and then what I would like to do is iterate over that array and then for each element within that array I want to render a button So eventually it would look something like this so we get these same exact effect that we have already but this is much cleaner and it's going to be easier to manage and update and change so this is what we want to accomplish so let's go ahead first and foremost and create that array now whenever we want to create something with JavaScript you might have guessed it we're going to add a script tag and typically the script tag is at the very top because that's where all of the logic is going to be so we're going to add a script tag and if you want to use typescript with it all you have to do is say Lang and then we can say that that is equal to typescript if you're unfamiliar with typescript that is completely fine not a problem I'll try to explain everything as as much as possible and and really typescript in this course is probably going to be just a lot of JavaScript okay so let's go ahead and Define our numbers so I'm going to say numbers and then over here I'm going to say an array I'm going to make this a const because we're not really going to change it within our application we're going to say here one we're going to make this strings not uh not uh uh numbers so we're going to say four we'll say five six seven I'll say eight nine and also we need zero and also I know this is not a number but we'll also include the decimal point because we need that in there okay so we have our numbers now this is all great let's go back to our application but of course now what we want to do is we want to iterate over those numbers and start rendering these different buttons so how do we do that in svelte well this is what we do so what we do is we wrap everything in a for each block so what we're going to do here is we're going to let me just comment what we got out so I'm going to comment this out and I'm going to go right over here I'm going to say curly braces and I'm going to say each over here and what this is going to do is it's going to iterate over an array now of course we have to specify that array so we're going to say numbers we want to iterate over each of the numbers array now for each element that is currently iterating over what we want to do is we want to grab that element the content within that element so we can render a specific uh button so in order to grab that element we're going to say as number so let's say that our uh our as felt is iterating over this array and it's currently iterating over the first number so this number right now is going to be equal to 1 and then it's iterating over the second number well this number over here is going to be equal to 2 and so on and so on and so on now we of course need to also close this so we're going to say here we're going to say each to close it so it's kind of like HTML we have need to have a closing tag as well but within here what we can do now is we can pass in the HTML that we want to render so if I were to go ahead and just save this right now you can see we get a bunch of different ones which is which is good this it seems like it's worth iterating over our uh array and we are iterating over our array and we're rendering our button but of course we want this to be dynamic so to do that what we're going to do is we're going to get remove that one all together and then within that one we're just going to say curly braces and then number let's go ahead and save that and now you get one two three four five six seven eight nine the zero and the decimal so this is significantly significantly cleaner now there is one issue and of course the issue is that this zero should have a different style than the other numbers as you can see here this the zero is has another class of button large now the easiest way to do this is to just do a simple little check over here so instead of returning a string what we can do is we can return uh some JavaScript so we can wrap that with curly braces and then over here we can use template literals we're going to use template literals here we're going to say well if the number so if the number is equal to zero then what we want to do is we want to add another string to it else we don't want to return anything else so over here now what we can do is we can say BTN and we'll say large I think that's what it was called yeah and now if I were to save that you can see now we get that effect where uh uh it is back to you know being nice and large okay so that's pretty much all it is that you need to do now another thing that we also are missing is this button right over here the C button now this because this is a a button itself and it's it's kind of uh just a way to clear things out I would say don't put it in here I would say just put it as its own button like so so now there we go so now we have everything working together pretty well okay so we can now remove this code which is really nice you can see how much simpler our code gots now we're just iterating over this array and we can do the exact same thing over here so let's define another constant and this time we're going to call this operations operations are B rations and over here what we're going to do is we're going to Define our operations so what operations do we have well we have the division operation the multiplication operation the subtraction operation the plus operation and then the equal operation so let's go ahead and grab this and now we can iterate over this and I highly suggest pause the video and try to do this on your own just for practice sake so what do we want to do well what we want to do is we want to go ahead and well we want to Loop over the operations we're going to say as obseration and then what we want to do is we want to have a closing tag for our each block and then what we want to do is for each operation we want to render this button now of course we're going to dynamically have our operation and then we can just go ahead and remove this all together how cool is that so now we can go ahead and format it the way that we want to and it should look the same and that's really all it is that we have to do it you can see our code has significantly gotten smaller and I mean I can fit this whole block of our HTML now within you know this this kind of screen size whereas before I had to scroll back and forth you can see that this is a lot simpler now another thing that we should do anytime that we are iterating over an array is provide some sort of unique identifier so svelte needs this anytime that we decide to update our array and it just makes it more performance and a little less buggy now in this case we're not really ever updating our array so it doesn't matter all too much because of course we Define this as a constant we're probably I mean even if we did Define it as a const we can always push things into our array and that's going to add things and we can always remove things from our array uh so so it is very important that we add some sort of unique identifier for performance reasons so what we're going to do here to Define that unique identifier is we're going to go over here and then inside of this each block and then Define that identifier Within These parentheses now a unique identifier for this array is probably the numbers themselves you can see all of these numbers are different there is no duplicates here so I can just say number like so and that is going to be a unique identifier and we can of course do the exact same thing for the operation because the operation again itself is all unique now if we had um you know something else like over here we had another plus then this probably wouldn't be a good choice because as you can see here we have two pluses and then and that's not unique and that's going to cause you know the performance benefits that you get they're not going to be there anymore so we need to find some sort of unique identifier luckily all these are unique and that's pretty much it and as you can see now if you go to our application of course nothing is functional but it still looks exactly the same same but the code quality is significantly better so that's pretty much all it is that we have for this lecture let's go ahead and move on to the next one in this section what we're going to do is handle an extremely important Concept in svelte to understand and that is State and handlers so to tackle this and to try to really understand this this is what I want to accomplish so I'm in the final version over here and you can see that my first number is three and then I'm prompted to select a operation now whenever I click on a specific operation you can see that the background color of that operation is changing telling us that hey this is the thing that you have selected so that's really all I want to do right now all I want to do is when I click on a specific operation it changes the background color and that is going to introduce the concept of state so right now I our application is in a state where the selected operation is plus and because we're in that state we're able to manipulate the background color of that specific operation button now of course we can always change the state of our application so that the selected operation let's let's say this time is multiplication so I'm going to go ahead and change the state and you can see this is changing the UI itself now right now you can see that the background color of the plus is orange whereas the multiplication is gray so that is exactly what state is our our application is in a different state and because it's in a different state we're changing the UI all together okay so how are we going to define the state within our application really really easy we Define it like we Define any variable that we might want to eventually change and that of course is by using the let keyword we're going to say let's we're going to say selected operation and we're going to say that that is going to be equal to an empty string now of course we can go ahead and change this anytime that we want to and it's going to update the UI it once we have specified it over here okay so now let's go ahead and try to update our selected operation so whenever I click on one of these buttons I want to change this to either you know divide or times or minus or plus and then I probably don't want to have this equal to be well I don't want it to be equal to equal because I just want these operations right over here so how are we going to do that well this is what we're going to do whenever we click on this button we're going to run a function that is going to update this state now how are we going to do that well what we're going to do is we're going to add an event handler so an event that might happen on this specific element is we might click on it so we want to listen to that event so what we do here is right on the button itself we say on and then colon you can see that there's a bunch of different events on abort on blur on on drag on play on whatever now over here specifically we're going to choose on click so whenever we click we want to well go ahead and select a specific operation so I'm going to say here I'm going to create a function I'm going to call this handle operation handle operation click because that's exactly what we did we're going to Define that function inside of our JavaScript so I'm going to say const handle operation click and then over here this is going to take in the operation now this operation is going to be of type string so we're just going to define the type because we're using typescript here and then what we're going to do is we're going to update the selected operation to the operation that we got over here so I'm going to say selected operation and I'm going to say that that is going to be equal to equal to this operation very very simple stuff there's there's nothing all too complicated going on here okay so now what we can do is we can just grab this handle click and then over here instead of kind of calling it like this what we can do is we can use a callback function oops I made a mistake here so what we can do is we can use a callback function so we can use this callback function that calls this function and that way we can actually invoke it and then pass pass in the operation itself so there we go that's pretty much all it is so now we've updated this state and we added an event handler that well can can kind of listen to a click event and then update the state accordingly now if I were to of course go back to my app over here and I started clicking around well nothing you see it seems as though nothing is happening but let's go ahead and just render the operator let's go ahead and just render this selected operation somewhere I'm gonna go render it right here for example and let's see if you can see it uh let's let's just give it we'll make it nice and bright so we're going to say h one and we're going to remove these Styles a little bit later but let's just make it color pink just so we can really see it uh I still don't see it where oh yeah oh yeah so so we don't see it now because it's an empty string let me go ahead and now change the state to subtraction there we go we saw it and then change the state to plus you can see now this is updating change the state to to uh times change the state to divide so you can see that this is indeed working and it's updating the UI of our application which is really really cool uh now let's go ahead and just completely remove that we don't need that anymore so instead what I would like to do instead of just displaying the operation I would like to change the background color so very similarly to what we have done right over here we can do the exact same thing so I am going to go right over here and I'm going to wrap this in parentheses and I'm going to use template literals here so we're going to say button and then we're going to dynamically either render button orange or there's another class in there called button silver so we're going to say uh dollar sign curly braces I'm going to say if the operation is equal to the selected operation then I want to go ahead and render button silver and then else I'm going to go ahead and render button orange so let's go ahead and save that and if I were to come here now you can see we get that cool effect and this is a very fundamental Concept in svelte State and handlers and updating our state and updating our UI so to really try to try to uh understand it because we're going to be seeing it throughout every single project and every single spelled project that you create as well in this section what I would like to do is work on a little bit more State logic within hours felt calculator so what I would like to do now is whenever I click on one of these buttons I wanted to display right over here like I have done inside of this final version as you can see here I can click on any one of these buttons and it displays right here in this display now of course this is going to involve States because we are currently changing the state of our application so let's go over here to the code and again whenever I click on this I want to change the display so let's define a new piece of state and that piece of state is going to be called display so I'm going to say display let me go ahead and make this an empty string for now now let's go and render this display within our HTML so right over here inside of this result so I'm going to go ahead and kind of uh uh you know make this like so and then we're going to add let's say a uh you know what we'll just go ahead and just say display you know we could add some sort of typography a component but we'll just do it like that now if I were to go back of course do you see nothing but if I were to change this to like 333 we should see three three three okay so this is looking good and now we know that this is what we want to update whenever we click on one of these buttons so let's add a click Handler so I'm going to say on and I'm going to say click and then over here we're going to create or we're going to call a new function and this function is going to be an arrow function that's going to call a function called we'll call it handle number click and we're going to pass it in the number itself so we're going to say number is equal to that okay now of course it's complaining let's go ahead and just format this just a little bit better I was complaining because uh right here as you can see we haven't defined this function so let's go ahead and Define it so I'm going to say const handle number click we're going to say number now this is going to be of type string not number because remember these are strings of numbers and then over here we're going to go ahead and actually handle this so what do we want to do well really really easy what we want to do is we want to say display is equal to not so so this might be a very common mistake so we're going to say display is not equal to the number itself because what that's going to do is replace the number we do not want to do that so what we want to do instead is well something like this so we want to let's use template literals so whatever the current display is show it but also append this other number so whatever the current display is show it but also add this other number as well and what that's going to do is now we can you know do things like 20 208 etc etc so this is looking good but there's a lot of different nuances and there's a lot of different things that we have to worry about here because right now if I wanted to for example I can add a decimal point okay that makes sense but then I can add another decimal point and another decimal point and another decimal point and of course this isn't valid uh this isn't a valid number I can also do something like 8.8.8.8 again not a valid number another thing that I can do is I can add a zero even though we have nothing in the display right now so we can say zero zero zero five well we shouldn't really allow this because zero zero zero five is just five so we shouldn't allow that however we should allow if you have something in the display to add zeros you know to increase the amount of digits that you have so there are a lot of things that we need to worry about of course this button too is not working so let's just go and handle uh the very easiest thing and let's say if we have nothing in our display I don't want to have the ability to add a zero so let's go ahead and do that so I'm going to go right over here and we're going to check we're going to say if the number so if the number is equal to zero or let's just first check if the display is equal to nothing and so and the number is equal to zero so and the numbers equal to zero then what I want to do is I want to return early I don't want to do anything so let's go back here and now let's give that a shot so this works of course I can click 555 but if I have nothing in there you can see perfect it's it's not adding anything in now if I were to add eight and then add a bunch of zeros that does work so that's really good okay so that's uh pretty uh incredible now the other thing I want to tackle is I don't want to have more than one decimal point so for example if I were to add 9 and then add another decimal point and then eight five I don't want to have the ability to add another decimal point because you can only really have one so this is what we're going to do to tackle this to tackle this what we're going to say is if the number and I know this isn't really a number but we'll just say if the number is equal to a decimal decimal point and the display already has a decimal point so we can say display dot includes to kind of Traverse the string and check if it includes a decimal point already then what we want to do is we want to return early so we don't want to update our states we just want to go ahead and return so let's give this a quick shot now so I'm going to say 25.5 and then if I try to add another Point as you can see this isn't indeed working okay so this is incredible we have kind of made our application a little bit more foolproof but there are some other things that we also need to work on so the first thing that I would like to work on is if I click on a decimal point and it's the very first thing instead of just showing the decimal point I want to say 0 and then dot so that's what I would like to show instead so let's accomplish that let's add an if statement here and what we're going to do is we're going to say if and we're going to say if the display so we're going to say if the display is equal to an empty string and we're going to say the number is a decimal what we're going to do is we're going to return early again but this time what we're going to do is we're going to return this so let's just we can even just kind of hard code this as a string like so we're just going to return 0 and then dot so that's going to ensure when we whenever we first click on this we get zero Dot and then we can go ahead and start appending other things in there now of course there's other checks that we could do we can also check that it you know your number is not too big we can check that uh you know there's a bunch of other things that we can do but I think this is pretty good and you guys probably get the gist of it now of course if you continue playing around you can probably find some some issues that might linger but again this is fine you guys probably understand the point for this tutorial okay so this is low looking amazing but now what we need to do is we need to have the ability to you know select a specific um number and then we need to select an operation and then once we select the operation we need to select another number so we we should be able to do something like for example 36 times and then 25 but right now you can see that it's just kind of continuously appending numbers in here so that's that's definitely not what we want so we need to have some sort of way to First figure out that well we have one number you need to store that first number and then we need to figure out what the operation is which we kind of already know by the state and then once we have an operation what we need to do is we need to uh select our second number so the thing is we're going to have to create another piece of state and I'm going to say selected and we're going to say selected first number or you know what we'll just call this first number instead of selected first number and then over here we're going to have another piece of State called second number we're going to go ahead and say that that is going to be equal to zero now over here what we're going to need to do is we need to of course update these so how do we know that we're updating either the first number or the second number well we're going to know that we're updating the first number if we haven't selected an operation yet now if we have selected an operation then we are going to be updating the second number and we should probably display the second number so let's go right over here and I'm going to check if we have not selected an operation yet then what we want to do is we want to go ahead and we'll go ahead and create this number now over here we're going to have to kind of do this check in here as well let's go ahead and format that because this is this is going to update either the first number or the second number so we're going to go ahead and do this checks we're going to say if display is equal to string and this is equal to number and what we're going to do is we're going to say that the first number is equal to this string of 0 Dot and then what we're going to do here is we're going to say that the display is equal to the first number so the display is equal to that first number now of course if we don't hit this condition then what we're going to do here is we're going to say that the first number is equal to the template literal we're going to say dollar sign and then curly brace I'm going to say that this is going to be the selected number or sorry the first number so we're going to say first number and then the actual number that we have over here so we're going to say number like so and then what we can do is we can say the display is equal to that first number so I hope that makes sense we're pretty much doing everything but we're storing the variable in the first number and then we're storing it in the display so we can actually show it as well now this is for some reason doubling so first number what's going on here so first number is equal to first number and then the actual number itself I wonder why that's happening let's see here three three uh uh first number I'm not really sure why that's happening I feel like it shouldn't be happening is is it a empty string or the display hmm let's let's go ahead and display the first number just to see what's going on here so I'm gonna go right over here and let's go to the display and let's just display the first number so first number save that three so it seems as though when we hit this point it seems as though it kind of doubles which is kind of strange I was not expecting that so let's go over here let's see if we have any bugs so we're going to say if oh we're doing it okay here's what's happening so we're saying it's the first number and then we have this kind of uh display over here so what we should do is we should probably return early or even just remove this all together uh okay so now let's go back over here let's say for display and let's look at it now all right cool and now we can click on the division and then we're not really updating anything at this point because now we we need to handle the second number okay so let's go ahead and do that so now what we can do is in this else clause so we can have an else Clause over here and now what we want to do is we want to handle the second number so we can have the same exact check and this time we want to handle the second number and this time we're going to also display the second number now we're still storing the first number but this but we're displaying the second number which makes sense let's go ahead and format this just a little bit better and of course we can do the exact same thing here I'm just going to go ahead and kind of copy paste this verbatim and we can also to make this to make our code a little bit cleaner we should probably also store this inside of a function but I think this is good for now uh so I'm going to say second number is equal to second number and let's go over here and let's grab that we're going to say display is equal to second number okay and now what we can do is if we were to go back to our application now what we can do is 35 times let's say 55 and you can see now it is displaying that second number okay so this is terrific and this is kind of you know it's pretty complicated logic so if you understand what's going on here that is pretty good in this lecture what we're going to do is wrap up the functionality of our application we pretty much are done everything we're storing everything that we need to do we just need to wrap it up by actually doing the operations and making these portions functional so let's go over here and we're going to go and we're going to primarily work today on or right now on the handle operation click so the first thing that I would like to do is if you haven't selected a first number so if this is an empty string then what we want to do is we want to go ahead and prevent you from selecting an operation altogether so let's go ahead and do that check so I'm going to say if you haven't selected a first number so we're going to say if first number is equal to and we're going to say if the first number is equal to an empty string then what we want to do is we want to prevent you from selecting an operation so now if I were to try to select an operation you can see here that it doesn't work however if I click six now I can select an operation all right now all of the other operations other than this equal if I click on them I already have the logic for it I just want to update the current state that I am in now we need to add the logic for when we select equal because this is going to be the big one of course because this is where it gets the first number and the second number and it does whatever operation that we choose so over here let's add the logic for if the operation is equal then what we want to do is first we want to do a check we want to ensure that the first number and the second number are defined now if you ever reach this check then yes the first number is defined we also have to assert that the second number is designed defined so we can say here if the second number and what we can do to actually kind of simplify this is is we can do something like this and we can say here if the second number is not defined we also want to return early and not do anything now if both of those numbers are defined then what we're going to do is we're going to parse them into numbers themselves so I'm going to say const and I'll say first num and I'm going to say that this is going to be a parse int I'll go ahead and say selected or first number like so and then also we'll say second num and that's going to be equal to parse and we'll say second number because of course these were strings before we need to change them to numbers so now what we can do is we can well either divide them or multiply them depending on the operation the selected operation right here so let's go ahead and do that so now what we can do here is we let's just say let results and we're going to say that that is going to be equal for now to an empty string and what we're going to do is instead of having a bunch of if else statements I'm going to switch on the selected operation so we're going to add a switch statement here and we're going to say well if the switch statement says that the selected operation is division then what we're going to do is we're going to say that the results is equal to and we're going to say that the results is equal to the first num divided by the second num all right now now the result says complaining at this point because what we're doing is we have assigned this first to be an empty string so it's type of string but now what we're doing is we're kind of reassigning it to a number so what we can do here is we can just say two fixed because we probably want to get two decimal points we can say two fixed of two like so and then we can break all right now of course we can do the other case so we're going to say case and then over here we're going to say multiplication and we're going to go ahead and just kind of copy what we got here let's go ahead and just copy that in we're going to say results but this time it's multiply and let's go ahead and just copy this again paste that in there and then this time we're going to have a plus and then plus and then lastly we're going to have the last case which is going to be the subtraction case and then this time you have subtract subtract and there we go so now what we can do is we can just say that the display is equal to the results and that's pretty much all it is that we need to do so let's go ahead and save that now let's do 25 times 2 which should be 50. there we go you can see that it works now another thing that we should do is we should have the ability to uh you can see now it gets a little bit funky whenever I click on it again because if I just say 2 times 2 for example and then I say equal to and then I add another two you can see that the first number hasn't been cleared out so what we want to do here is we want to pretty much clear everything if we click on it again and we're displaying the results so what I'm going to do is I'm going to go here I'm going to say is displaying results so is displaying results and that's just going to be a Boolean value and I'm going to say that initially this is false but then and we're going to say let for this but then what we're going to do is right at the very bottom we're going to say uh is displaying results we're going to change that to be true like so now what we can do is at the very top here where we are selecting our operation is that if we're displaying our results we kind of want to clear everything all together so what we can do here is let's go to number click we're going to say if is displaying results and what we want to do is we want to clear the the first name the selected operation as well as the display because now what we want to do because what we're doing is we're clicking on another number which means we want to do kind of another uh mathematical operation so we want to clear everything so how are we going to clear everything let's just create a function that's just going to handle that for us so I'm going to say const and I'll say handle clear and then over here what we can do is we can say that the first number we're going to say that that's going to be equal to a string let's say the second number is equal to a string and then we're going to say the selected operation is equal to a string we're just going to go back to the initial setting that we had so the display is equal to a string and also is displaying results at this point we're going to say that that is going to be false so over here we can go ahead and call that handle clear and that's it so if we can format it a little bit better and also another thing that we can do and we should do is whenever we click on the C button we should call that function so we can say on a click and because this doesn't take any parameters we don't have to do that typical Arrow function and invoke it we can just kind of call it like this right over here okay and that concludes our very first project so now we get 35 times 2 that's just which is uh uh not working for some reason so 35 times 2 is equal to and uh why is that not working so let's go over to e let's go back to our operation here and I believe this should be here that's why it's not working there we go this should be within the equal sign so we're only displaying our results if the operation is equal that's why it was bugging out apologies for that so we're going to say times two that should equal to 70. but now when I click on another number you can see it kind of clears everything out we can say 8 times 8 is equal to 64. I can also click on this button to clear everything back to the original state so that concludes the very first project and it gives you a good little introduction to svelte and hopefully by this point you kind of understand the basics because this is these are the basic concepts that you need to understand if you want to develop more complicated apps which we are doing in the next few sections so the next section that we're going to work on is this app right over here the image gallery so again I can go ahead and giraffe is that how you spell it I'm not 100 sure and we can just get a bunch of little pictures of graphs so this is going to be maybe not significantly more complicated but it is going to be more complicated but we're going to use a lot of what we have learned from the calculator app because those are the fundamentals anyways I'll see you guys then time for our second project this project is going to be the image gallery so we have this image gallery we have this input right over here and in here we can put literally anything that we want so for example I can put in buildings and if I were to go ahead and search I get a bunch of different buildings so what this is doing is it's hitting a unsplash API with a specific term and we're getting back a response and we're rendering that response on our svelte application so let's go ahead and build this out but first we need to create a svelte app so let's go to our terminal I'm going to say npm create spelled at latest and then I'm going to say image gallery like so so that is going to create a new svelte application now it's going to proceed to ask us a few questions here so let's go ahead and answer these questions so we're going to say skeleton project we're going to say typescript we'll just say we want to add nothing and there we go now we have our wonderful svelte app okay so now that we have that let us go ahead and open it up in vs code so I'm going to go here to open I'm gonna go to desktop and I'm going to go to image gallery and go ahead and open that up so now that we have that open we can start going ahead and coding out our app so as a quick reminder we have our source and we're going to do primarily all of our different all of our work right over here in the page dot spelled file but before we do that let's open up our integrated terminal and let's do an npm run Dev in order to run our application and sorry it's not npm run Dev instead it is let's go here it's yeah it is npmram Dev it's just we have to do an install so let's do an npm install first and then after the install we can do an npm run Dev so let's just wait this out a little bit come on and then npm run Dev like so and there we go so now for me it's running on localhost uh 5176. so let's go ahead and just close that off here and let's go there so I'm going to go to localhost 5176. there we go and here's our final app okay so the first thing that I want to do very quickly is just build out the HTML and CSS structure so let's go back to our application and we can get rid of this terminal as well and over here let's go to our page and the first thing I want to do is just let's add the Styles so I'm going to say style I'm going to go ahead and paste in a bunch of styles and you can get this from my GitHub that's I will link in the description below and now what we can do is we can build out our HTML so the first thing I want to do is I want to create a div with a container and then a div with the class of header and then I'm going to have an H1 that says image gallery so image gallery and then we're gonna have a input container an input container and then within this input container we're going to have our actual input so I'm going to say inputs like so all right so let's go ahead and clear that just take a look at how that looks all right it looks pretty decent to me uh now what we're going to do is we're going to go ahead and add a button and actually we also give this a class of input as well and there we go now it looks better so let's add a button here so I'm going to say button and this button is going to have a class of uh Button as well so button button like so now we can see there's a button there now of course this button needs to have some text so let's go ahead and just close that off and I'm going to say search like so and there we go so now we have a button that has the search icon in there all right and now what we need to do is right below our header what we need to do is we need to display our photos so I'm going to go here I'm going to say dot photos and then over here is where we're going to display our image so we're going to have an image we're going to have a source an ALT we're also going to have a class that is going to be of Type image and that should do it for our uh uh HTML and CSS so that was a relatively quick little thing that we did there let's just go ahead and just kind of copy a bunch of images you can see that we have these these four image layouts of course we're going to have to fill them out with the source so that is going to be the HTML and CSS we've already addressed all this stuff in the previous project so that's why I kind of went through this really quick I want to start addressing the more complicated stuff in this one so let's go ahead and start making this more functional in the next video in this section of the course we are going to learn all about fetching data now what do I mean by that well let's go back to our application right over here this complete application that we're trying to build and what I'm going to do is I'm going to search for gorilla and then I'm going to do a quick little search here and as you can see we get a bunch of different images of gorillas now these images are data points that we need to fetch from some database into our svelte application and that is exactly what I mean by fetching data we have a svelte application and then we have some sort of database that lives in the cloud and what we need to do is somehow some way we need to get the data from this database into our svelte application now in our case the data is just a bunch of image URLs but we have to somehow get it into our spell app now how are we going to do that are we going to directly connect and interact with the database and just get back everything that we need well no that's not typically how it happens typically we use a client server model so something like this so we have this middleman over here that the client can interact with now this can be this is called either a server or an API the term is usually interchangeable and what happens is that this exposes a bunch of different endpoints that allow us to fetch data from our database so what happens is that these felt client makes an HTTP request to our API or some other API that API then proceeds to fetch all of the necessary data based on that particular request and then it sends it right back sends it right back to the client over here and then the client can render everything that it needs so that is what we want to accomplish now that begs the question where are we going to get our API are we going to create our own API or are we going to use some external API well for this case we're going to be using some external API so the API that we're going to be working with is this one over here which is unsplash so what I want you to do is I want you to go to unsplash developers and I want you to log in and you can just log in with Facebook and what I want you to do is to create a new application so we're going to go over here we're going to say new application and we're going to say this API blah blah blah we're going to kind of accept all of this and we're going to accept all these terms and conditions we're going to call this image gallery and let's go ahead and create this and we're going to say this is an image Gallery all right so we're going to go ahead and create our application and once we create our application we can start using their API so I'm going to go over here to the API status you can see here that we have a few different or we have a number of different requests that we have and if I were to go back here and I were to go to the sorry let's go back to where I have my app so I'm going to go to this app right over here and I am going to go scroll all the way down here and as you can see here we have this access key and this secret key so we're going to need to utilize the access key in order to make requests to unsplash API so let's go to let's go to vs code and I'm going to go ahead and just show you the structure of the endpoints that we're going to hit so we're going to say the structure of the endpoint is going to be https colon slash slash and then API unsplash .com and then we're going to do slash search so this is the end point specifically slash photo and then we're going to ask for the page we're going to say one page these are query parameters that we're adding here and then we're going to specify exactly what we want to search for so I'm going to say query and then for now I'm going to say is equal to office maybe I want some pictures of the office of course this is going to change depending on our search and then we have to add our client ID so I'm going to say and I'm going to say client underscore ID and that is going to be equal to this so let's go ahead and paste that and now if I were to send this off inside of the browser let's go over here we should get a Json value of all of the different data so let's go ahead and just paste that in there and there seems to be a typo so let's go back here so it's https API and this should be dot on Splash rather than slash on Splash so let's go back here now let's make that request and there we go you can see we're getting a bunch of different data you can see here this is all of the different data and you can see here that we have all of our different images so now what we need to do is we need to go ahead and not do this in the browser but do this within our spelled application so let's tackle that in the next lecture now that we have learned exactly how to fetch data let's go ahead and do it from our spelled application now in order to do this what we're going to do is install a package to our app so a package is a bunch of code that somebody else wrote that we are going to utilize within our application for some specific feature now for us what we're going to do is install the axios package which is an extremely popular package that allows us to make HTTP requests to other endpoints and you can see here that it is extremely popular it gets around 43 million downloads every single every single week so it's probably something that you should be comfortable with so let's go ahead and install a package so I'm going to go and open up my terminal and then in the same directory as my package.json file so make sure you're in that same directory we're going to do an npm install and we're going to install axios so once we do that we should have axios right here as a dependency okay that's pretty much all it is that we need to do now what we can do is we can create a script file so I'm going to say script with a source I'm going to say or not without a source we're just going to say Lang is equal to TS and we're going to import that package in so we're going to say import axios from axios and now what we can do is we can utilize axios to fetch data so I'm going to go and create a function I'm going to call this function fetch data and then we can call it fetch images or fetch whatever and then this is going to be an asynchronous function so this is because axios is going to return a promise so as you can see here it's a promise based HTTP client for browsers and node.js so we need to mark it as async and then over here we're going to say const and then response so response and that's going to be equal to a weight axios and then what we need to do is we need to specify the URL right over here so this this endpoint that we want to hit but we also need to specify the HTTP verb so the HTTP verb is either going to be a get or a post or a patch and this is going to be specified at the API level however the typical convention is if you are fetching data you use get if you are creating data you use post if you are updating data you use either put or patch and then if you're deleting data you use delete of course so that's again specified in the API level you would have to read their documentation to figure out what they did but in this case it is a get request and now what we want to do is we want to just grab this URL right over here and just paste that in there so let's go ahead and format this a little bit better and that's pretty much all it is that you need to do in order to fetch the data however what we need to do is well we need to kind of modify this in in a few ways so the first thing that we want to do is you can see here the query is hard-coded to always be office we need to heart we need to make this Dynamic so that you know whenever somebody goes to our application and then searches for a specific topic they can they can go ahead and search for it uh uh within this query right here so I'm going to create a new variable new piece of state I'm going to call this term and initially I'm going to make it an empty string and then over here I'm going to turn this to a template literal and then right about here where it says office I'm going to do a quick little check I'm going to say okay well if you have something for term then use that or if you don't have anything for term then I accept office so by default when somebody loads the application we give them a bunch of office pictures but however if they have something for term we can go ahead and update that so that's the that's what we're gonna do and the next thing that we also need to do is we need to store the response in some sort of State as well so let's go right over here and we're going to say let photos we're going to say photos is going to be equal to an array and then right about here we're going to say photos we're going to say that that is going to be equal to response dot I'm going to say dot data dot results so that's that's how the object comes back to us so response.data.results we're going to store them right over here so let's go ahead and console.log both term and photos just to see how this is working so I'm going to go over here and I'm going to go to inspect and I'm going to go to console and if you were to take a look at this you can see that there are still in their default State and of course if I were to type something like elephant and we're to click search nothing is happening now why is that well that's because we are not using this function at all we need to go ahead and utilize this function now there's two cases where we want to utilize this function the first case is of course when somebody goes ahead and searches and then clicks uh the search button we want to call this function so we can update our photos but the other case is as soon as our application loads we also want to call this function to fetch all of the office data which is going to be our default so those two cases are things that we're going to have to discuss how to do within our application and we're going to start with fetching the data on load now before we do that typescript is complaining a little bit if you were to hover over it you can see here that we haven't specified a type for our array which means that it doesn't really understand what's going to be inside of this array you know is it going to be a number is it going to be string is it going to be an object so what we need to do is we need to tell it that this is going to be an object an array of objects and each object is going to have a an ID that is going to be a string and how do I know this well I've fetched the data from uh the uh the data or from from the endpoint and you can see here that we have an ID that's going to be a string now there's a bunch of other properties but let's only we only care about some of the properties that we're going to utilize so let's just use types for that and we're going to say an ALT description alt description that is also going to be a string and then lastly the URLs that's going to be an object so as you can see here zoom in we have an old description again we have more but we're not going to utilize them so let's not specify the types for them there's uh URLs that is going to be an object and we're just going to use the regular one so we're going to say regular and that's going to be string all right and then this of course is specifying that it's going to be an object not to specify it's going to be an array of those objects we just say an array like that now a typescript is not complaining anyways that pretty much does it now let's go ahead and try to fetch our data on Mount in order to fetch data as soon as our application has loaded we need to learn about life cycle hooks in svelte now there are four life cycle hooks that we are going to discuss although we're only going to use one and that is on Mount on before update on after update as well as on Destroy now these are hooks that are going to run pieces of code that we specified when a certain action occurs within our application so for example the on Mount Hook is going to run code that we have specified as soon as our application mounts the before update Hook is going to run before something updates within our application after update is going to run code that we have specified for example here a console.log after something has updated within our application and as you can imagine on Destroy is when some sort of component within our application is leaving our UI we can run this hook now what we're going to do is we're going to utilize the on Mount hook as soon as our application is loaded we want to run some piece of code so it's going to look something like this we're just going to say on the mounts we're going to go ahead and import it from svelte and we're going to say on amount and then within it we're going to specify a callback function and then within that callback function is all of the code that we want to run now specifically what do we want to do well what we want to do is fetch the data so let's go ahead and accomplish this so I'm going to go over here I am going to import and then I'm going to import it from svelte I'm going to import on Mount and let's go right over here and I'm going to say on Mount so on Mount I am going to just console.log hello there so hello there just to see if it works so I'm going to go ahead and format this and let's go back to our application now which is right here you can see we get a Hello there so you can see there we have this hello now if I use another hook for example on Destroy and I did a goodbye for example We're not gonna see it because we're not really destroying anything within our application there's no component which we'll talk about a little bit later that is being removed so you can see here we don't have the goodbye there now of course we can use other hooks like the uh after update as well as before update over here let's just go ahead and render those as well so we're going to say before update and we're going to say console.log I ran before the uh I'm gonna say it before the app updated and then over here we're going to have an after update Iran after the app updated now as soon as our application is rendered our uh well our app is being changed so this is running before it has uh our application was rendered and then this of course ran after and then you can see here that it looks let's look at the order here so this ran the very first thing and then the after update ran and then the on mount ran so now what we can do is we can utilize these hooks for our advantage for example as soon as our application has mounted I'm going to go ahead and just call the fetch data function so now if I were to refresh the application our application should be in a state where we have fetched that data and we have updated it right over here within our photos so let's go ahead and iterate over the photos because we know exactly how this data is going to look and we're just going to render those photos instead of having this kind of hard-coded structure right here now we have learned exactly how to iterate over an array of things so we say each like so so we're going to say each and then over here we're going to close this off with each like that then in here we're just going to have one HTML element we're going to say photos as photo and then we're also going to specify the index just so we can get it and then lastly over here let's specify some sort of unique key which is going to be the photo ID all right so that's looking pretty good so over here what we can do now is is utilize let's go here we're gonna not hard code The Source anymore so we're going to say photos dot we'll say urls.regular and then here we shall say photo dot alt description and that should do it let me oops let's zoom out of here a little bit what am I doing I just want to format the document there we go and that should do it so now if I were to go right here you can see we get a bunch of different pictures of the office so now our application is uh fetching data as soon as we are mounting our app and of course what it's doing is it's it's grabbing the data from from this API and then it's setting it to our variable right over here which was an empty array but now it's an array filled with images and we can go ahead and render all of these different images so that about does it for the mounting but now of course what we need to do is we need to have the search so let's go ahead and accomplish that in the next video in this video we're going to refetch our data whenever somebody puts in a specific term and then clicks the search button so again if I want elephants I'm going to search for elephants right over here and I'm going to go ahead and click search and then what this should do of course is update our images to show elephants so how are we going to do that well you might be thinking oh this is extremely simple and in in reality it is but you're probably going to miss one step you're probably going to go ahead and add a Handler to this to this sub button so I'm going to say on click and then you can say that this is going to call a function called handle search or something like that you can call whatever it is that you want then over here what we're going to do is we're just going to say handle search and that's going to be an arrow function we're going to mark this as async and you might be thinking oh very very easy stuff all I have to do is fetch this data like so for fetch data and then of course let's just remove the async because we're not really using the awaits now this is the data and if I were to go ahead and click on elephant of course elephant and click on search it's going to make an HTTP request to our unsplash endpoint and to kind of prove this to you can see here we're making that HTTP request however nothing is updating now why is that well that's the reason why is because the query is always office so what we need to do is whenever we change our input so whenever we type something we also need to change that term because right now as you can see it's always an empty string and thus we're hard coding office all the time so how do we do this well what we're going to do is we are going to bind this input element to this piece of state and we're going to do it in a way where it's two-way binded which means that anytime that I update the state well the input is going to update its value and anytime that we update the the the value within the input is also going to update the state itself and I'll show you what I mean by this so let's go ahead and accomplish it first and then I think you're going to understand exactly what 2A binding is so over here we are going to say Val bind and then we're going to say we want to bind the value of this input to be equal to the term so I'm going to say find the value of this input to the term pieces of state and what I'm also going to do is I'm going to go ahead and just render the term right above it so now if I were to change this to Elephant let me zoom in here you can see that the piece of state is also being updated so you can see me changing the value of this input is changing the value of the state all right so that's that's that's the binding one way so this is this is again me changing the value of the input is changing the value of this state so so we're binding the state to the value of the input so that's that's the one of the two-way binding but also if I were to change the state then it's going to change the value of the input so and and to prove that to you I'm going to go ahead and just create a button and I'm going to say I'm going to call this clear for example and I'll have an on click Handler on click and I'm going to call it callback function that very simply is just going to say term is equal to an empty string all right so let's go ahead and just say elephant so now again our our state is elephant now I'm going to go ahead and clear this and this has nothing to do with the input I'm not I'm not touching the input what all all together I'm just clearing this piece of state and you can see now because I've changed the state that also changed it within the value so that right there is two-way binding a very very important concept to understand all right so that's exactly what we did all we have to do to a bind is just a bind value term and now what we can do is right over here within our search I can just say something like you know if the term is nothing let's just not make an HTTP request because right now that's exactly what we're doing so we're just going to return early because we've already fetched all the data that we need within the on Mount hook now if however we are if however somebody did put a term then what we want to do is we want to fetch the data and I'm going to mark this as async and then over here we're going to go ahead and await this because I want to run some code right under it now what's the code that I want to run well once we have fetched our data and everybody's happy I want to clear the term so that we can you know go and easily create another search and let me just show you what I mean by that so now what we can do is we can search for elephant and let me go ahead and remove this as well so let's search for elephant and it should work this time because it should make that HTTP request which is going to update our data there we go so you can see we are getting our data and now what we can do here is if I want to search for something else you can see I would have to clear my input manually and then search for lion probably not the best experience I think it should just clear right away and that's the powers of two-way binding so now what we can say is is a term is equal to nothing where are we here term is equal to nothing and now if I were to search for Tiger right now you can see I can search for something else very very easily I can search for horse now without having to remove tiger and there we go so that pretty much should do it for our application the last little thing that I would like to do is you know make this uh the fetching of the data a little bit nicer because right now you can see here if I were to search for a jaguar and part of my spelling here if I were to search for Jaguar and there's no jag wires there I spelled it incorrectly this is for for our tree you can see he's kind of abrupt and it just kind of Pops in there whereas in the final version you can see that we get this really cool effect for every single search so we're going to learn exactly how we can do this with felt and it's it's pretty pretty easy and remarkable it's remarkably easy so let's go ahead and do that in this section what we are going to do is learn how we can animate within svelte and it is remarkably easy to do the first thing that we need to do is first identify which elements we want to animate and of course it's going to be the image elements because those are the only things that are moving around so that is what we want to do so now that we got that out of the way we then have to specify how we want them to animate so what we can do here is at the very top we can import a few things so I'm going to say import from svelte slash transition and we can import a bunch of different ways that we can animate our elements so for example there's fade there's fly there's uh just let's go ahead and just kind of take a look at all the other ones that they have uh uh I believe there's there's more out there but I'm not 100 sure exactly what there is but what we're going to utilize is fade and fly so fly is going to animate an uh an element you know it's kind of gonna fly into our uh our viewport so maybe from like top to bottom and then fade is just going to kind of fade things out so let's go ahead and accomplish this I'm going to go to the image tag and then over here we have to tell it how we wanted to animate in and how we wanted to animate out so we're going to say in and we're going to utilize fly and then we're going to specify some an object that's going to configure everything so I'm going to say y initially is going to be 200 and then what we wanted to do is we wanted to kind of fly in back to the original Y which is 0 in 2 seconds or 2 000 milliseconds so that should do it for our animation so if I were to go right over here and refresh the page you can see it's at 200 and now it's kind of going to 2 within or is that 200 it's going to zero within two seconds and if I were to search for something else like elephant again and then search you can see we get that animation however we're not really getting that nice staggered effect so what we can do here is we can add a delay and then we can say that hey we want to delay each element and in order to kind of get that staggered effect we can just say the index of the element times 200 and that's going to give us kind of that staggered effect which is much much neater so now if I were to search for a garden for example we still get that really nice staggered effect all right so that's fading in of course we can also are animating in of course we can also animate out so we can say out and we can say fade for this and for this we don't really have to specify any uh we could if we want to but I'm not going to so now we can kind of fade out as well and you might not be able to see this uh but you know it faded out a little bit you can see that it faded out and then the other one's animated in so that about wraps it up for this project and then well in the next few videos we're going to tackle our final project but hopefully at this point you're learning quite a bit about svelte all right everybody we have completed two projects in this video we're gonna move on to the final boss the hardest but most sophisticated project that we are going to build in this course and of course that is the quiz application so you can see here within our quiz application right now we have two cards that are going to give us quizzes for either chemistry or biology but of course we can add more if we want to now a user can go ahead and click on any one of these cards so we're going to go and click on chemistry for example and it's going to redirect us to a completely different page so the URL has changed now what we can do here is we can answer these questions and of course you can see here we have this Dynamic State depending on how we are answering these questions I'm going to go ahead and answer this one and when I click submit it tells us which ones are right which ones are wrong so all of the other answers were wrong this one over here was correct and you can see right over here we get this green uh light dot that tells us this is the progress of our application you can then move on this time let's get it wrong I'm going to get get this one here you can see here that I got the wrong option and then you can see this was the correct one now what we can do is once we finish our quiz this was only a two question quiz to move on to next and it's going to tell us our score and we can of course go back to the quiz page so this is what we are going to build it's going to have a lot of different things but also a lot of the same things that we have learned now of course in order to build this we're going to need to create a well you guessed it a svelte app and that's exactly what I did I did this off screen because we've already done this a million times and I kind of don't want to waste your time so go ahead and create a new svelte app and now if you forget what I highly suggest you do is just do a quick Google search so just say svelte and then create app so we're going to go over here and we're going to go right over here and if you look at the command there you go that's the command to create this felt app and I created it with typescript so I highly suggest that you do the exact same so there we go so we have created our svelte application and just for this lecture what I would like to do is start building the UI at least for this page right here so let's go ahead and do that right now so of course what we're going to do is we're going to go into our routes directory we're going to move into our page.svelt file and of course I'm running my felt application so I did an npm install as well as an npm run Dev and we're going to overall change the UI structure of our application now I don't want to add these Styles the way that we have been adding the Styles thus far instead what I would like to do is add some sort of styling library that is really going to accelerate The Styling and the speed of our coding for us now which Library do I want to select well I want to select Tailwind so Tailwind is a really good Library let's go ahead and just do a quick little Google search here I'm going to say Tailwind and in case you're unfamiliar with Tailwind I'm gonna just say CSS it's a really really good library for implementing basically all the styles that we are already familiar with let's just zoom in here but we can add them within our classes so for example over here we have you know this this background color we can just add this background color right here if you want this to be rounded we would just add the rounded class if you want some padding we would say padding eight and it just just makes things a lot simpler and faster so what I would like to do is integrate Tailwind within our application so let's go ahead and do a Google Search and see how that's done so I'm going to say Tailwind CSS is felt so we're going to go over here and it says the first thing that we need to do of course is let me just zoom in here and the first thing that we need to do is we need to of course create our svelte application we've already done that so we don't have to worry about that and now what we need to do is we need to install some dependencies so we need to install Tailwind CSS post CSS as well as Auto prefixer so let's go ahead and do that so I'm going to go ahead and just copy this and let's go right here let's see do a quick Copy there we go I got a new keyboard so I'm kind of testing out all of the different commands here they're kind of confusing me to be quite honest so let's go over here and we're going to install these dependencies onto this quiz application so we're going to do a Ctrl V like so and let's install them now while we're at it we're going to move back so once we have installed it what we're going to do is initialize a Tailwind application within our svelte app so I'm going to go right about here we're going to copy that as well we're going to initialize this felt applique or a Tailwind application within our spelled app and as soon as we do that we should get some sort of Tailwind dot config.json file or dot JS file and there we go so we have that right here so that's a post CSS config we also have the Tailwind config all right so this is looking pretty good now what we need to do is move on right over here so it's saying that within hours felt config we have to copy this command so let's go ahead and do that or import this or is our svelt config we have our Veet processor and we have to add that right over here preprocessor and as you can see that's already done for us so we do not have to worry about that and then what we need to do is we need to configure all of the paths so we want to utilize Tailwind in within the created tailwind.config.c.js so I'm going to go ahead and just copy this and I am going to go to right here and we're honestly let's just go ahead and just copy the whole content and we're going to paste that in there all right so that's looking pretty good thus far and now what we need to do is we need to add the Tailwind directives to the app.css so this is going to add all of the different styles that we want so now let's go to our app.css file so our app.css file where does that live so what we can do here is we can do a very quick control p and search for our app.css file it does not seem like we have one so we have to create that app.css file instead so let's go over here we're going to say app.css we're gonna paste everything in there and then what we're going to do is we're going to import that into our layouts.velt file so we'll talk about this a little bit later exactly what this file is but now let's just go ahead and create it and import this in so let's go right over here I'm going to copy this file name for now we're going to go into our routes directory and we're going to create this now if you don't understand what this is don't worry we'll we'll talk about it a little bit later but now what we're going to do is we're going to copy this in and paste that in there like so and we're gonna also paste this in there all right so it's looking pretty good it's quite happy now and of course now what we want to do is we want to start our application so let's go ahead and just restart our app you've already started it let's just restart it now so I'm going to go here do a Ctrl C and we're going to do a mpm run Dev again and now we should have Tailwind configured so let's go to our application and you can see our application the Styles is a little bit different and now what we can do is we can go to our page.svelt file and we can say for example class we can say a BG blue of let's say 400 and also let's make it rounded and also let's add you know a little bit of a shadow and if I were to go ahead and save that and now go to my application you can see now we get the Styles so yes indeed we do have Tailwind configured now with Tailwind configured what we can go ahead and do is start building our application a lot faster so let's go ahead and do that in the next video let us now move on and build the home page of our application so let's go to our code here and what we're going to do is we're going to go into the page dot svelte file and over here we're going to add a bunch of different HTML in order to get this overall structure right here okay so let's go ahead and do that so the first thing that we are going to do is we're going to get rid of this and we're just going to wrap everything inside of a div we're going to give it a class and we're going to give this a class of quizzes container quizzes container like so now this is just for kind of documentation purposes this class is not really going to do anything now over here these other classes are going to do stuff so I'm going to give it a width of 700 pixels like so and we're also going to give it a m of Auto we're going to give it a flex we're going to give it a justify Center and we're also going to give it an H screen so it can be as tall as your screen and then as well as that we're also going to do an items Center so let's go ahead and give that a very quick save and there we go now we have our div now our div we should have a closing tag for our div so let's go ahead and close that off here and now within this div we're going to add even more content so of course we have to add our cards so let's go and create this card component so I'm going to go over here I'm going to say div and we're going to give this a class of let's say or just for documentation purposes so we know exactly what this is we're going to say quiz card and then we're going to give it a shadow you're going to give it a width of 250 pixels and then what we're going to do is we're going to also give it a rounded an overflow hidden hidden like so and lastly we're going to say cursor pointer because we want to point to this so that we can go ahead and redirect us to a different page and also let's give it a margin of two so that's going to be the quiz card now within this of course we're going to have an image now this image for now what we'll do is we'll just give it a class of h44 but of course we have to deal with the the source so let's go ahead and do that let's give it a closing tag as well and then lastly let's add another div we're going to give this a uh we're gonna give it Flex items Center and then we're also going to give it a justify of content and apologies for my typing this is a new keyboard and I'm not really used to it and actually this is going to be justified between and then over here we're going to say padding y of three as well as padding X of 2. all right and then the last bit of HTML we're going to have an H1 here we're going to make this a font bold and then over here we're going to add the quiz name let's just right now for now hard code chemistry and then what we're going to do is we're going to have a P tag and then over here we're going to say how many questions we have for now we'll hard code questions all right so let's go ahead and give that a quick little save and let's go and grab just some sort of chemistry picture so we can have that as well so I'm going to say chemistry here and I'm going to just grab this image I'm going to right click on this image right here and we are going to copy this image address and I am going to just paste it in there hopefully it's not too long and you know what it wasn't that long so let's go ahead and give that a quick little save now let's just see how overall the structure of our application looks like that looks pretty good to me this is pretty incredible all right so this is fine but what I would like to do is I would like to get some somewhat real data now the data that we are going to be utilizing within our application is going to come from uh just the just from our uh GitHub directory so I'm going to go to GitHub right over here and if you go to my GitHub repository which again I will link in the description below uh if you were to go to the quiz application and let me zoom in here a little bit for you guys if you were to go to the source and then to the data.json I just have a bunch of quiz data that we can add here so I'm going to go ahead and just grab this data and I'm going to just paste that into our data.json that's going to be within the source directory so I'm going to say data dot Json I'm going to go ahead and just paste that in there so let's go and paste that in there let's do a quick little save that looks pretty good to me so what we're going to do is we're going to iterate over this uh this data and then once we iterate over this data we're going to render each card dynamically and we also need to grab another thing and that's going to be the image.ts file and the reason why I added this is because the image URLs were so incredibly long and I did not want to add them within our Json file because they're just so so long so I'm going to go ahead and just copy that and we're going to create an image.ts file as well in here so I'm going to say image.ts we're going to paste these images in and as you can see incredibly long like they're really really long so that's why I just wanted to kind of separate them into their their own little file all right so we got that in there so now what we would like to do is go to our page.svelt file and within the scripts we're just going to import that data in so I'm going to go over here I'm going to say script and then over here and we can also specify the language even though we're not really using this we can specify that this is typescript and then over here what I want to do is I want to import and I would like to say I want to import the quizzes I'm going to say from and then I'm going to say data dot Json now what I would like to do is iterate over these quizzes and then for each quiz I would like to render this card so let's go ahead and do that so I'm going to grab this and of course in order to do this we're gonna have to wrap this within each remember we've done this before so we're going to say each and we're going to say quizzes I'm going to say as quiz we're going to provide it with the quiz dot ID so this is going to be the key for the iteration remember if you were to go to our data.json you can see here that we have a unique ID that I created now let's go back over here so where does this end this ends here we're going to have to close off that each so remember that's very important to do all right so now if I were to go ahead and save this and go back to the app let's go here you can see that we get these kind of two two static uh uh um well cards now of course we don't want that we want this to be a little bit more Dynamic so let's go ahead and well make it Dynamic So within this card right over here what we're going to do is we're just going to grab this data and just kind of plop it in there okay so first thing that we're going to do is we are going to let's just see the number of questions that we have let's make that Dynamic so if we were to look at our data you can see here that we have an object we have the question and then we have it's an array so over here you can see that we have one question that's an object and then another question that's an object so what we can do is to to determine the number of questions we can say something like quiz and let's uh let's redo this we're going to say quiz dot I'm going to say questions and then we're going to say dot length so let's go ahead and save that in there and if I were to go back I can already see an error and that's the errors that I kind of overrode this closing tag so let's go ahead and save that in there now and now you can see here we have two questions one question so you can see that the the dynamic nature of this is working now so let's go over here and over here we're going to say quiz dot name I'll save that now we have chemistry and biology the last thing that we need to change is the image now in order to change the image we need to import that uh that uh the the object from the image.ts file so I'm going to say import everything as images I'm going to say I want that from the image dot TS file like so so remember here we have an image dot TS file and I'm gonna go ahead and give that a quick little save now it's complaining to me saying that this is declared but never read blah blah blah now why is it still complaining because the image.ts file does not live in the root directory it lives right here all right let's go ahead and save that and now what we can do is we can kind of copy what we got here and instead of hard coding the source so I'm going to go ahead and just get rid of that we're going to use curly braces and I'm going to say images and then what all we have to do is just provide the image URL so over here we're going to say quiz Dot and if you were to go to our Json file you can see here that this is the image URL and what it's going to do is it's going to correspond to this right over here which is going to be this URL all right so we're going to say quiz dot image image URL let's give that a very quick save now let's see how that looks so it's complaining to me it's saying that this has an implicit of any that's just a typescript error you don't have to worry about that for now but there we go so now you can see that we have these two different cards so this is looking pretty good however there is one thing that I would like to change from a structure perspective and that has to do with this or these HTML elements right over here let's go ahead and talk about that in the next lecture in this video what we're going to do is learn about a very very important concept known as components so in order to understand components let's look at the code that we have written thus far so you can see that within our page.sveld file we have this div and what this what this div is doing it says kind of encapsulating all of our different cards and as you can see here this is the HTML for our cards and all of the logic as well as the Imports that we need are living inside of the page dot svelte file personally I don't like this what I would like to do is I would kind of like to encapsulate all of the card logic into its own file and then somehow import it into the page.s felt because our application is going to grow and we're going to have multiple different components within our application and this is going to make our file really really big and this is a fundamental concept to front-end development we should separate our HTML structure into separate files and import them where we need to now in order to do that luckily it is very very easy all you have to do is go to our source directory and within our source directory we're going to create a component directory or components directory and then in here we're going to create a component and I'm going to call this card and typically it's a capital case I'm going to say card dot svelte and it doesn't have that fancy one we're just going to say card dot is felt like so so now what we're going to do is we're just going to grab all of this HTML and then I'm going to go ahead and copy it let's go ahead and just paste it in there let's do a quick little save now it's complaining a little bit because it doesn't know what this image stuff is so just for now I'm going to go ahead and just remove it all together and I'm going to go ahead and just kind of call this chemistry we're going to go ahead back to our hard-coded state and then over here we're going to say one for example so that right there is all it is that we need to do in order to separate our HTML file now how in the world am I going to go ahead and kind of render this within our page dot svelt well this is what we are going to do we're going to go right over here and we're going to import that card components so I'm going to say import card and I'm going to say from and then I'm going to say well we're going to move into the components Direct directory let's go over here components and then slash card dot svelte and what we can do now is treat this as regular HTML so over here instead of rendering all of this you can see now what we can do is we can just kind of get rid of all that and just paste in the card as well like so I'm going to paste in that card oops let's go here I'm trying to have the closing braces but it's not really working out here with this new keyboard my goodness what is going on come on what is the closing braces that does not look like the closing brace all right let's just try one more time we're gonna say card Dash there we go all right so let's go ahead and give that a quick little save here and now if I were to go back to the application you can see now we are rendering that same exact structure now of course there is no image and that's because we are uh we haven't hard we we haven't we hard-coded the image as an empty string but you can see the structure is still there so that is really really great we can keep this file as lean as possible and kind of have all of our different logic Within These component files now the issue is what we need to do is we need to kind of pass data into each component because we need to pass the image data we need to pass the the name data as well as the number of questions data so how are we going to do that well this is how we're going to do that we're going to go right over here and you can see we are still doing this kind of iteration so now what we're going to do is within this HTML or this component I'm going to go right over here and I'm going to do curly braces and then quiz and what this is going to do is pass all of that quiz data into our card so I'm going to go and give that a quick little save Here and Now within our card let's go right over here we can accept that data and we're going to accept that data within the script tag so we're going to say script we're going to say Lang of TS and then over here what we're going to do is in order to accept that data we're going to say export let quiz so we're going to export in the quiz that we have passed in now this is complaining to us because we're using typescript and what we should do is we should Define the type of this quiz so let's go ahead and quickly do that now to define the type of a quiz and that what a type means is the overall data structure that we have here which is going to be an object that contains an ID that's a number a name that's a string a URL that's a string question that is going to be an array of objects that has an ID a question and an option so let's go ahead and just quickly Define that we're going to Define that with an interface so I'm going to say interface quiz I'm going to say it has an ID that is e number and we have a name that is a string and we have an image URL and this instead of a hard coding it as a string what we're going to do is we're going to go over here and we're going to get this we're going to cut this out and we're going to paste that back in to our svelt or into the card because this is where really we're going to use it we're going to say that this is going to be a type of the image object so we're going to say uh so we're going to grab the keys of this image object we're going to say type of image images like so all right so that does that and now what we are going to do and let's just do a quick little save here now this is complaining to us because uh well of course I believe we have to move back a few directories so let's go here uh let's let's see where we can find this image directory so it's uh no it's right here so I guess we're fine so now what we can do is we can just forget about it complaining now listen to find the other thing so of course we have the questions now this is going to be an array of objects and then each object is going to have a number it's going to have a text that is a string and it's also going to have an array of options and each option is also going to be an object that is going to have an ID that is a number and then we're going to say a text that is a string and lastly uh label that is a string as well all right let's go ahead and give that a quick little save and now once I pass this data in you can see it's not complaining anymore so overall the structure is going to look like this so now let's go ahead and actually Define that so I'm going to say quiz like so go ahead and click that give that a save it is indeed complaining and I believe it's complaining because we missed one thing so we have the question the ID and of course we need to provide it with the answer so over here within the question we're going to say answer and this is going to be a string so now it shouldn't complain anymore and over here it says type string is not assignable to type chemistry or biology uh that should not be the case because we did key of uh let's see here so this import value is never used oh yeah so we need to import it as a type so let's just say let's do a quick fix here and we're going to convert to import type like so now this is still complaining it's saying it's not assignable to chemistry or biology you know what we're going to do we're just going to grab this and we're gonna paste that in there just so we can avoid this typescript annoyance all right so let's give that a quick save here and I'm going to close this off it's still yelling at us I think it's fine if it yells at us we'll kind of move on there we go you know what that's fine let's move on here so now what we did here is we passed our data so we passed our data to this card component and then within this card component let's remove this type we don't need this anymore because we're going to utilize it later within this card component we're accepting that quiz and then over here now what we can do is we can pretty much do everything we've done before so I can say images of quiz dot image URL all right and then over here I can do quiz.name so quiz dot name and then over here we can do also quiz DOT questions dot length so now let's give that a quick little save if we were to go to our application you can see now we're getting the exact same effect however now all of our logic is kind of interfaced into this one file instead of having it in this file and this is a very fundamental Concept in front-end development in this video what I would like to do is teach you all about Pages now in our spelled application we're going to have multiple different pages and what I mean by that is currently right now we are on the home page and what I would like to do is make these cards clickable so that when I click on them they redirect me to the quiz page so let's go to the final version here just so we can exactly see what I mean right now I'm in the final version yes they do look identical now I'm going to go ahead and just copy the URL let me paste it in here so this right here is the home page URL so we just have our domain which is localhost 5174 and then we have nothing appended to it just this kind of Slash this is the home page this is what we see as soon as we go to our application however when I click on a particular card let's say chemistry you can see here I get redirected to this page and this page looks something like this this is how the URL looks so it's slash quiz and then specifically slash quiz slash that quizzes ID so in this case that quiz's ID is one so over here you can see one so this right here is a brand new page with a brand new route now there's also another page in this application that I haven't really talked about and that is the about page so I'm just going to go here I'm going to go to slash about and as you can see here let's let's zoom in a little bit let's zoom in you can see all it does is just say about but it's just a brand new page that has a brand new URL so this is what we want to add into our application so let's go back over here we want to add well we have right now this route page this this root page rather but what we want to eventually have is a root page and about page just so we can have it about information and then we also want a slash quiz slash Dynamic ID page this part right here is dynamic and we're going to do this with svelte relatively easily so let's begin with the about page because this is static and not Dynamic a lot less complicated so let's go ahead and try to accomplish that all right so let's go to our svelte application I'm going to go ahead and remove this and we are going to go right over here and we're gonna go to our routes directory now you can see within the routes directory we have a plus page dot svelte so whenever we have a plus sign this is a very special file that uh svelt is going to recognize so it's going to say oh plus and then it's going to say oh page that means this is a page that we need to route and this is the same thing for the layouts over here plus layout and then it's going to understand oh this is a layout file which we'll talk about a little bit later so now what we want to do is we want to create another page dot svelte file plus page.spel file but we want to specifically have it so that the route is slash about and how do we do that well this plus page dot spelled file we know for a fact is our root application so the root home page so just slash like so well as you can see it's also the root file within the route directory so if I wanted to add another plus page dot spelled with a slash about route what I would do is I would create inside of the routes directory and about directory so we're going to go over here we're going to create an abouts directory and then within this about directory we're going to create another plus page dot svelte so plus page dots felt so now this is inside of the about directory and thus the route is going to be slash about Slash and then that's it then it's going to render this page.svelt file and it's pretty much that simple there's not no if or buts about it so over here we can just render whatever it is that we want let's go ahead and just render that about and we're not going to put any content in here we're just going to have something like this and now what we can do is we can go to our app and if we were to go to slash about you can see right there we have that about page how cool is that that's pretty much all it is to it so now let's go and build the other thing which is a little bit more complicated and what I mean by the other thing is is this page right over here slash quiz slash Dynamic ID now it's a little bit more complicated but it's also not that complicated so over here we have two routes so we have the route of slash quiz and then slash you know dynamic ID so Dynamic ID whatever that is so the first thing we're going to need to do is create a directory called quiz and now because we have another route that we want within this quiz directory we're going to have to create another directory now because that this is dynamic what we can do here is we can specify the directory with square brackets and then inside of it we can just call it whatever it is that we want I'm going to call it ID so over here now what we have is a route that is going to be slash quiz slash anything so it could be slash one slash four slash six slash whatever it could be anything it is that we want now to go ahead and solidify this we're going to go and create a Dot Page dot svelte file so we're going to say Dot Page dots felt and we're going to go right over here we're gonna grab this let's go ahead and save that undo this we're going to go ahead and save that save this and let's go back to this page and we're just going to create a div we're going to say this is the quiz page quiz page so let's go ahead and give this a quick test so now if I were to go it I'm going to zoom in a little bit just so you guys can see what's going on here if I were to go to slash quiz and then slash literally anything else so like let's just say 444 you can see here that I get redirected to this page and that is how we create pages in svelte we just add folders that match our route path our page path within the routes directory then whenever we want a page we would add a plus page doc svelte file in this video we are going to talk about that layouts file that I kept hinting we will talk about later so in order to understand exactly what the layout file is doing let's address a current problem in our application so I'm going to go back to the root directory and you can see within the root directory everything is centered in the middle of the page however when I go to another route like for example the about route you can see that the content right over here is to the top left and same thing is true of the quiz page you can see everything is to the top left but what I would like to have is everything to be centered every single page to have its content centered in the middle of the page so this is what I could do I can go I can go to the svelte file this this svelte dot this felt file right over here that is housing the root application and I can grab this div that is encapsulating the content and I can go over here and kind of just paste it in there and I can do the exact same thing right here so I can add a div let's add an H1 and then let's also add and let's add some real content in here so quiz page and then over here we can of course close it off so let me go ahead and save that and then save this as well and let's get rid of this and now if I were to go to the application you can see that everything is nice and centered within the app so we got the about we got the quiz page and then lastly we have this right over here now this is all fine and dandy and this is a valid approach however right now we are duplicating our code throughout multiple different pages and what if our designer was like you know what we can't have this be a white background it needs to be some sort of blue background because maybe that leads to a better user experience so for example now what we would have to do is go over here to the class and add something like BG and we'll say blue a 400 I'm going to go ahead and save that so let's go and save that and then I'm going to go to this application maybe this is what they want however now now when I go to the about page you can see here that this is not blue so what I would have to do is copy this style and then go over here to this page as well as this page right here or not the layouts the others felt file where is that I believe it's this one or nope it's not that one either where are you uh let's just close everything off it's not in here so let's go to the about you'd have to go to this felt file as well and then add that class so we would save here as well as here and now we have that style that is going to be consistent across all of our different pages but you can see that this is a hassle and of course as the application grows this is going to be unmaintainable because now let's say the designer was like oh yeah this is actually pretty terrible we have to remove it now we have to go ahead and just remove it from every single file manually this isn't very good and it's not very dry remember the core principle of programming is keeping our code as simple and dry as possible we do not want to repeat ourselves so this is what we're going to do instead we're going to utilize the layout dot svelte file so you can see here that this looks like a very very normal file except we have this thing right here which is called slot and this is a component that is going to render the page of the route that we are in so right now we are in the quiz route so what this slot is ultimately going to be is a component that is going to render all of this HTML now if I were to change this to slash about the slot is going to detect that and instead of rendering the svelte file or this felt file this felt file is going to render this spelled file as you can see here and to prove this to you we can actually comment this out and if I were to comment this out we shouldn't really render anything so I'm going to go ahead and just save this and now no matter where we go we're not rendering a thing so you can see that this is what the slot is doing all right so I'm going to go ahead and uncomment that and we can take advantage of this so what we can do is we can wrap our slot with that div that we have just created so I can go over here and I can just wrap that slot right over here and if I were to do that we get the exact same effect that we had over here so what we can do is remove this div now so I'm going to go ahead and just kind of save it and remove it and you can see that we still have everything centered even though we don't have our div in our page.sveld file but we do have it in the slot so now what we're rendering is this div and then the slot which is going to contain this content and let's go back to the about so I'm going to say slash about the about is the exact same thing so now what we can do here is remove this div save that and if I were to save this again or refresh you can see that that's all fine and dandy and then over here we can do the exact same thing and there we go now if I were to go to the slash quiz page slash quiz 404 you can see that we get that exact same effect and now if we need to make any sort of changes to our Center container like change this color what we can do is we can do a very quick go to our layouts do BG blue 400 give that a quick little save and now when I go back to my application you can see it's blue here I can go over here it's blue and over here it's blue so I have to make just one code change and it affects every single page and that right there is the power of the layout dot spelled file it defines the HTML that is needed as well as the Styles as well as some script tags that we want to run as soon as we render our application within our whole app and every single page right now the only way to move across pages is to change the url directly so I would have to change the url to slash quiz slash quiz ID to get to this page now this is of course not the best user experience because the user probably has no idea what URLs and what routes belong to our page instead what we want our user to do is to click on some UI and that is going to redirect us to our page specifically for our case I want them to click on either one of these cards and it's going to redirect them to the slash quiz slash that quizzes ID page so let's go ahead and accomplish this we're going to go to our card component because that's eventually what we want to utilize in order for us to navigate so we're going to go to this card component and what I'm going to do is I'm going to wrap this whole thing in a button so I'm going to say button just to make it nice and clickable now luckily what uh what Tailwind does is it doesn't really apply a lot of styling to the button so you can see here it looks exactly the same but now we have this button right over here now what we can do to this button and actually instead of having a div within a button I'm going to go ahead and just kind of copy this class right over here cut it out put it onto the button we're going to get rid of this div just so we don't have that unnecessary extra div so I'm going to go ahead and do that and now within this button I'm going to add a click Handler so I'm going to have an on click we've seen this before so we're going to say on click and what we're going to do is we're going to call a very special function called go to and we're going to import that from the dollar sign app let me go ahead and just explain what I mean here so we're going to get that from Dollar Sign app slash navigation so these are just a bunch of different methods that we can go ahead and utilize for our application so if you want something for our store which we'll talk about a little bit later we would say dollar sign app slash store but what we want is we want navigation and we specifically want this go to function so now what we can do here is we can go ahead and call that and we can say what we want you to do is we want you to go to and then we can specify the route so we can say slash quiz and right now I'm just going to go ahead and hard code the ID to 44. so if I were to save this and click on chemistry now you can see we go to this page slash quiz slash 44. now this is all fine and dandy but what I would like to do of course is I would like to make this Dynamic now luckily we have the quiz information right over here because remember we have the ID so let's just use a template literal instead of utilizing a regular string and we're just going to say here we want a dollar sign let's say dollar sign curly braces now we're going to say quiz dot ID like so let's go ahead and give that a quick little save and now if I were to click on biology you can see we get redirected to quiz slash two and if I were to go back now we get redirected to quiz slash one and this is how we Implement navigation within our svelt app what I would like to do at this point is whenever we click on a specific card instead of showing this generic quiz page H1 what I would like to do is show information about that particular quiz so if I click on the chemistry quiz it shows me information about that chemistry quiz and then over here if I click on biology it shows me information about that biology quiz now in order to figure out how to do this we need to compare and contrast the two URLs so whenever I go to the chemistry page so I'm going to say chemistry this is how the URL looks so it looks something like this whenever I go to the biology page well this is how the URL looks something like so so the URL structure is overall the same but of course this portion is dynamic and this portion is going to correspond to the ID of that particular quiz so what we need to do is we need to extract this ID so whatever page we're on we have to extract this over on the chemistry page it's going to be one if we're on the biology page it's going to be two and then what we're going to need to do is Traverse this data.json file so let's go over here Traverse this data.json file and then return the object that has the ID equal to the ID that we have extracted so this is what we need to do all right so let's go ahead and accomplish that now that we know what we need to do let's do it so in order to do this we're going to go to the routes and then what we're going to do is we're going to go to the quiz ID page right over here and this is where we need to extract that ID now to do that we need to create another file so this file is going to be called the page.ts file so let's go over here and specifically it's going to be called plus page.ts so that we can associate that to our plus space dots felt and then this is just going to be a function so we're going to export a function and we're going to call this load so this is a very important function it has to be called load and what it's going to do is it's going to load data as soon as we run this app this page as soon as we render this page it's going to call this function and then load whatever data that we return from this function into this file so we're going to call it load and then over here we're going to go ahead and invoke that and then what we're going to do is we're going to add just a few little types over here so I'm going to say let's just add a comment here actually you know what we won't do that for now so what we're going to do here is we're going to first try to find that particular quiz now in order to do that of course we need to grab this URL so remember we need to grab the URL we need to grab this Dynamic portion of it specifically so over here luckily the load function accepts the params so these These are going to be the query parameters and over here the query parameters is going to have this particular type so it's going to be params and then over here it's going to be ID because remember we called this ID and this is going to be a string all right so now what we can do here is we can say something like const quiz and we're going to have to import the quizzes in so we're going to say import and we'll say quizzes from and I'll say dot slot dot dot we're going to go move back a directory go to data.json I'm going to say cons quiz is equal to quizzes dot find so I'm going to go ahead and find that I'm going to say quiz and then we're just going to say quiz dot ID is equal to parse int because this is a string even though it's a number it always comes back to us as a string within it if it's a query parameter and then we're going to say here params dots and then we're going to say ID so that's going to give us the quiz now what we can do is we can return that quiz so let's go ahead and do that so I'm going to return that quiz let's save here and now what we can do is we can extract that quiz from our uh file so from this particular file so let's go ahead and do that so I'm gonna create a script tag and all it is that we need to do in order to grab that quiz information is just say export let data we're just going to give this a type of any for now so let's go ahead and get rid of that and we're going to give that a type of any and we have to annotate this as a you know what we'll just well yeah we'll allocate it as a typescript file so we'll say Lang is equal to DS let's go ahead and quickly save that and now we have access to our data so if I were to console.log over here so I'm going to do a console.log of our data I am going to let's go here we're going to go to the quiz now I'm on slash quiz slash two so we should get data for the uh for the biology so you can see we get this object and there we go so you can see we get this biology and now over here if I were to go to one you can see that we get uh chemistry all right so that's pretty much all it is that we need to do so let's just do a quick little recap here so whenever this page is rendered what it's going to do is it's going to call this function within our plus page.ts file which is going to be the load function now the load function is going to grab the parameters that we have defined here and then it's going to find that particular quiz and then return it and then what we can do is we can grab whatever that load function is returning within our svelte file from here so this is just a nice neat way of doing things now one thing before we go and move on to the next lecture is what if the user somehow some way decided to go to slash quiz slash I don't know some random ID that doesn't really exist within our application in that case we get something like so we get this kind of empty object now of course this is not what I want instead what I would like to do is to kind of navigate them and throw some sort of 404 not found page and we can do that so let's go over here over here what we're going to do is we're going to do a quick check so we're going to say if the quiz does not exist so we're going to say if the quiz does not exist this is what we're going to do we're going to go ahead and throw a an error now what we can do here is we can import something so we're going to go ahead and import and specifically we're going to import something called error from svelte itself and this is going to be from at svelte kit and now what we can do here is we can say throw and then error and then we can invoke this and specify the code which is going to be a 404 code so we'll say 404 and we'll also say something like quiz not found for the message so I'm going to go here go ahead and save that now it's yelling at me over here it's saying that this blah blah blah do you mean 12th adapter oh no I did the wrong thing I meant spelled kit that's what I meant apologies for that so now let's go ahead and refresh now we're getting this error we're getting a 404 not found error so let me just go ahead and kind of show it show what that looks like to you it says 404 quiz not found now if I were to go to a quiz that is found indeed of course we go back to this quiz page now what we can do now is Traverse this data and just render whatever it is that we need instead of this generic quiz page so over here I can say something like uh what can we say here I can just say something like data dot question or maybe data let's see what we have here so data.name some say data dot name go ahead and give that a quick little save now you can see we have chemistry if I were to change that to two we have biology if I were to change that to three we get a 404. all right so we are really getting close now all it is that we need to do is start building out the rest of our components so let's do that in the next few lectures what I would like to do in this section is to start rendering some HTML content based on the data information that we have fetched so let's begin with the question text because as soon as you go to the application let's just go to the final version here as soon as you click on this you get redirected to the very first question we have this question text and we also have these options so let's go ahead and build out this overall HTML structure let's begin with the easiest thing which is the question text itself all right so let's go over here what I'm going to do is instead of having all of our code here you can see that we have multiple different components we have this component we have this component this component and this component I think we should separate each one into its own file so I'm going to go inside of this directory and I'm going to create a components directory and then within this I'm going to create a question text Dot svelte file so let's go ahead and create that now over here what we are going to do is just Define the overall HTML structure of that question so I'm going to have a div in here and then within it we're going to have an H1 and for now let's just hard code what is an sn2 we're going to say reaction like so what is an sn2 reaction now over here I'm going to give it a class and we're going to give it a shadow we're going to give it a border with uh a four pixels of length we're also going to give it a padding of three we're gonna make it nice and rounded we're going to make the text nice and centered V full and then margin bottom of five now of course to go ahead and render this we're going to go back to that page.svelt file and let's create a div with a V4 or with a W full which is going to ensure that this is one hundred percent and then in here we can just go ahead and do a question text now notice notice something here what we can do is we can Auto Import things in so if I were to just click on this you can see here that it has imported the question text from this route that we have defined so let's go ahead and close that off give it a quick save and if I were to go back to my application you can see here that we have this text now of course I don't want this to be hard-coded because right now I'm in the biology question I'm getting this this chemistry question and then over here if I go back to chemistry I get this kind of hard-coded question as well so no matter where I go I get this question and I do not want this to be hard coded so what are we going to do well what we're going to do is we're going to define a new piece of state and this state is going to define the current question that we're on so as soon as we render our application in the final version the current question that we're on is the very first question so we can go ahead and just submit that and then when I click next you can see here now we're on a new question which is this question right over here so we need to keep track of that state so right over here what we're going to do is we're going to define a new variable or a new piece of state and let's do that under the let and I'm going to say I'll say current question index so current question index and initially we're going to set that oops again I just have to get used to this keyboard initially we're going to set that to zero all right so that is looking pretty good so now what we would like to do is we would like to get the question itself from the current question index and we can do that you might be thinking by doing something like this so I can say question is equal to current question index or sorry not current question index by doing data DOT questions and then of current question index like so so that is something that you think we can do so we let's go ahead and just just show this so what's happening here so I'm going to go ahead and just render the current question index and I'm also going to render let's say the question dot text or question dot I believe it's called name let's see what we got here so yeah it's called name I'm going to go ahead and save this and let's go back to our app so you can see here we have zero we also have undefined all right that's not a problem let's go ahead and console.log some things out just to see what we got here so I'm going to console.log the data and I'm going to go ahead and do a little bit of an inspect let's go here we're going to console.log we get the object and we have the data and we have the name okay so it's it's not a questions of current question index and it's called question not uh uh name so let's apologies for that so we're going to say questions and then of current index and then we're going to want the question dot question which is probably not the best naming convention sure probably called it text but it's called question.question all right so there we go so now we have zero and which compound has the highest boiling point okay so this is looking pretty good now what I'm going to do is I'm going to create a new button so let's create a button here a button and this button is uh my goodness gracious let's fix that let's go here I'm going to say click me and this button what it's going to do is just change the current question index from 0 to 1. so we're going to say on click and we're going to change the current question index so this is going to call a function that is going to change the current question index from 0 to 1 like so so let me go ahead and save this so what we're expecting is whenever I click this button right here this should become one and because this becomes one this should become well whatever the next question is in our date in our Json file so this is the very first question with index of zero and then this is the second question what is the ground electronic configuration of chlorine so this is what we're expecting I'm going to go ahead and click on it and I want you to try and see the behavior here and let me just zoom in just to really showcase this so I'm going to click and you can see that this does indeed change but this doesn't so what's happening is what we're doing is we're changing only the state of this now because we're changing the state of this what svelte does is it updates anything that uses this within our HTML so over here you can see that this gets updated but this doesn't and get updated because we're in reality we're not really changing this over here so what we can do to bypass this is we can say okay what I want to do is I want to assign this variable and then whatever that I use whatever piece of state that I use I want this question to also change if the the state that I'm using to compute this variable also changes as well now to Define that what we can do is instead of using a let we can use a dollar sign so dollar sign colon and what this is going to do is okay well I'm using this piece of State it's going to figure out that you're using this piece of state and anytime that this piece of State changes we're going to go ahead and recompute this so I'm going to go ahead and save that and now if I were to click you can see now that this gets completely re-computed all right so that's just a very important concept that we need to understand okay so that is the current question index now we have the current question that we are on well with the current question that we're on we can of course go ahead and we'll pass that information as prompts to our question text component so let's go ahead and do that so I'm going to say question and I'm going to say well the text is equal to now before we did something like this and that's because we passed in the whole object now if you want to pass in something very specific uh from this question object we can just say text is equal to and I'm going to say here question dot question so that's what we want to pass in now just because we are passing that in we of course have to accept it within our our question text file so of course let's go right over here and we're going to define the script we're going to say Lang of TS and then over here we're going to say export let we're going to grab the text and this should be a string and then over here let's go ahead and Define that text go ahead and give that a quick save let's go here and there we go so now you can see if I were to refresh the app you can see here which compound has the highest boiling point if I click again now it gets changed to this so this is looking pretty pretty good let's remove the console.log and also let's remove the question because we don't need that anymore so this is a very important and fundamental concept now let's go ahead and start rendering some of the options so what I'm going to do is we're going to create another file here so I'm going to say question we're going to call this question option we're going to say dot svelte and then over here this is what we're going to do we're going to define a button and this button is going to have an apologies for this this button is going to have a b g gray of 200. it's going to be nice and rounded we're going to say width of we're going to give it a very specific width of 49 percent and then over here let's give it a text of Center we're going to say padding of two margin bottom of four and then padding of padding y of five all right so that should do it and then over here when padding y of five and then over here what we're going to do is we're going to render the option itself so of course we need to kind of pass in that information so let's go back to our uh our page.s felt file and then in here what we are going to do is we are going to grab this current question that we're on and iterate over all of its different options so let's go right below the text I'm going to create a div so I'm going to say div I'm going to give this a class of flex justify we're going to give it between and between like so we're going to give it a flex wrap and we're also going to give it a cursor of pointer all right and then over here we're going to iterate over the array of array of options which are objects of course and we're going to render this question option component all right let's go ahead and do that so we of course know how to do this already we're going to have that each and then over here we're going to close off that each and then we're going to say well four the current question that we're on so we're going to say question dot options and then what we're going to do we're going to say as option and then we're going to provide it with the option ID all right and then for each one we're going to go ahead and render the question option and again notice that it auto imported everything in so let's go ahead and give this a quick little save and we'll save this as well and for now I'm just going to just put some gibberish in here just so we can see some content on our screen and there we go so let me zoom out of here a little bit we are seeing the content which is terrific so of course what I would like to do is kind of just grab this whole option and just pass it in here all together now we could just pass the text but we're going to need all of the other information later so I'm going to go ahead and just say curly braces and then option and I'm going to go ahead and just save that in now of course it's yelling at me because we have to uh well Define it over here as well so if they Define that we want this option prop so I'm going to say script link and then within this script length we're going to Define that option all right so let's go right over here and we're going to say exports and we're going to say let option now the option has a very simple type it has a label that is a string and it also has a text that is also a string and now what we can do here is we can just kind of utilize that text we can say option doc text save that and over here it should stop yelling at us as it does and there we go so this is looking incredible I mean we're getting incredibly close to finishing our application so what I would like to do now of course is there's a few more things that we have to build we have to build a button as well as these right over here so let's go ahead and do that quickly let's begin with the button so the button let's go back to our component we're going to call this question button dot svelte so let's go ahead and open that up and then what we're going to do is we are going to create a button that is going to have some relatively basic Styles so let's first Define the button itself so we're going to say here div and we're going to give it a class of text Center and then over here we're going to give it a button we're going to give it a class of BG blue of 900 text of white we're going to give it a font bold we're going to give it a padding of four we're also going to make it nice and rounded and then PX of 16. and then what we're going to do is for now we're going to have just a a submit button now of course later on we're going to have to fix this because in our final application you can see we either have a submit button or a next button so we have to to fix that but we'll do that a little bit later alright so now we have our button and now what we can do here is we can go ahead go to our application and and let's render that button so let's render that button I would say let's render it right at the very bottom right about here so I'm going to say question button let's go ahead and save that let's go here and there we go so we got the we got the text we got the options and we also have the button itself this is looking really really good and very similar to what we had over here now we're missing these dots these like kind of progress bars we'll talk about those a little bit later because they're pretty complicated but for now this is pretty good and I am relatively satisfied with what we got here so let's go ahead and move on to the next lecture in this video what we are going to do is talk about global stores so what do we eventually want to do within our application well we want to select an answer and then what we want to do is we submit it and then we need to keep track of whether we got that answer correct or incorrect and as you can see here you can see that this is very important because this this kind of progress bar needs to know did this person get this question right or wrong because if they did it's going to show red and if it's not then it's going to show them green so right now as you can see if I were to go ahead and click on this question now it says green over here but it's not only this progress kind of circles that need to keep track of whether we have gotten the correct answer or not if I were to click next and end the quiz we are redirected to this page over here which is the slash results page and this is going to show you your well your overall score and this also would need to know whether you got the question right or incorrectly because as you can see it is Computing that you answered two questions and you got one of them wrong and one of them right so you got 50 percent so this is a really really important to grasp so what we have here is we have this quiz slash ID page where we're answering all of our different questions but the answers to those questions we need to grab them within two different pages so we can't really store our state our answer State just in this file in the page.s felt file that is over here because if we did that then we can't access it within our results so instead we need to store the answer state within some sort of global state that is accessible by any component and any page and luckily of course we can do that with svelte so let's go ahead and Define this state so we're going to go over here and we're going to go to the source directory and we're going to create a store dot TS file and then within this we're going to create a writable state so I'm going to say here call export const and I'm going to Define this as answers and initially we're not going to do it like this to Define it as a global State we need to import something from svelte store and that is going to be writable so we're going to say writable and over here we're gonna get that from the svelte svelte and then slash store like so and the reason why we need to Define this as writable is because this variable right now is living outside of these felt files so really it has no idea that it is going to be a piece of state that needs to re-render our HTML now to Define it as a piece of state within our app we would just say writable and then over here we would give it an initial value and the initial value is going to be an empty array and I say what we should do is Define the type of this as well so I'm going to say export interface and we're going to say answer and actually let's do answer like so and this is going to be you know it's going to have an ID that is a number and also an is correct value that is either going to be a Boolean or it's going to be null if it's not defined so let's go over here we're going to say that this is the type that we got so we're going to say type of answer and then it's going to be an array of these objects okay so this is looking pretty good we have defined our state here now what we can do is we can utilize this state within our spelled app so let's go back to this page so this page right over here this page dots felt file and what we're going to do is in order to utilize that piece of state within this store we're going to go ahead and import it in so I'm going to say import and I'm going to import answers and I'm also going to import the type of answer and we're going to get that from we're going to move a few directories from the store so we're going to say from the store dot TS file now we can't just go ahead and start utilizing this we need to subscribe to it so I'm going to go over here and I'm going to define a new variable I'm going to call this answers value and I'm going to give it the type of answer array and what we're going to do now is we're going to say answer and we want to subscribe to it so we're going to subscribe to it and what this is going to do is it's going to give us the value that is within that state and now what we can do is once we have subscribed to it we can just assign our answer value to that value and that's it so now we have access to our answers so if I were to of course scroll all the way down here we can just kind of pass that in and update it as we need all right so this is looking pretty good thus far so what I would like to do in the next video is to update this answer Global State whenever we get a question correctly so let's go ahead and accomplish that in the next section in this video what we are going to do is update that Global store that we have defined in the previous video so what I want to do is I want to go over here to the app I want to be able to of course click on whatever it is that I want and then when I click submit I want to update that Global store to tell us whether we got that question right or wrong so let's go ahead and do that so right over here the first thing that I would like to do but even before I do that is I kind of want to make these buttons clickable so when I go ahead and I click on a specific button it should be nice and yellow so let's go to our let's go right over here and what we're going to do is we're going to define a new piece of state and that is going to be the selected option so I'm going to say let we're going to say selected option and this is going to be either null which is nothing or it's going to be a string and that string is just going to be the label so just as a quick reminder let's go right over here to our data.json you can see that each option has an ID a label and a text and we just want to assign the option that we have selected to either A B C or D all right so let's go right over here so we have our selected option which is either null or a string but initially it is going to be null now what we're going to do here is we're going to pass that information to our options or question option as a prop so right over here we can say something like selected selected option like so now of course we have to accept that let me just go ahead and just kind of remove all this other stuff because the page is getting a little bit busy so we're going to go right over here I'm going to say selected option and we're going to accept that as a prop so let's go over here we're going to say export let and we are going to say selected option and I'm going to say null or string all right so now we have that piece of state passed into our question option all right so this is looking good but of course right now the value is null and we want to do something with it so what we're going to do is we're going to add a click Handler and very simply all this click Handler is going to do is just going to change the selected option so let's go over here and I'm going to say on click and what we're going to do is we're going to define a function that is going to do that for us so let's go right over here and let's define we'll call it an arrow function and I'm going to go right over here and we're just going to very simply say well we're going to say on click we're going to say selected option and that is going to be equal to and then that's going to be equal to the option dot label so option dot label let's go ahead and give that a quick little save and now let's go back to our Roosevelt file what I'm going to do is I'm going to go ahead and just render that option so I'm going to say the selected option is and then over here I'm going to say well this selected option is the well selected option let's go ahead and save that let's go to our app so you can see here the selected option is null if I were to click on this you can actually see that nothing is happening so here's the thing though even though we are passing this as a prop into our component we are defining it within this svelt file so we cannot change it in another component we can only change the state in the component or in these felt file that we have defined it in so this is what we're going to have to do instead we're going to have to create a function so we're going to say const I'm going to say handle Change option and this is going to take in the label that is going to be a string and then over here what we're going to do is we're going to say selected option go ahead and save that and that is going to be equal to the label like so so that's going to be equal to the label so now what we need to do is we need to pass this function to this uh or you need to pass this function to the options themselves so right right below over here we're gonna kind of grab that pass that in there and now because we pass this function in that function can go ahead and call it but it's going to call the function that's defined within the same spelled file that is also defining the state so the state will indeed change so now let's go back to our questions option right over here I'm going to say exports let's and we're going to need to define the type of this so one quick way to just grab the type is to just kind of hover over it and you can just kind of copy that function type and we can go ahead and do that and now instead what we're going to do is we're going to call this function with the label so let's go here pass that in and we're going to call that function with the option dot label like so save that and let's also save this and now if I were to go from here you can see now it is indeed changing okay so this is looking pretty good thus far now what I would like to do is to have some sort of user feedback that it is indeed changing rather than that uh kind of ugly text that we have here that I'm going to remove right now so of course what we're going to do is we're just going to change the background color so that uh you know it can either be yellow or gray or whatever so let's go over here let's kind of wrap this in curly braces because we're going to be using template literals here so I'm going to say template literal and then over here what we want to do is we want to change the background color so over here we're going to say you know what if the dollar sign we're going to say if the option so if the option dot label is equal to the selected option then what we want to do is we want to render BG yellow of 200 and then we can also have an else here that just renders nothing so let's go ahead and give that a quick little save and now if we're if you were to go back to our app there we go how cool is that all right awesome so now what do we want to do well now what we want to do is we want to click on this submit button and whenever we click on this submit button I want to change the overall Global state of our application to check whether we got the right or the wrong answer so I'm going to go right about here and let's go back to our svelte dot our page.s felt file again this is going to be this page dot spelled file within the quiz directory and then what we are going to do is I'm going to Define another function so I'm going to say here const and I'm going to call this function handle submit so handle submit and then over here what we're going to do is we are going to do answers because now what we want to do is we want to update the answer itself so we're going to say answers and then we're going to say dot update this time in order to update the global State now we also get the value so over here this is the value and now what we can do here is we can go ahead and update our answer so I'm going to say here const I'll say updated answer and the value is the current answer of what it used to be so over here current the current answer of what used to be and then what we're going to do is we're going to say well what we want to do is we want to update that answer at the current question index so we're going to say current question index and we want to specifically update the is correct value and we want to make that be either a Boolean value which is true or false and we're going to figure that out by saying the selected option is equal to the question that we are currently on so the question dot answer so again let's look at the the store here so the answer is on the question level and this is the this is just the label of the option so if the if we go back to our logic here we're going to say the updated answer state uh it's is correct value we're going to change it to the selected option which is the label and we're going to check if that's going to be equal to the question.answer so that's either going to be a Boolean value of true or false and then what we're going to do in order to actually update the state itself we're going to go ahead and just return this updated uh answer so we're going to say updated answer let me just call this updated answer State and I'm going to say State as well here and then State as well and this is here just the current state so current state just so we can make this as nice and clear as as possible all right so I hope this makes sense over here we have the current state of our application uh and then over here what we're doing is we are kind of we're defining this new function which is the updated answer State and we're first initially making it the current state and then we're updating a specific object property within the specific index to to either a true or a false value and then we're returning it which is ultimately going to update this so now what we can do is we can just kind of grab this handle submit and we can pass it to this function so I can just go ahead and pass that to our question button so let's go right over here and I'm just going to hover over this you can see that this is the type that we need to Define so what we're going to do now is we are going to go to the question button so let's go right over here to the question button uh let's where is that question about enter over here components we're going to have to of course accept that as a prop so let's go ahead and do that right now so I'm going to go right about here we're going to say scripts we're going to say Lang is equal to TS and then what we're going to do of course is we're going to well say export and we're going to define the function that we want to export so this is going to be let's and then this is going to be handle submit and then of course we're going to define the type which is going to be this type right over here okay so what we can do now is we can call this function this this submit function whenever we go ahead and uh well we click this button so I'm going to go over here and I'm going to say on click and we're going to say handle submit like so all right and one thing one optimization that we should probably do is if you haven't selected an option so if this is null we should probably just return early so let's just go ahead and do that and just like not do anything so I'm going to say if you haven't selected an option I'm going to return early however if you have selected an option then we're going to go ahead and kind of proceed to doing this state logic okay so this is looking pretty good thus far so what I would like to do is actually utilize that uh uh that states that we have within our options here so whenever I click on this I want to know if I got it right or incorrectly and then of course I want to show you know the green button the yellow button the whatever okay so let's go over here and what I'm going to do is I'm going to define a new piece of state and I'm going to call this piece of State show correct answer so I'm going to say here's let show correct answer and this show correct answer that is going to be initially false and as soon as I go ahead and I submit this I'm going to change show correct answer to true so I'm going to say show correct answer we're going to change that to true and we're going to grab this and we're going to pass it into our question option so I'm going to go here use curly brace I'm going to pass that in there let's go ahead and give that a quick save now what we're going to do is we're going to go to our question options and we're also going to accept that so I'm going to say export I'm going to say let's and I'm going to say show correct answer and this is going to be ebullient value So within this this is what we are going to do so we're going to go ahead and check if we need to show the correct answer because if that is the case then what we're going to do is we're going to kind of change a lot of the background color of this class so let's go ahead and accomplish that right now so I'm going to go and add another dollar sign curly brace within this template literal I'm going to say show correct answer and I'm going to say if we want to show the correct answer then we want to what we want to do is we want to kind of dynamically have a the colors show up so whatever you have selected so let's say you've selected this which is the wrong answer and what we want to do is we want to turn this to Red however if you selected this we want to turn this to green and then every thing else that you haven't selected we want to turn it to Yellow all right we want to show the correct answer then what we want to do is we want to ensure whether we want to show the red or the green or the yellow so we need to have some information about the answer itself so what we're going to do here is we're going to go back to this page and we are going to right over here we're going to pass in another prop and that's going to be the answer and we're just going to get that from the question dot answer like so and over here of course we're going to accept it and that is going to be let answer we're going to say that that is going to be equal to a string uh or sorry we're gonna have to Define it as a type and remember so if we go back to our data structure you can see here that we have the label and we also have the answer which is which is linked to whatever label so now what we can do is let's go ahead and just give this a quick save give this a quick save I think everything should be fine now now what we can do here is we can start adding some really cool conditionals in order to figure out exactly what we want to display so if we want to show the correct answer then this is what we're going to do we're going to say and so we're going to have an and sign here and then we're going to have some parentheses we're going to say if the answer that you gave us is equal to the option.label so we're going to say option dot label then what we want to do is we want to show well the BG green of 300 so BG green of 300 and then else we're going to show BG red of 300. so BG red of 3 100 like so all right so that should pretty much do it so let's go ahead and give that a quick little save here and let's see if that works so I'm gonna go over here I'm going to click submit and there we go so we're we have a bunch of red here and this is not really working out the way that I want it to let's just see here I'm going to select this we got this is the correct answer wait no this is not mine this is not the final version which also is kind of a little funky nonetheless let's go over here so we're going to select this and there we go so we get all of this is red and then we get this one to be green meaning that this one is indeed the correct answer and now what we want to do is we want to move on to the next question so what we need to do now is we need to change this button from submit to next so how are we going to do that but what we're going to do is if we're showing the correct answer then what we need to do is we need to kind of move on to the next question and show that next button so let's go right over here and to this question button we need to pass it the show correct answer prop so we're going to say show correct answer give that a quick little save and then we're going to go ahead and move into this question button and I'm going to do a export let show correct answer this shall be a Boolean and what we're going to do here is we're going to conditionally render either this button or a next button and we haven't really seen how to do this before so let's go ahead and show you this and this is really really simple and it's very similar to what we have done before with the each so we're going to wrap this with an if statement so an if block right here so we're going to say if we want to show the correct answer then what we want to do is we don't want to show this button we want to show another button so I'm going to go ahead and just copy this the button is going to be relatively similar and then over here what we can do is we can kind of wrap all of the things that we want to render with that if block so let's go ahead and close it so we're going to say if and then over here what we can do is we can have an else like so and then we can change this to next so what are we doing here this this may seem a little confusing but what we're doing here is we're conditionally rendering different HTML so all the HTML that we want to conditionally render we wrapped it in this if block then over here this is the condition that we want so if we want to show the correct answer then what we want to do is we want to well render this button else what we want to do is we want to render the submit let's go ahead and take a look and see if that works so I'm going to go over here and I'm going to do a quick little refresh I'm going to go ahead and select this there we go and now you can see we get the next button so all is left to do is just to handle the functionality for the next button which is pretty easy let's go back over here to our svelt Dot Page dots felt and we are going to create another function we're going to call this handle next so we're going to say handle next and what we're going to do is we're going to first show correct answer that's going to be false because we're moving on to the next question so we're going to set that to false and then what we are going to do is we're going to say the selected option that's going to be now null because we are not the next question we haven't selected an option and then what we're going to do is we're just going to very simply just say current question index and we're going to increment it by one so now let's go ahead and copy that let's paste that in there we're going to copy that paste that in there let's go to the question right over here and we can also export it so let's just say exports let's we can just say handle next and we're going to say void like so and then what we're going to do is we're going to call the handle next instead of the handle submit so save that and save that and now we should have the functionality of moving on to the next question so of course we can't click on it if we don't haven't selected anything if we have selected something there we go everything seems all fine and dandy we can now move on to the next question select another thing and then see if you got it right or wrong now here's the thing though when I select next remember we only have two questions so if I were to select next again you can see the app kind of just holds and breaks uh it seems like it's just holding but there's just a bunch of errors that are happening in the console so what we want to do instead is if we've reached the end of all of the questions instead of well moving and incrementing the index to something that doesn't exist what I would like to do is I would like to navigate to the results page so let's go ahead and do that and we're going to handle it right over here inside of the handle next so let's go here and I'm going to say if and I'm say if current question index is equal to the question dot uh or sorry we're going to go to we're going to grab the data DOT questions dot length now remember the index is it starts from zero so we have to minus one and if that's the case we're going to use that handy go to function that we learned about so go to and notice that we Auto imported it here and what are we going to do well we're going to go to the results page so we're going to go to slash results and then else if we haven't reached the end I am going to have an else Clause I'm going to go ahead and just paste that in there so now what we can do is let's give that a quick little test here and I'm going to select this all right next select this okay next and there we go so now we reach the results page of course we haven't defined the results page we have to do that a little bit later but as you can see it is nice and there and we get this 404. okay so that pretty much sums it up for this particular page now all we need to do is just have those little uh kind of those little widgets here or this little thing that show us the progress of each one of our different uh questions and how we answer them and this is really when we're going to start using that Global state so stay tuned for that in the next video in this video we're finally going to utilize that Global state in order to show the progress circles so let's go over here and let's just create that component so I'm going to go over here let's create a question and let's call this question uh let's call it progress circles I think I think that's a good name so question Progress Circle and then within this we're going to of course call it a svelte file now within this we're just going to have a bunch of different conditionals so just right off the bat what we're going to do is we're going to accept a prop whether that answer was correct or not or whether it was null which means it's unanswered so let's go over here we're going to say script and then Lang and I'm going to say TS and we're going to accept this prop which is going to be let is correct and that's either going to be a Boolean value or it's going to be null which means it's unanswered so if it's true that means it's correct if it's false that means it's incorrect and if it's null that means it's unanswered so we're going to have a bunch of different conditions here so we're going to have let's let's add our condition so we're going to say if is correct is equal to null which means it's unanswered then what we want to do and let's go ahead and fix that so what we want to do is we want to return a div um let's just use emit for this we're going to give it a b g of gray of 200 we'll also give it a width of four and let's see if this works it doesn't seem like it's cooperating Emmett is not really cooperating here let's just create this manually here div and then I'm going to say class and I think it's just being kind of hard because we don't have the closing tag all right so we're going to say here BG of uh Gray 200 and then we're going to give it a width of four and then here we're going to give it a height of 4 we're going to make it rounded but we're going to make it rounded full so it can be a nice Circle and we're also going to give it a margin of three now really we're only going to show the div itself so we can just kind of close it off like that all right so and of course we can remove these curly braces because we don't need them now we're going to have another case where uh well we're going to use an else if now so we're going to say else if we're going to say is correct is equal to true then what we want to do is we want to render this again so let's copy that paste that in there but this time what we want to do is we want to make this a nice and green rather than gray so Green Let's also add another else if and this time we're going to use red so let's go here and let's grab this else if case we can also make this an else case because that's really the only condition that is left so we're going to just say else let's go ahead and just save that to format it and there we go that's really all it is that we need to show for our um for our is correct progress circles so now all we need to do is iterate over our is correct state that we have stored globally and then very simply just go ahead and render this component now the thing that we need to do is we need to create the is correct uh array because right now it's an empty array so we need to go ahead and create it as soon as this page mounts so let's go over here and we're just going to go over let's just go to the very bottom I'm going to get the on Mount notice that it auto imported from svelte and we are going to go over here and I'm going to call a callback function and then within this callback function we're going to say answers and then we're going to say dot set because now what we're doing is we're kind of we're not updating we're setting something and then we're going to say data DOT questions we're going to iterate over every single question and for every single question what we're going to do is we are going to and we don't even need the question variable itself or should we do need it because we need the ID so for every single question what we are going to do is we're going to return the uh the is correct object that we have defined so remember this has an ID which is going to be the question dot ID now this is yelling at us because of the type so let's just go ahead and just give it an any type for now so over here we're going to do this and we're going to give it an is correct of null because as soon as we render our application is correct should be null because we haven't really answered anything all right so there we go so now what we can do is we can iterate over the answer value which is this one it's completely unused at this point so we can iterate over that and then we can render those progress circles so let's go right about let's go let's create another div so I'm going to create a div with a flex we're going to say justify Center and then here let's have an each block so I'm going to say each and I'm going to say answer value as answer and let's close off the each and then over here we're going to render the question uh Progress Circle and of course as the prop we're going to pass in the is correct prop that is going to be the answer dot is correct so now if we save that and we go back here you can see now we get those kind of circles right over here and if I were to click this you can see now this is red because it has turned to false because of course we updated it remember we updated it right here this is where we have performed that update and now we're going to move on to the next question we get it right and there we go so now this is green so we're utilizing This Global State the way that we should all right so that pretty much sums up almost all the new Concepts that we need to learn with svelte so now what we're going to do is we're just going to very very quickly create the results page and over here there's really nothing new that should be taught so you can honestly go ahead and do it on your own but nonetheless if you don't want to do that that's fine so of course when we go to this page you can see here we get this 404 and that's because our page is not defined so let's go over here and we need to go and Define that page so I'm going to say results and because we have defined results we need to have a page dot svelte so notice the plus sign again we have a page dots felt and then within here let's go ahead and pretty much render everything that we need let's render all of the HTML so I'm going to say text Center and we're going to add the an H3 with uh we'll say just an H3 I think is good and we'll say that this is going to be uh you know the percentage let's say 50 percent of course we're going to compute this a little bit later then we're going to have a P that is going to show you know how many questions you got right so we can say one out of two and over here we're going to have a button and I'm not really going to worry all too much about styling because this is just it'll take away from from sveld so this is what we want to show but of course we want to compute all of this so let's go over here to the script and we're going to say Lang equal to TS and over here let's go and compute the very first thing which is going to be the number of correct answers that we got now in order to do that what we're going to need to do is grab the answers from the store so let's go over here and we're just going to say import and I'm going to say answers as well as the type of answer we're going to get that from the store right here and of course we want to subscribe to this within our page so I'm going to say answers Dot and I'm going to say subscribe we're going to grab the value and we're going to of course assign that to a variable so let's say let's answers value and we're going to say that this is going to be of type answer array and over here what we can do is we can just say answers value is equal to the value itself so now that we have the answers value what we can do is we can actually compute the number of correct answers so I can say const number of correct answers and that's going to be equal to the answers value we're going to use the reduce function because we're going to reduce an array into a a number so over here we're going to grab the first parameter is going to be the sum and if you're unfamiliar with the reduce function completely fine I highly suggest that you kind of go ahead and read up on it and over here let's assign this to an empty array just so we don't get this error here so we're going to say answer and then or the sum as well as the answer here and then we're going to give it the initial value of 0. all right so what we're going to do here is we're going to check well if answer dot is correct so if we got the correct answer then what we're going to do is we're going to return the sum plus one else what we're going to do is we're going to return the sum without adding one and this should give us the number of correct answers so what we can do here is we can just grab this and over here we can just kind of utilize that instead so we can just say number of correct answers and invoke it like that okay so that is the number of correct answers but now we need to get the number of questions so the number of questions is pretty easy so all we really have to do is just say const number of questions so it const number of questions and we're going to say that this is going to be the answers value dot length because for each question we should have an answer itself and over here now what we can do let's grab that and we can just kind of paste that in there there we go just like that save that now this is complaining let's see why so type number has no signature call all right okay this is good this is why I love typescript because we didn't really return anything so actually no we did return so this should be type of number okay yeah not a problem not a problem so this isn't a function actually so we shouldn't be calling this this is just a value a number itself and if we were to go back here now you can see we have well zero out of zero let's just go through the flow again but let's just compute this really quickly now so we're going to go over here and we're going to say that we want the number of correct answers divided by the number of questions and then we're going to multiply this by 100. so let's just wrap this in parentheses like so we're going to multiply it by a hundred and then we're going to wrap this whole thing in parentheses and then we're just going to fix it to just zero decimal places we're going to say dot 2 fixed and we're going to say 0 and then we're going to add a percent sign at the very end now this button right over here is going to allow us to go back so let's just go over here we're just going to call this and what this is going to do very simply is well let's just call a function called go handle back and this is just going to clear our answers and it's going to make us go back to everything that we had before so let's just go over here we're going to say handle back and that's going to be an arrow function again apologies I'm still not really used to this keyboard so we're going to go over here we're going to say answers dot set we're going to set that to be an empty array and then what we're going to do is we're going to call that go to function we're going to go back to the root of our application all right so that should do it and that pretty much should sum up our application so let's just go back here I'm going to refresh the app let's go here I'm going to get this one right and then we're going to go over here we're going to get this one wrong and there we go so let me zoom in here we get our fifty percent one out of five and we can go back as well okay now one last thing that we could possibly do just for safeguarding is right now a user if they really wanted to they can go to the slash results and we get kind of this ugly uh look right over here of course we don't want this so what we can do is we can have an on Mount so as soon as this thing is mounted what we can do is we can do a little check so we can say okay if answer value dot length is zero which means that you know it's going to be a falsy value what we want to do is we want to go to the home page so you can't really go to this page unless you have an actual answer as you can see here it doesn't allow us to all right so now there we go let's go to the next one there we go go to the next one and there we go that sums up our application hopefully you guys learned quite a lot about svelte and I'll see you guys in the next one

Channel: Laith Academy

Views: 17,013

Keywords:

Id: o6VwbXSjM08

Length: 219min 15sec (13155 seconds)

Published: Mon Mar 27 2023