Todo App + Drag&Drop in Vanilla JS

oh there you go um so hello everyone I will share my screen right now okay so today we'll be working on this project so it's a to-do list application you might recognize the Trello Kanban look to it the ID is to like with After Hours to build applications that you know and probably love so the first time we build a Shopify dashboard this time we are going to build hello look-alike and we'll see what we'll build next time so the focus today will be on JavaScript and manipulating the Dom will we are going to build a to-do list and we will be also looking at the drag and drop feature that you may have seen a few times already across the web so yeah let's sell look at the app quickly so a very simple app there is no responsive on the desktop you can add in add a task then the task get added to the backlog first and then you can move it to the to do on route you can add you can add other tasks and then if you want you can even like redistribute it so like you can like and then you can have fun and you can also delete tasks that's pretty pretty much it some simple apologies and you already have a good idea of our you could be doing that if not we are going to see in the next hour hour and a half hopefully will try to take a break about five minutes off we try to to make sure I take I take my time so you can actually follow along and coding along that's a goal here on that side I've shared a link to my github repo on just like whether you after-hours channel does everyone is okay with that have you been able to download it so I will I'll just let you get one one minute to make sure you are on it so the master is a solution so try not to look too much audits if you want to be a coder loan so clone it and do not Rockets if you want me if you want to fetch fetch it as I as I go along and go to the branch after-hours okay can I can I have a quick and thumbs up to see if you guys are ready to go okay awesome great before we start do we have questions if you do please admit yourself and yeah just just ask me a question after hours so this one yeah I just did and I think I have the full solution because I can okay yeah so you have to check out so if you just closed you will you will be on the solution you first asked to get check out to the after hours and then do live server well good night jack and I'll try and do it now because I I'll show you like what I what I did me I'll send this into the questions thread okay that's the command right to get check out be after hours no I was just get account without got to be okay like when you do be you are creating a new branch yeah like much in did okay I think I create a new branch and said you have to start again okay alright exactly Matt great anyone has more questions and while I'm talking um Giacomo will be also looking at the slack channel and will be able to answer a question as we go along so please ask away so yeah so we'll be building this so you have seen it you have it on on notify so let's just go on the actual repo you should have you should have something like that with just to do yeah well good okay so yeah so we'll have what so the first thing you need to do is make sure you have you have let's watch compiler running so you run the command I will send you the command right now and then once you are done with this you can run a live server I'm sorry what do I have to do file like a very sad and everything so after you are so now you have clone you have clone the repo yeah yeah and so now you have to do git checkout after hours so you have to move to the branch that is a complete new branch okay nice one thank you well you don't have to create a new one you have to go to the after-hours branch so look at in the image in slack channel nothing put the actual line so it's get check out our throwers I will pass it yeah I'll get rigid and afters and like matt said okay so let's let's start we'll look at the design first so I've created design in two figma so this well what you could have in a you know project sometime you have just a PNG of fully nuts sometimes you have a PSD sometimes you have a sketch file so sketch is on the on Mike right now we probably will probably go to the well soon but I mean Sigma and I just send you the link to the tool to figma so this is where I build the design and this is where we will be able to see different information about it so if you want to look at as a different pixel like the AIDS and other information about it like if you want to do cancer ad at the film family here you even have like some code snippets that you can take information from so this really needs software and it's free to start so it's a great tool yeah nothing to say but that's it's a great tool for UI building UI for web and mobile question about that so you usually all of the file you are in a viewer so you you won't be able to change anything but you will be able to see like all the different settings and parameters that to follow them okay all good okay so little rapidly look at the HTML so right now not much I have just created them either so we have a we have a burger burger menu ideas most-searched small so the title and a user picture if you look into interest if you look at the less loud so again just make sure never touch the style style that CSS only touch the style that less so the first thing you might find that I input it reset less power which come from here I'm sure you are familiar with that on on that point like everything on there is done so you won't have to do any CSS or less in that case that's not the goal for for two days ago for today is to like work on our JavaScript skills so yeah and I've got yes and so if you look on the at the GS I've removed everything I tried to add some comments but I will add to it directly like while talking and Enya so the first thing you can you can look at and when you look at it like we are missing we are missing this one and we also amazing is the input fuel so the first thing we need to do is to actually do that so at first like very quickly you can quickly see that you can you can like you have one element here one element here but like both are in the same in the same kind of element and like if you take the all same everything in there is also its own thing so what you can already see is that you have like one one main leaf for everything and then you have another one for for everything here and then in there you have to for this one and this one and then on in this one you also have other stuff so we won't go too much into it because that monster so I go for today but like just to show you like how you need to think about when you actually get a design from and how you have to try to components competent eyes if I can say that job so okay let's go into the HTML and so the first thing we are going to need is to add to add our main thing here so we'll try it with fur start with a section like by the way you guys do you want like you want me to copy past st. so do you need to go along any coding at code along for me okay okay let's let's do that okay so the first the first thing we need is a section and too much the CSS I'm going to give it an ID of poem oh yeah and can we increase the font size a bit good okay maybe less awesome like and so and so we we saw already so we have the board and then we have two two different kind of of section as well we have so on the Left we have the information and on the right we have the input so it's exactly what we are going to do so this is like this is L for lambda okay if you have any question about this let me know but I think it's pretty straightforward you can look you can try to do it on yourself on your own while I'm doing it by watching the design and trying to match match it on your HTML so yeah on the on the Left we have the info and so every square if you look at it we have a square here and then like you can be like defined so we have this thing as 1 and then we have to block one of the left on the right and then we have to new block and so like I watched email can match that's very easy and we we are going to do that so now we are on the right so the lambda and the after errors and the lambda [Music] I think to save you time wait type dot dot just add a new line he typed out the class name and hit enter it Chris DD what mark deal like this yeah exactly nice yep yeah saves you time yeah good one like I've seen our similar people using it and but her actually implements it in my in my my routine so what ho Somalia address said is that instead of like writing one by one like the div and everything you can actually do you can do a class directly and and so for example this time I need an ID okay yeah that doesn't work this time but at least have the div and so now I can just add different so now we on the right so actually if i refresh already and we look at our our same we already have the after I was on the left like it's not magic there is already all the all the CSS in there so that's supposed to work like that if I won't make any mistakes so for now all good I'm really I so it's only for class I think okay seriously I have only seen you work for class and then on deep just like you will deploy DS and okay okay I'm probably gonna look at some shortcuts after well then yeah you just use like a happy dot for this for IDs what I did okay so now we are in the inputs and the button and the pattern we give it a ID of add task and we pass in our a class to have it up so are using okay so just ideas [Music] okay let me just copy password I'll just [Music] just to make sure like doesn't nothing to change but just to make sure yeah okay I'm probably made a typo somewhere okay so are we all good here I will just just push just push it too so afterwards so I'm good okay so you should be able - - to get everything I've done from now okay let's let's go back so now we have this but as you can see like right now and nothing is working so the first thing we need to do is to make sure it's working so any any ideas on how like what what can I do to actually make something up here and how can we check it first that it works maybe like add an event listener to the button mm-hmm and like like the best way to show this way to just make sure that my event listener is working and then just like do a constant log or something yep exactly so for this specific thing I do a left because the consulate is directly on on the screen and so it's a bit boho but your consulate is like exactly the same and I'm actually going to put the console right here so we all see it okay so let's let's go to up that yes and work from there okay so we need to add an event listener to it so first we need to find where where is my my ak-12 button and so if we look at it we have button ID of add task and so we are going to take this and and create an event listener on gist so the first thing we need to do is make sure we actually able to access this so we are going to the document gets element by ID you can do query selector and do it do it exists not sure if there is any different on that one so then add task so now now that you have it you want to add an event listener to it and and like because it's a button we want to add a click event onto it and here because we want to do stuff read it we want to have a callback and with that we want to make sure it's working so we are going to do a left so should it work yeah seems like a maggot rule let's refresh and so we have added so like what we have done like we selected the zoo class as a ID where the button is and then we added a never an event listener on - it's a click event listener on to it with add event listener and we passed a function that actually it's actually just doing a leads yeah right now so we are going to remove it and just to make sure it working we are going to keep we are going to keep a customer okay so next thing we need is we need to actually have the information in the input because right now if I do this like I'll add it but I don't have the value in there and so I am not able I'm not able to actually get any information out of my input shock so the thing we need to do is to actually check what's in the input value and take it and and display it so before we display it and before we actually like may make it works we have to again make sure the actual document and like actually query for it is working so we are going to do a console log first so I'm just going to create a value to actually stop stalls the value and so like if we look at if we look at where is input we have ID called test value so we are going to select that as well so same process as before document get element by ID task for you and then here we don't want to add in it and even listener we just want some value out of it do you know does anyone know how like so HTML attribute for input to get the value that value yep exactly so and so now we are going to change him that value oh yeah good one thanks Maya but okay let's just make sure yeah so we got the value so first like you see I didn't try to add or create a magnificient to-do list on the first try you might want to do that to impress on the state or whatever but we are not like we're a developer learning so go step by step you so like I'm wrote like four lines and and and to actually consoler so that's super important like make just make sure you don't have problems so now this one is not useful anymore and I know I have it and this one like I want to do it some I want to do something which that's value so task value like what what what do we want to do with with that value so now we have the value of the input field like we have a click event listener on the booze and but it's a to-do list so what we want to do with with with value what's actually like if you look at my my ideas that also called add tasks and task value so what should we do now I shouldn't boxes yeah so so now we are going to make sure we can actually display it so the first thing we are going to do is make sure we can actually display it so before going into into the beautiful HTML and CSS that we are going to go around right after we are just going to add a small small place where we can actually get it so the video section we are going to have that's yeah do P P type with an ID for now just to just a place to try it out okay so now like we don't have too much and so like right now this doesn't do anything except of constant like it but we do out now the value of that value so now the thing we have to do is create a function to add it so is what we are going to do do you want me to show you I'm like you want try on your own for like two three minutes yeah that might be a good idea maybe true yeah okay okay so let's try to so now I'm going to do a git push just try to play the function where you actually get the value so everything on there and get the value on the screen in the ID to do let me push everything on on the repo okay Enya if you guys have any question please let me know I will just put this and and so here I'm just going to create the actual mmm actually like let's let's create a bit a year and I'm going to create a div here so you put them the value into entropy type got my wicked awesome by the way Tom doesn't let other people to be able to to work at it are you guys are all of you following along coding alone awesome [Music] you thank you going actually to adam-12 you bit make sure the last one okay Martin do you want to share your solution on on Zach okay sure sure don't like and I will I will copy pasted directly into the credit I just don't get it yep okay so you'd have to call the function within there okay I that the event is not to our tux that's what I did mm-hmm so you have something here at 1:00 yeah so maybe after line 9 okay you can add add tux and then you put the test value in there I'm sure what you mean can you repeat so on line 10 I called the function I just completed yep okay and then I assign the value of tax value as a variable look okay and so that's value okay so let's let's see if it works and what about you guys do some it will be working there's my thing I didn't restock my scraper that [Music] yeah so what are we done here so I'm going to challenge it a bit because like when afterwards we like there's other stuff coming but that's great so what Martin did is that he created a function called add pass it pass it element to make sure you can actually pass the test value that we actually got here then he created like you actually make sure he got he got he got so to do place to actually to put it and then it just did to the full-text content and add text to it so that's that's great here the only thing and that's what you you meet I think is that this is not a Pete I don't think so let's look at the card yeah is it so it's Pete I and so basically like for excuses and other like it's not very good however as a logic is here and so a great job I'm just going to to pass what I have actually it mean just put just redo it that's that's perfect Matson so I'm just to make sure I like what afterwards so here if you look at them if we if we look at how the actual to do is main like inside we have like so this is this one's like one thing and in into it like we have this text but we also have this so why do we need to do is create a container to its we need to create this and then we need to add to this container we need to add the actual value but also the trashcan so for our to ease the process it's it's across but that's ready so the first thing we are going to do is make sure we actually are able to show it to see it on the screen so now we have checked that it's it's working and we are good to go and now we can just make sure like everything is what okay so let's go back to the HTML I'm going to to pass it down because I don't think all do you want me to to cut it along I'm looking as a at the time servant forest like a solid copy yeah okay I don't think this one is that important okay okay let me just show you let's just check if it's working okay that's not working and that's not working so but already you can see something here okay let me actually get to get it to you okay so you should be able to get it so the first thing we see here is that when you actually take it it's already like draggable and like we haven't wrote anything in JavaScript like you can't you can put it anywhere oops but it's already draggable and this thing is actually interesting is this one so it's an attribute it's a html5 attribute that you can add to the actual task also if you want to be able to drag and you do draggable equal true and so what's that a volume let me just come right out of the line just to show you so now I've deleted and now you will see that I'm not able to to do it anymore okay so just just this small place is my line up and it balls me to already have some kind of drag-and-drop functionality or at least being or at least the feel of it so I think it's a good it's a good good start already but if you look at it like right now now like we have removing some and nothing works anymore but we are going to look at the task to make sure like we understand how it's built so then we can actually build it from the JavaScript okay so let's look at it so um so we have four so we have a columns sections so I guess you you got it and so there is four column width something called drop zone will see afterwards what that stands for it is there is no semantics it's just me that I call it drop zone and then we have a title backlog to do we will hit done and for this one I've added added like a simple to do just to show you like what we need to build so we need to so it's a list so to make sure it semantics we are not going to use a deal we are going to use a list and so inside inside inside of it so you are going to add another list and then each items have Li time and so incisor we are going to leave the class of tasks class class content with the contents and the trashcan so right now it's a fix but afterwards you can add the trashcan as well from the design any question from on it oh good okay let's let's go a bit quicker so the first thing we need to do so if we look at let me try to to the boss here yeah so we need we need to add so we need lists so this one this exists and then we need to add we need to add pan a list item and we so we need to create this and so we create a need to create the list we need to create to live and we need to pass the content for each to do and we need to pass this trash okay so let's just try let's get scan so the first thing we need to create is just make sure we actually have actually of the tasks that we that we like the old tasks and so we are going to do documents that create elements and with the first one we need is aligned so it's the first one we are going to create then like as you can see here we need to add a class of tasks in the class of fuel so we are going to do that so I exit the task we add we use class list and then when you add and then we do tasks and then we do the same for feel like I tried to do this directly but the didn't work so not sure why but do it twice and so now when you also need on this we also need this attribute so like how can we add an attribute in JavaScript self attribute yes so we add set attributes so like there is no set attribute draggable so you like Saturday will take two parameters the first one is actual attributes and the second one is the value so we are going to drag a ball and true and then nothing yeah yesterday on one of the stretch goals I was researching on some of these things and I think we can also do tax notes draggable it was too true and it should work okay can you repeat again I said we can also do tax dots druggable okay like it like this sucks dots draggable yes it goes to chew yeah it should work as well the truth the truth should be shrink not extreme no it's fine no yeah I think it's a boolean so she'll recognize it okay yeah so and then so like what we need to to do less before like I've actually went too fast let's do a console log to make sure we actually have the right thing we actually creating so actually it should be okay okay looks good looks good I'm going to put it at the top okay so next we need to create the this deal live and add it to the list so I'm going to continue writing down a drastic and react less task context content bigger document that creates elements it's a deal up I'm going to use it again for for the next one so we are going to call it so there is a content and the trash so let's call it trash so it's also a div but okay and so now again we need to add that's content as a class so tasks content class list class content and then we need to we need to actually pass the value so where do we actually get the value from from the image field yeah and so like we're like as valid yep so we are going to actually - so we want to so you have to sing it when you notice it like you don't take it something and you put it you actually you you look at where you want to put it and you take the thing you want to put it and you append it to it or like you add it to it so the first thing we need to do is to make sure we have test content and so here up yeah let me actually close this one better all right yes perfect tense okay sorry about that so we can put the next EXO in XML and yeah let's so let's just just make sure we are right there just consume the test content just to make sure we are actually doing something good here up tasks before in a situation add add tasks so what what does it mean you actually did the console.log before declaring task anything yep and so you have to be gorgeous like you will see afterwards like there is also one where you you will have to take care and this is where life is a console to feel like if created problem but it's also where it's actually available so excuse me about that so like we can see we have we have the tasks content and so we are good to go so we have a problem is with my brother but there's something else so let's not care about that for now okay so we have it it's working so let's let's continue again so if we look at some if we look at the trash we have a class of trash so let's add a little class lid to it plus this - excuse me trash and then up many people so now that we have that well like what do we need to do and actually let me just add the X like we need the X here like here this is where you should pass the actual image okay so now that we have that watch from video and the element is done yeah and in which order like do we add it one by one like our redesigns like if we look at the if we look at them at the actual task and how it looks like like where for where should we start the task to the task itself to the UL two-layer lie to do UL then you need the to dues right yeah so I didn't in the other way so you add so basically think about like him like you don't want I'm not sure like it doesn't make much difference but like you don't want to deliver some things that's not ready and then build on top of it while you are saying it's innate I'm sure this is milliseconds but what's so what I've seen is that you want to to actually add the elements to the overall container and then add the container to them and so the first thing we need so where we need to add it we need to we want to add the elements of content and trash to to the task so we do tasks and then how can we add an element in your scripts appendchild and yep and so we that's content and trash okay so now we are that's right and so where we where do we want to so should we do should we do now so we have a task should we do task and so know like like basically fine like what we want to do like right now is something right excuse me would you like test our current appendchild and then we append the doesn't know so like right now like we already have the real image here like the task is already here and so now if you actually console.log right now it's ready to go it's ready to go it's fully booked and it should look nice and but now we have to like append it somewhere and so what I wonder what I want to so if look at it this is exactly how we wanted it and so but first first what we want to do is basically when when I said before is that like you want to find a location like the drop zone and then add your element to it so right now what we want to do is something and we want to do a pinch ow and task right and so we need we need at something so I don't know like where where do you want to put it in the task yeah exactly so we want to we want to we want to put it here so again like we'll do the same as before like here we are going to create something very simple we are going to do tasks document get element by ID and I called it tasks added tasks added ok and so now like we have we are back to actual place of where we want to put it and so now we just have to we just have to happen to the place we want to put it and so because it's a list like where where will it will pull it but what's up and up and child does here they will it pull it before or after the current one when my my brother is taking right now let's try to imagine okay [Music] and so like I encourage you I don't know if I can say that in English I push you to real small apps like this and because like right now you are doing it with me so you are following along and you seems like you have an did everything by yourself but I push you to drill small apps to the web's and other small apps so you can actually see it working like I don't know like the first time I did it's like a few months ago like something like this and I click so I click the button and works like it's a great feeling and so you want to you want to be in small apps as you go on the side on the evening and stuff like that that you walk so you walk on your on your trucks and that's another topic that we talked about in our group is that right now you are following like very precise project where you have very precise guidelines and when you work on your own project your guideline is eye on your head and you have to figure out and so you will you will build a lot of stuff in that way and I think it's very very cool so yeah so we have it the only thing here like I want to have it so right like nothing is working yet like we have the plus because the SSS is already there so now like I want to add them but I want to add them before how can I do that so we need to change we need to actually change my tasks appendchild into something else get a treatment method so I'm not sure if it's like this or not so just just do it like this yeah yep okay I actually found out something else I was looking at it but I guess this one was a way better so there is also something called inside before where you can actually select the place where you want to add it so I will let you look at it as well in that case that's precision of wanted to add it at the specific position is not useful and I guess your your solution Isaac is better and yes we I will push it to get right now okay and right after that I'm going to take a five-minute break and we'll get back to it for to remove it and add the drag and drop okay I'm going to push it and let's do a five-minute break and if you have any questions while I'll break please let me know I'm not sure you will no yeah you are not going to eat not sure if it's loud enough not sure you hear it is that yeah that's really loud I won't sing for your sake maybe I can I can do it like this any any feedback so far from the lecture and what what I could improve do you really like to go faster slower all good okay silence yes I guess hopefully probably everyone is away first time I pass back once town faster faster aye sir [Music] [Music] okay let's take Benjamin here yet okay let's let's continue so right we now have we now have our our ad task so we don't need our sample so I'm just going to uncomment it I commented to not see it anymore and we should be able to add it add some softwares there is none at the moment and so we are going to add it Oh actually we haven't covered that so right now like when we when we type like the value is still there any any ideas on how we should do that so basically this is task value and ties value in cent we need to pass it here but then we also want to input to clear out budget as value is not test value anymore so we don't need it so but I won't spend too much time on this like simple thing I did is just select the same elements as before and and just repeat the value to enter and when you actually submit the touchdown you will be empty afterwards on the same you haven't covered yet is the bug is that if I add something right now but there is nothing in there like it add add task to it so we want to prevent that so how how can I do that you found a statement yeah use an empty street passing yeah even even simpler like let's do is there is that value actually do it if there is man Bank on do it though it's kind you were right that's exactly the logic behind it so it's just here there is no like opposites like you just don't do it if if there is nothing okay so here like we come to so now we add something if there is nothing the result like we could even do like we said Karen if we do a ternary operator we could do a small message saying behind it below it's saying a you need to add we need to add a text here to make sure we are the task and so you could do it like this okay and so yeah how should we remove the task now so great we have a task but I made a mistake and we haven't we don't have the Edit function yet it's like Twitter and and we need to delete it so how else should I do it or should we do it any idea so first there is actually an element here already ready for you to to use to actually delete it so but watch what the first thing actual they're here so first we actually do you want to go ahead and do it let's let's do it I will give you two minutes and to to to create a remove task function and so a bit simple but actually not very hard for this one and we also need we also need something for the trash because we won't trigger it somewhere and so we need something to listen to it and so when we click on it the cream of test function actually run you someone wants you to go ahead and announce me you're right right this one so we need to listen so I will just show you again so we need to when we have a task we want to oh yeah because I what happened should be okay yeah so when I click on this it should be working anyone James yeah we just saying like Adam event limited - trashed our event listener bit cut it click yeah exactly that's perfect and the only thing here that you don't need and is that right now you are calling the function and you want to let this because like we are passing something here and so in here we want to actually do something about it because an event to be able to actually yeah we need so we need to get to the task how can we do that the closing bracket on like that one we like that one we good so yeah I will go there a bit bit faster just to make sure so we want we want to get a desk and we then want to remove it but the problem is we want to remove it from somewhere and so again like we have to think about like okay we won't win over the task so it's it's here so when we are going to yeah because I'm writing right now right but when we are in task we have it's when we click on it we can actually get the elements that is being click on but we also want to remove it from somewhere and for that somewhere is actual lists that come from so the first thing that we are going to do we can call it least we can call it task we are going to take the value of where of where the task is because if it's in this one that's okay but if it's this one that's not the same and so we want to check which where where it's accurate and so we want to do a vent so this is the actual click event and then targets and so with that we are able to actually access to it and so and then we want to access it and because because we're it's because it eats the classes here we want to take this but this one is the list and we don't need a list we need the actual task so we are going to do a panic mode and then on that again and so if if we look at that yeah something wrong you see you see our ears links well I'm very happy so address for that and so now with that we have the place where we want to put it we want to actually get a task and do the same but we are we aren't going to do to go all the way we are just want to go to take just a list and so now that we have that we can actually remove the task and so again we get good place and then we get the thing we want to put there or in that case remove it so the place where we want to remove it from is task and then what we want remember we want to remove is task [Music] [Music] once you bring it back no really spicy unison argument this exists yeah hot this shouldn't be passed I mean the let's have this as the exactly I think this should work on the problem with that so I think I think the problem we will see later we will try to we'll try to keep it like this way but I think at the problem is like when it was somewhere else and let me try it yes we're working so yeah let's let's try to let's try it like this and we'll see it we'll see our good thank you okay so now sings apart well that's interesting for you drag and drop so I'm going to push what we have right now and we are going to move on to drag and drop any questions so far [Music] okay so drag and drop I'm going to okay so it's the first time I heard any was actually during a Tuesday project like when you have to build ten ten different add eventlistener that's the first time I heard about drag-and-drop and all the other one when you look at them for example click is just click there is no like sub events and for this one there is like a lot and so I think this is where it's a completely on confront like it's just not like Judas don't just add dragon grab like a dragon drop at the very center and this it's done like serious or women involved virtually build something so we are going to look at how we can do this so what we want to do so the first thing we need is a html5 attribute draggable to be true we already have that in our HTML and we also do it well we also add it in our in our JavaScript here so the first thing we need to do is to create a variable and to actually store the task so the problem is like when you when when when there is like when you if I had only one task like we could add we could either class or ie to it and just use that too make sure we have the right one but when there are several we have to make sure we have like we are passing the right the right and the right task and so for that we are going to use an event in JavaScript when we actually start the drive and so the name is pretty easy on this one and it's called drag start drag start okay so the first thing we are going to do is select the variable and create the drag style okay so I'm just going to create a variable like the relation here just to all to actually like I have a global variable that I can reuse everywhere afterwards I'm not sure if this is best way to do it but this is our I did it and so I mean look it's okay so we have drag start well as well well as available to us in the API I have send you the link so should be OK for you what else is all okay dragon so this is um so actually let me let me put it here first so the Dragon and the dragon is used to make its beginning and and so we need to we need to make sure we add it to to our task because like if we don't add it on our task we won't be able to use it so how can we do that so the task needs to have the drug czar and drag an event listener so I guess I said a sellout here but okay so basically we need to come back to our ad task and make sure that do have the event listener that we need and so something we have to get to here so this is the function so that application for the s but for for the other one for the for actual JavaScript event there is no there is no application it's so what you want to add is you want to add to event listener one which is called add drag start and the other one which is called dry n to make sure like you can actually select the right task so when you actually pick it up you know which task we are talking about and when you are putting down you know which task you are talking about okay so now now that we have yeah we have this we can actually do something like that so the first so the first thing so what I've created is I created a class to make sure there is a kind of fun there is some kind of an effect on it so you can look at it if you want it's called old and just over on active and so if I if I if I I want to try it I'm going to do an event okay let's actually pass an event to it I get a class and so here don't want to do class list because I do actually yeah it could be but so what I did I did this only do good equal hope and so already it's a bit better this is when like you want to check more friends and you do yes you I think drag and actually needs to be created could it be an empty function I think it's because it's been passed oh yeah I'd be I sorta read it but it was you have a plus-one parent class name yeah yeah I think this is this one because the dragon so dragon as just added in the center of Dragon and actually like what I did not do and mushroom it just opens the console on the right and I'm sure who that since they are very quickly here I think actually do it for the sake of it and you're gonna say dragon is not defined I'll already be stopped up and when I do this no and whatever at least we have an ID we have a good idea of where they are is from okay so it's working and so what we have decided we are the other class and you see when I actually pick it up there is some there is some effect to it okay and can see but not very useful so now what we want to do you want to make sure we actually know the test and where I come from and I'm able to take it from anywhere and use it from anywhere so we have created a global V about here that we want to access later on so what we are going to do we are just going to add the actual event to the task and so now we are going to minus mu over again as let's consulate console.log it see you there is something wrong you have to Dragon now right oh yeah thank you okay and a note there so we see like we have what we want and so now we can use it later on to actually put it somewhere else and I'm sure you know what I'm thinking about which is a pen okay as Amaya see ya okay so now now that we have that right and so to do something else it's also something for so right now when you do it like you see like when I do this when I take it like the the count is still behind and so what I'm going and what I created is I created a class called invisible with the display noun and so what we are going to do we are going to put it the only problem here is that if we put it directly so if we do event I get that class name and we put it to invisible what water - one a dragon will go invisible yeah so like I probably have something here but that's not very helpful so what we want to do is like we want to create to make sure the invisible class is triggered right after and so like this area seem like you can do use a set timeout and that you can use to to do that and you can just set it to zero and so like like once you are you took it and it's your in your mouth I guess and like it is a from there so that's nice okay and so like it looks better now the problem is like when I drop it like disappear so we need to fix it and so why why like why like why don't I say it now like so and I selections the class to invisible so why like why don't I say it again like well what what should I do to see it again and toggle the class off again right yep so like we replaced it and so what we are going to do we are just going to [Music] we are just going to add add the right class name to it and so at the end of it we are going to an actually let me let me hold plus some comes online just to show you like when the different events actually a bad okay so look at the console I took it starts and and because like we put it back as a normal display like and like it already looks very good actually and you can see like how everything is inspiring as I take it and I and I grab it not drop it but end it okay so now so we have it any question about that first and let me push it to to github any question about about this no question okay I have one quick question how do you come up with your solutions like do you I just come up with them like are you coding they're trying different things and see how works out or excuse me can you repeat again yeah how you come up with the solutions I mean like for been listening like you see this isn't drop by you came up with this hell out thing to like let it disappear after like you drag it and then when you drop it like how you find those funny it's kind of solutions yeah so to do next like I follow tutorials online I looked at it try to copy it and then I create my own so that's not the first to-do list I commit and so this is how I went so first you need to discredit to the list where is a no drag and drop so you understand it and then you add to it each time and so you can look you look at the so the documentation here and it's pretty straightforward but I do think it's a bit there's a lot of the appropriate and I don't think it's like it's good when you have a good understanding and you want to further your understanding but my go-to is of say is YouTube and you just type drag and drop drop and on YouTube on also sources and you will find example ain't ready I'll like how I go I go at it thank you very much then I'm an intravenous like um I'm teaching who here tonight but four months ago like I was in your position so like I know I know what you are going through right now okay so now we want to make sure and we want to put it to something else so I've added something called drop zone so there is no semantics to it I'm just holding that and so let's let's make sure we actually get them so there is several drop zone so we are going to call it rubs on and we are going to document query select query selector all by my yyy six month okay I guess you just don't want to give it to me okay and let's just make sure we have it so we shall see not list of four or four items so that's why I guess II you need to put the dots before cropland yeah yeah I used to get women by class name but that's not possible when you want okay so now we have our four combs and we have a lot of stuff here I can look more into it if you want okay so now we want to the first thing we need to do to do is make sure we do have event listener to the drop zones so what we are going to do is we are going to add all the different even listener so there is four four drop zones so how can we how can we add event listeners to all of them for each yep so that's a perfect answer I use another one and in that case are just a simple four followed and so in that in the meantime I also create another rival with world drop zone so I can reuse afterwards and so now I can use the drop zone and add all the rhythm to it and so we have different event we have the first one that it's drag enter and we are going to function to it and then we are dragged over drag leave and drag drop I will let you guys look at the MDM documentation if you want to look more at it but I'm going to pass and mine are already here so we have dragon tur dragged over and then drag leave and drop and I have created for a different for different functions to be able to play with it ok so now with the first one we are going to create is a dry dragon tur and so the same here we want to we want you to do is so when when actually let me just make it work and then we're going to make it the best friend here so let's go in to make it in make it in work so what we want to what we want to do is make sure when when we actually drop it dragon tear is not defined in check oh yeah for sure [Music] it would be write down quickly these functions so you're actually the only one I we actually need is in that case is drag drop and the other one are for fancier swing let's call it that so now so basically what we want to do now is we want to use the events that we have that this that is saved in task to make sure we can actually drop it to the right place so here what we want to want what we're going to to do is to make sure we actually pass event and so like where where is that even if I do like if I do this okay so so if I do this and I drop it here what will have like what will be in the event of of drop in that case in the drop function so the release of the mouse click excuse me releasing the mouse click maybe where was dropped yep so where it was drop and in that case and that's not actually let's say let's look at where where like how like what's even actually look like [Music] okay and so it's not working here and so there is a reason for that like that you don't assume that for I don't write anything that actually put me that wasn't great very good and that only owns the drag Enter or drag drag over I don't remember you have to add something to prevent to prevent the default behavior that actually prevents the drug to happen not sure why are our quirks but it's okay I think your event listener for a drag drop is just called drop yeah okay yeah no no that's you you mean yeah yeah yeah yeah so that's the actual I don't know I don't know why look like everything is dry except this one like I don't know what so no so now it's so if you look at it it's so we will drop so it's working and so now so I think work what's what I should do is I should just push in and you see so I I put in here and so what I have is deep class drop zone : title to do and this is another complaint where I want it okay and so in there like I do have I Drive my other stuff yeah actually if I'm looking at my like my [Music] HTML right now and I submit will put a real in there as well but that's another thing okay another thing I wanted to show you and before we okay is how everything works so winter / if made with me so this one but that wasn't okay and so you would just see like how everything and I will let you look at here so as soon as I take it I go to start and I also have a mentor because I enter this one and my over like because I'm like he explained to me the fire and as soon as the one in one like so I'm living the backlog so I believe but then now I enter events at this trigger you coming going to do again and again and again and again you and so now when I do I'll leave it have the drug and because I have console like while we're inside rate drop I can I clear it and so now that you know like our every single box that makes this happen so now like we want to actually drop like add act relevant and we're where we need it and so to do that how can we do it so we know that event the tiled Panchali actually it's actually the likely place where one church yeah okay appendage appendchild no to the event target yep so we can just do a gun in that case but yeah and we do a task because we have we have put like we have put on drag starts like the one we started from we all we all did somewhere and then we use and so [Music] [Music] and you see like all the all the different events trying on the right and so now like if you want to add a few things and it's what I wanted to to cover outer and you have five minutes left is to just make sure everything goes good and so I'm going to add a few things so in the drag enter so I've created a function so it's it's like it's this is how you add some styling to it you use those functions those different functions and those events to trigger a specific time and so for example we could use like the drag enter like to actually show that this is a drop down right now like like there is no visual difference to show that the jobs on and so when you enter you want something to happen and so what I've created is that I added something called over and you just adding so when I add this class you just add a dashed border and so what I'm going to do is just add this this actual class through the dragon tur and so some a bit of logic here because I had some problem but basically what you have to to know that is that we are adding the over class when we are entering into drop zone so when this is column drop zone like added to here because if you if I don't if you don't make sure this is like the only element you want to go over like you can go over all the page and you all exam like the class name over will be applied and so you only want it to be applied to the actual element you want and in that case did I put some log in there let me look we're not not sure about that okay let me repeat for the other one and so same for leaf so here what I want is to like put it back so when Cordova I want to put it back and and for the drag drop at the same like I want to I want to put it back as well not sure why the plant in front of the class name is miss like a syntax error origins if you see like in the drug an turn dragon turns off yeah online online in 81 after class name you have a plus and equal I want to I want to add it to it okay I'm not sure here my dad might be on a small mistake let me whoops and you should be working here okay so I think my little problem in the HTML so I might have forgot something somewhere let me just pass it here hmm okay yeah not sure what I've done that seems like there is a small hiccup you it's mine let's watch her team running okay so yeah not sure I would have to to check it sir about about I'm glad that but the final project is here and do you have a question about some about the project we took your final changes okay so I think like you know that's actually whether the mine I saw that I did something else yeah I'm going to push what I have however as this is like you can look at them add the solution so on the master branch and you will see what we have done right now thanks see ya others yeah that's pretty much it hopefully you were able to follow along and code alone of the update out I'm having like going through the process of building a small app there is not much here I think we covered like a lot of different like the way I you targets elements and add to it and add the class to it and stuff like that which you will be using again and again and again in react is a bit simpler but like you have seen it how you can do it in in JavaScript and you also have seen drag and drop works from what he told me and someone else it's it's not working on Firefox so I will have to check that you can almost run some strategy goals if you want and so there is a small search on the top so you can try to make it works and right now there is no archive so for example you can add an archive button and create a fifth column and try to ask I've on like when you when you click on it you don't actually delete it but append it to the new column which is okay that can be a great great stretch goals like you can do it after after after your coach challenge tomorrow if you feel confident and I will be also happy to help you in the case but yeah that pretty much it any any questions and I will let you go no but very good thank you I'm saying thanks thank you very much okay okay I have a good evening rest well for too much hand and yeah good night oh forget nah just cool nice

Channel: Maxime Salomon

Views: 4,892

Rating: 5 out of 5

Keywords:

Id: pz7bO9_lsGo

Length: 120min 14sec (7214 seconds)

Published: Fri May 17 2019