What's going on fellow web developers? My name is Tyler Pots, and in today's video we're
building this to do list application that uses local storage and it's built using few
JS. Now we've built this exact same to do app in vanilla jarffs, gives you can find the actual
video links down below if you want to watch that one. So let me just show you what we can do here.
So we can give in a name, we can then click office and if we refresh space, this will be saved
because it's stored in local storage. Another thing we do is add it to do. So let's just say
make a video. Now we can select if it's business or personal, let's just select business and here add
to do. And there you go you see make a video. We can then also say we can select personal and change
this from make a video to eat lunch with Steve. And there you go you see we've got a personal one here
if we refresh the page these will be consistent. We can also tick this check list and refresh page
and you'll see this is also consistent. We can also edit these make a YouTube video. And if we refresh
again it all saves as you update and change things which really awesome. We say again we've done
this let's just delete it now so we don't have it refresh and there you go you can see it's working
as expected. Everything works really nice and this is what we're going to be building in today's
video. So without further ado let's get in to the code. Okay guys that as you can see here we have an
empty folder inside official studio code. So the first one we're going to do is open up my terminal
and we're going to be using feet to actually create our boilerplate art you know our our start
starting code. So we're going to say MPM create feet at latest then we're going to give it a name
I'm just going to put dot to say create in the current directory. I'm going to do double hash and then
10 play and I'm going to sell it as few which go use just a few JS versions. Let's hit enter
and then it's got our protection. We're going to say to do app here enter and then we can run MPM
install to actually install the dependencies. Now while that's doing that let me just quickly
go into our tutorial into our source and paste a CSS file. Now this CSS you can find in the
GitHub link below or if you want to watch me actually code all the CSS. I want to explain it
you can head over to the JavaScript version of this tutorial and check out. I don't really
like to take the long time to rewrite the CSS so I decided that I would be easier just to paste it.
Let me just quickly show you this inside of here and I'll quickly I'll slowly scroll down
it. I should see this quite a bit of code. So for a hundred odd lines but it's very straightforward
and if you do want to get this code you can get in the GitHub link below or watch the U of the
JavaScript video which will also be linked down below if you want to learn it how to do it in two
different ways you can check it out down there and there you go that's everything in this file.
So with that out of the way let's go into well let's check if that's ran that hit has ran we can
now say mpm run death and just hit run and then if we just refresh over on the right here you'll see
we are given this just plain template here. So let's remove all that code let's go to app.fu
actually let's go to main first and let's just import our main.css file you could see that's now
changed away this looks and close up we're done with that we can delete this assets folder we can
delete the components folder we can delete everything in there in here and this whole style
tags we're using a css file and there you go we could just put it in there saying like hello world
obviously wrapped this in the tag and there you go that's working and you can see that's changing
as we go. So first what we're going to do is we're going to start off by just adding in some
um markups and we want to import some sorry not markups some JavaScript so we want to import
and we're going to say ref on mounted and computed also we want to get watch from few so these
are different things you can use with the composition API in few gs we've got our reference
which is basically how we're going to handle our state we've got on mounted which is going to be used
when we first render the page or render the component we're going to call this here and this
what we're going to use to get our local storage out of local storage we're going to use compute
it because we want to have things in order so we're going to have a to do so array but then we're
going to have a computed value which is going to be a a to b or a to c sorry compute it lists
rather than having or not a to be done by date sorry so it'll be ordered by the date it was
created and then what was half a watch file here which will basically watch for any changes in our
references and if they update our local storage so let's start off with creating a few references
so we're going to say to do's is equal to a empty array we're going to say to do's
const name sorry t equal to an empty string we're going to have an input which is going to be our
content and we're going to set that to an empty string so that's going to be the content we enter
inside of our actual input for field we're going to say input and we're going to give a category
and this is also just going to be we're going to set this to null because it's going to be null by default
we then want our to do's underscore asynchronous or ascending sorry asynchronous and what we're
going to do is say array to do's dot value dot saw and I'm going to sort a b and I'm going to say
break this into its own little function here and we're just going to return b dot created at minus
a dot created at and that should or cancel save that should give us back a asynchronous or a
synchronous ascending list by date so it should show the latest front and the oldest afterwards
or I might be wrong and I need to flip b and a round but we'll find out in a moment now we've
done the filtering we next want to let's start with our markups let's actually get some things
displaying on the page so inside of our template the first one we'll do so I'm going to create a
main tag with the class of app and an inside of here we're going to have a greeting a set where I've
got caps lock on it will not turn off a her we want a section called greeting and inside of here we're
going to have a h2 with the class of title which is actually going to be a let's go say what's
up comma and then we're going to put it in an input field let's go a bit of type text we're going
to give it a placeholder of name here and we're going to say phi model is going to be equal to name
which is same we set up here so you can see with nothing in there it's there but we can then enter
our own name and that should save however it's not going to save as we refresh you can see it's now
removed and it's no longer there which is kind of annoying we kind of want it to be persistent so
what we want to do is we want to call this watch function we're going to say name and then we're going
to say new value we don't need the old value for this and we're going to go in here and we can
even console log new value or we can say local storage dot set item name and we're going to set the
name equal to the new value so what this is going to do is we're going to be watching this name
if this changes we're going to get the new value it's changed to and we're going to set our local
storage to name but this still is a good work let's say here we go set my name to Tyler and we're
going to refresh nothing's going to happen if we open up our console it goes application you can see
name has been set to Tyler we also have to do so which we could delete so you can see my name has been
set to Tyler we could also change it to like Steve we need to save this side sorry um I don't
know what happened so Steve you can see that's now changed to Steve we could change it to Tyler
but when we refresh it will not be set because we're not actually pulling it from the local storage
so to do that we're going to call on mounted we're going to create an arrow function and in here
we're going to say name dot value is equal to local storage dot get item name then we're going to
say else an empty string hit save and there you go you can see that set and we delete this and we
refresh you can see we get nothing there and then we can enter our name and it is saved and there you
go that is all we need to do to actually save the name we can also do a similar thing with the
to do but I'll show you that once we get there let's get back down to the marker so underneath this
section we need a place to actually create a to do so we're going to create a create to do
section we're going to have a h or sorry a h free and this is going to say create a to do
and there you go you can see that there we can probably make that block capitals that looks a lot better
and then under this we're going to create a form which is going to have an
add submit bound bind to it so we can say add submit so when we submit this we're going to
prevent default and we're going to call add to do which we don't currently have so let's just
create a constant called add to do and so let's say let's just do an empty function for now we'll
deal with that a bit later so underneath our form let's create a h for that just says what's on
your to do list question mark so this is where we're going to add that we don't want an input
field again an just an input field if it will want to work an input field of type text
we're then going to give it a placeholder which goes said to e.g make a video
and then we want to set the fee model to be equal to input content so now we have this and as we enter
this we can actually see this changing in our input content sections any time we change this
our input is now balanced to a bounded to this so this is now set so let's just remove that
and let's just make this more readable so let's break these down onto these attributes down
onto separate lines here um give that one of those and there you go so that's now easier to read
now underneath this section we want enough a h for and this is going to say pick a catter gory
so we're going to have a category you can actually select so we have on to do so you could say make
a video and then in the categories you want to know if this is a business it's this for our business
or is this just a personal to do so to do that we're going to create a diff with the class of
options inside of this we're going to have two labels they're not going to have four
solemn they don't don't need x we're going to have our inputs inside of them and we'll call this
of type radio we don't well we need a name and this is going to be called catter gory we do not need
the ID although it probably would be useful to have one in these cases but for this one we do not
actually no let's just give it them the ID of catter gory once i think i style the ID and we're
having enough one of category two in a minute we're going to have the foul u to be biss niss oh biss niss
that's the one and then we're going to feed model this to be attached to our input catter gory
so what we're doing here is we're getting an input we set a radio and you can see it here
and we're going to set a catter gory one biss niss and input catter gory we don't need this
ID i don't feed catter g i'm going to remove it i'm i'm taking the risk if we need it i'll take
you know we'll find that we're going to then create a spank called bubble and as you can see it's
already there it's styled because this is all in the CSS and we're going to call this biss niss
because this is the biss niss bubble now underneath here we're going to create this
diff and call it business and there you go we've got our business selector now we can copy this
paste this underneath change the value to personal and change this also to personal and finally
this business at the bottom to personal hit save and you can see we have a array that's changing
and if we so you're not on a radio button that's changing if we say input catter gory underneath
set well there you go so we can business personal business personal business personal business
personal you can see they just change depending on what you click um which is great so let's just
remove that as well now underneath the options diff we're going to add in just a submit button here
so we're going to create an input of type submit which is just going to have the value of add to do
and there you go you can see we've got the button here so that's great we now have a form that can
add a to do but the problem is the add to do is empty so what we need to do is actually add in some
code here so the first thing we're going to do is we're going to check if our input content
content is dot value dot trim just to make sure it's put space in there is equal to an empty string
so if it's equal to an empty string that means no one's put any content in there if it's just
spaces like this it will also remove those spaces um what we're going to check if our input category
dot value is equal to null so basically if we have no nothing in there if
one of these is true so if this is empty or this isn't been selected we're just going to return
and we're not going to do anything so if we hit add to do now nothing happens we can put a log
part here saying add to do just so we have you see if we hit this in our console there is no add
to do but if we fill this in and say test and hit business and add to do you can see add to do shows
if we just add spaces and do this you can see add to do doesn't render again look if I clear that
it does not if I do a t here you can see it does so there you go you can see that's how that works
so the next thing we want to do is we want to say to do's dot value dot push and we're going to push
in some content which is going to be input dot content dot value we're going to get our category
value and then we need to create that this is actually going to be a new date dot get time
and the reason we just get time is because this returns our date in milliseconds which is what
we're going to use to compare inside of our to do's a sending so what to do is value push that
is good we also need one more thing in here it's going to be done and we're going to set this to
false because by default nothing is going to be set to done which is great now that should
actually save every time we add a to do however this is just going to add it to our to do's array
and not to our local storage so we need to take the same method we use down here and change it
up a bit so we're going to say watch to do's we're say if there's a new value what we're going to do
is basically do the same as before local storage dot set item to do's to to to to uh well yes Jason dot
stringify new foul but this isn't going to work by default so this is going to allow
us to once we first initially set our to do's this will work however this will not work
when we push because push is adding like inside video only way to call a watch is to completely
change the to do's value by doing so such as to do's dot value is equal to and whatever you want
now to combat that we can actually pass some options in here and one of the options is called
deep and we can set this to true so what deep means is it's going to look through everything it's
going to look through each individual array item element in here and then if any of it changes so
if anything changes inside of this deep pull catch it and then we'll call this function again
so let's just hit save and let's just try this out let's just say make a video let's say to business
and hit add to do and we get into date dot get time it's not a construction date oh I need to
pass in parentheses there because I'm calling a date let's refresh it let's try this one more time
let's say make a video question oh just not question one business add to do and then nothing happened
but if we go to application you can see we now have to do's in here let's say we add enough
for make a let's say get lunch and set this to personal and to do you can see we now have a second
item here we have our make a video and our get lunch now just because I want to test this inside
of underneath the bomb here let's just dump out our to do's a s c because I want to see which
which way to make a video is first I get lunch is last so I think that means this needs to be
be and this needs to be a oh also we're not gonna have anything there because our creator that
is not actually sorry our actual we're not pulling our to do so this now our to do's array is actually
so to fix that in on mounted we want to say to do's dot foul value is equal to json dot
pass because we stringify it originally and then we'll get all of them to do's otherwise we're going to
excuse me that should just be a plane array actually this can be removed and if that comes back
from nothing we would just pass in an array and there you go so you can see get lunch is now first
rather than last because we made to get lunch after so if we added a new one to this let's say just test
a business one and you can test becomes first which is exactly what we want because if we change
this to to do's you'll see test should swap to last or not maybe not and maybe I'm doing this
completely wrong in my head but hopefully that works so if we change these around it seems to work
if I make a video was our last one which is fine that means b minus a save is correct it must
mean that to do's it's just being pulled back in a correct order which is fine um this is actually
still working if it does end up being in the wrong order which is fine that's good okay so now we've
got that working we have one more section to do which is actually listing that to do's out so underneath
this section we want to create a new to do high-fant list section we want to create a H3 which is just
going to say to do list there you go and underneath this we want to say death dot list now in here
we want to have a death this is going to have a fee for a texture we'll go say for every to do
inside of to do's a ascending we're then going to pass through a class balance we're going to
pass these ten plate strings and we're say to do high-fant item so you can see there's free
items and I'll list and now we've got these blank boxes there and we're going to check if to do
dot done if that's so this passes and and method here and we're just going to pass back
done and that will basically set this to done if the to do is actually set to done so underneath here
we just want to say we want to add in a label with nothing can and inside the label we want to say
input of checkbox we do not need a name or a ID have we do need a fee model set to to do dot done
now underneath this we want a span with the class of bubble again we're going to bind it
and you see these ten plate literals here and we're going to pass in a dollar sign I'm going
to break this down I'm going to say to do dot catter gory oh god to do dot catter gory
if it's equal to business then we're going to pass through let me just close this as well
because it's going to error out so we're going to pass through business otherwise we're going
to pass through personal and I have just realized we don't even need to do any of this because this
will even be business or personal so all we need to do is pass through to do dot catter gory
so I I just went to write all that out to do a turnary operator when I didn't need to and
there you go you can see we have these checkboxes we can check and if I check them and refresh
you can see it's actually safe because now get lunch is set to true if we untick that
you'll see get lunch is now done false um so that's basically showing that's working
we then want a to do content diff let's scroll down and inside this to do content we want to pass
an input which is a type text with the model being our to do dot content safe and there you go
we now have this here and we can actually update it so test could be um test a test a add
I don't know test an add and add get you grab the right that Tyler there you go test an add
and there you go it sees actually updated inside of our local storage if we refresh it actually
is safe which is good we can close that now because I think you've got the point of local storage
and how it works now underneath this we just want actions and inside of here we just need one
button we originally had two buttons one with an edit button one with a delete however we can actually
just update this whenever we want by just typing in here now rather than having an edit button
that does it for you so once you change this button say delete this will also have the class of
and we're going to have a click event now this is going to say remove to do and we are going to
pass through the to do we want to remove now this is going to work because we do not have this function
so let's go up here and underneath and to do let's pay a constant called remove to do which
go be equal to a arrow function and we're going to say to do dot value is equal to to do
dot value dot filter we're going to get the current we're going to go we're going to loop through
every single to do in there and we'll check if it's not equal to to do then we're going to add
it back to rate if it is equal to to do then we're not going to add it back and this will return
false and then it will only have the ones we don't want oh I've just created a new tab that's
fine refresh and now let's just delete test and add right so let's just delete and there you
go you can see that works so that is everything actually working in this tutorial so now we can add a new
to do let's say complete or edit this video oh I'm going to have to do that so let's say that our
business add to do edit this video is now at top because it was a lot when we added and then we can
get our lunch make a video and let's just say we've done our lunch we've made the video we just
need to edit is now there you go let's say we just want to delete the lunch and there you go you can
see that's all working really great now one thing I have noticed is this is still filled out and we
kind of want to reset that so how we do that is we were say to do no input content dot value is equal to
an empty string and input dot category value is equal to null now every time we submit a new one let's
say make pizza because that's a fun thing to do and to do you can see that is reset and that's a lot
better so there you go you can see that is working and that is really nice so we can tick this off
we can tick this one off delete them and everything it's working so guys if you learn saying
no do not forget to leave a thumbs up smash that subscribe button if you want to see more and
don't forget to leave a comment if you have any questions if you're new around here you can always
jump in our discord description down or discord we're in the description down below
and ask any questions in our help channels if you get stuck or just join the community and have some fun
also we have membership on this channel so if you are a long-term business you've been watching
these videos for a while and you want to support me on my channel please consider looking at the
membership just click the join have a look at the perks you can get by looking at those and then
hopefully if that's something that you want you can actually click on it and support the channel
perks as well but for now guys thank you for watching this video and I will see you in the next one peace