JavaScript Project for Dummies: Bookmark a page

1. Introduction: This is the third project of our JavaScript series and the project is bookmark a page. The learning objectives of this project is that we're going to learn to create, add, and delete estimate element using JavaScript, and we can also learn how can you make our estimate element editable in JavaScript. These are the key learnings we are going to have in this project. 2. Building Bookmark a page: So this is the project that we are building in this video. So I name this project as bookmark a page. So what this actually does, it is pretty simple. You can actually add your bookmarks into this of your URL. So if I just go down there and copy the URL from here and go to our project. And here, if I just click on add bookmark, it will add this URL as a bookmark. Okay. And if I try to do the same thing, but without the SGTPS all right, so now if I click on add bookmark, it will actually give us a warning that your input is not a valid URL. Okay. And similarly, if I don't add anything into this and click on the add bookmark, we will still have an alert or to enter a valid URL here. Okay? Similarly, if I add the URL again here, I can delete this from here directly and I can also edit this from here. And the interesting part is that for editing the URL, I don't have to add any prompt here. I can directly edit the URL from here. So let's say if I add Google here and click on Save, it will be added directly. Now you can see this if I click on this, we cannot edit this part. But if I just click on the edit button, now this part is editable. All right, so now I click on save again. And if I add the multiple bookmarks here, let me just add the second link here. And let me just add the third link as well. So I'm actually using the same URL right now, but you can go here with a different URL here as well. All right. So if I wanted to delete all of the bookmarks together, what I can do, I can simply click on delete all bookmarks here, and now you won't be able to see any bookmark here. Okay? So this is what we are going to build in this video. Okay. So first of all, we have to know that what we will be learning in this project so in this project, the key concept that we have is we're going to learn to create estimL element in JavaScript, and also adding the element into another element, deleting the estimL element from another element using JavaScript. And also, we're going to learn how can we make an element editable. Okay? So these are the key concept that we will be learning in this project. So now, first of all, what we need to do, I'm going to open up my VS code. All right. And now I have to resize this to the full screen. All right. And right now you can see here we are having the index stimLFle and we are also having our style dot CSS file. And as you know, just like our previous projects, we only work on the JavaScript part of the project. Okay? So we have already done the estimate part and also style dot CSS part. Okay, now we have to work on our JavaScript only. Okay, so now I'm going to run this project first. Click on open with the live server. Alright, so this is the project that we have right now on our estimal side, and we add CSE to this, this is going to look just like this. Okay? So here as you can see here that on our estimate part, we are having an input here, then we have these two buttons, and then we're going to have our bookmarks. Okay? So right now, we haven't added anything. That is why we don't have anything in the bookmarks. But if I go back to our estimal code, here, you'll be able to see our estimal structure. So basically, we're starting with the heading here, and after this, we have our main container, and everything is inside this main element. So inside this main element, we are having two things. The first one is the form on which we are getting our input and also these buttons that we have at bookmark and delete all bookmarks. And on the section element, we are basically having a heading that is a bookmarks, and then we are having the under list here. Okay? And using JavaScript code, we will be adding the list items into our under list. Okay? So how are you going to do this? It is pretty simple. So this is our estimal structure, and in the end, we are actually adding our main JavaScript file, and we are also having our style door CSs. So now I'm going to simply link our style dot CSS here in our project. So if I save this and if I go back to the browser, now you'll be able to see that this is how our UI is looking, and it is looking really great. So I'm going to delete this tab. Okay, so right now, this project is not working. Okay? So if I try to add anything into this, and click on Add bookmark, you can see it is doing nothing. So basically, the UI of our project is ready, but it's not functional. So we'll be making this functional with the help of JavaScript. Okay? So we're going to again go into our documentation that how we're going to do the things here. So in the documentation of our bookmark a page, the first thing that we have is the purpose of this code. So basically, this code is doing three things. So this code is basically behaving as a bookmark manager that would enable the user to add valid URS at the bookmark, and you can also edit or delete the individual bookmarks and clear the entire bookmark list. The second thing is that we must have the input validation so that we can ensure that we are only adding the valid URS. And after that, we have our estimate structure that we have already done, and then we have CSS styling that is already done from my side, and you don't have to worry about this because I will be adding this in resources, and after that, we have our JavaScript code. So in the JavaScript code, I have divided this into the five different steps. So the first one is pretty obvious to select estimL elements, just like our previous projects. And after that, we can have the URL validation. Also, we can change the step number of this. We can do the validation in the last or we can also add this on the second step as well. And then we're going to have a function that would add the bookmark, and then we're going to have the function that would delete all the bookmarks and then we're going to add event listeners. Okay? So we have to write down our code based on these steps. Okay? So now I'll just jump into the VS code. And here, what we have to do we have to add main Js file. And inside the main dot js file, I'm going to add the steps here. The first one is actually select stimal elements here. And the second step is basically to validate the URL. And the third step would be to add a bookmark. And after that, we're going to delete all bookmarks, and in the last, we're going to have event listener. All right. Perfect. So the first thing that we have to do in our code is basically to select the estimate elements that we think we might require in our JavaScript code. So I'm going to go inside our index estimate file. And from here, I will actually look for the elements that I would required in my JavaScript code. The first thing would be the input. That is obvious, and then we are going to have both of these buttons, add bookmark and delete all bookmarks, and then we're going to also need this unordered list. So these are the four elements that I think we're going to require. We may also require the other elements as well. But right now just access these four elements here. Okay? So the first thing I'm going to go into the JavaScript code again. The first, we're going to access our input. All right, so as we know that to access the element, we'll use document, get element by ID method, and then we have to add the ID of that element. Okay, so this is the first one. And the second one is actually the add bookmark button. So I'm going to name it as add bookmark button, and we're going to copy this code from here. All right, so we're going to also. So now we're going to add delete all bookmarks button. Let's just copy this again. I think it's already copied. We'll just put it here. And then we also need the bookmark list. Perfect. So I'm going to get the IDs from here. So for the input, we are having this ID bookmark input. Let's just put it here, and for our eight bookmark button, we are having this ID. Let's just copy this from here and put it here, and then we have delete all button in our estimate code. And let's just put it here on our button. And in the last we are having bookmark list. So we're going to simply copy this from here again and just put it here. Perfect. All right, so now just to validate, I'm going to add the console log here to check that I'm accessing all the elements or not. Okay, so I'm going to write down bookmark input. Let's just copy this. So this will be Add button. So this will be delete button. And we can also have bookmark list. Sorry, bookmark list here. Okay. So now let's click on Save and now we have to go back to our project in the browser. And let's just put this into the full screen mode. And now let's click on the inspect here. And here we have to go inside the console log. And here you can see here that we are successfully accessing all the elements that we require right now. Okay, now we're going to go back into our code. Okay. So I'm going to do this validation part in the last, right now, I'm going to work on add a bookmark and delete all bookmarks and these event listeners. And then in the last, I would add this validation function here. Okay? So I'm going to define a function here. Add bookmark. Perfect. And similarly, we're going to add the function to delete all bookmarks. All right. And then we'll also add event listeners here. Okay? So to add bookmark, event listener would work on the Add bookmark button. I'm going to click on Add Mark button. We're going to have add event listener here. We're going to add the event here, that would be click event. And then we're going to add our function. That would be add bookmark here. Perfect. And similarly, we're going to add the event listener on our delete button. We're going to add add event listener. It will be on clique, and then we're going to add our function here. Perfect. Now we're going to just do the console log here to verify that whether our event listeners are working or not. So this will be adding bookmark, and I will just simply copy this from here. I will simply add this here as deleting all bookmarks. Perfect. So now we're going to go back to our project in the browser. And I'll just rephrase the page. And now let's just click on add bookmark here. So now, as you can see here that our ad bookmark function and also the event listener is working. Similarly, I'm going to click on Delete all bookmarks, and you can see this we are having our console log. So it simply means that our function and event listener is working. Okay, so now we're going to go back into our VS code. And now we're going to add the functionalities on our add bookmark function, okay? So in our Ed bookmark function, the first thing that we have to do is to get the input that we are having on our input field here. So we have to get the input from here, and then we have to pass this into our function. So how we're going to do this is pretty simple. First, we're going to create lead here we have to create the variable, so I can name it as the URL or also a bookmark value or something like this. All right. As we know that we are getting the input in our bookmark input element. So we're going to write down that name, bookmark input, and we also know that to get the value from input element, we have to write down dot value. All right. Now the first thing that we have to do is to test whether our URL is working perfectly or not. So we're going to go back into a browser here, let's just click on Ins we're going to console again. Now I'm going to add any value here since we haven't added any validation here, so we can write down anything right now. So let's click on Add Bookmark, and you can see this we are cetting our input value from here. Perfect. All right. So now what we have to do we have to create the lement. So if I go back into my estimate file, and as you can see here, that here we are only having the unordered list. Okay. And what we have to do here, we basically have to create the listed item with the help of JavaScript, and inside those listed items, we're going to have our text into it. Okay? And we're going also have our buttons as well, delete and edit button as well. But right now, we're going to only add the text into it. Okay? The first thing that we have to do, we have to create the list element. So how do we create the list element is pretty simple. I'm going to create a variable here, that would be a bookmark. Element. So here I will use a method. So first of all, I'm going to write down document because as we know that to access anything in the dome, we have to start the things with document, and then we're going to write down tot then I will write down, create element method here. Perfect. And I want it to create here the list element. So basically, this method that we have would create the element for us. Okay? And here, what I need to do, I will need to do one more thing here. I will need to create a paragraph element as well. I'm going to name it as bookmark, paragraph, and we will create the element in a similar way. We're going to simply copy this part and we'll put it here and instead of the list, we're going to have the paragraph here. Since we also need two more elements, because we have to add the delete button and added button as well, so we're going to add these buttons here. I'm going to have this button here, so we're going to write down let delete button. And basically, we're going to do the same thing here, and this will be the button. And in a similar way, we're going to add added button here. Okay? We have to add the document, then we have to use Create element method, then inside of it, we have to add the button. Okay, so the one thing that I need to do here is actually have to create a div element for my buttons. Okay? So I can write this as button container, and this would be the development. So we're going to write down document, create, element. And now what we have to do we have to write down the development. Okay. So we have created all of the elements that we require whenever we are adding our bookmark. Okay. So right now, just to keep it simple, I would do one thing here. First thing that I have to do is to write down bookmark list that we have here. All right, that we have here. So now what I have to do, I wanted to add my list element inside my bookmark list. Okay? So how can you do this? It's pretty simple. You'll just add a method here that is appended child. Okay? And I have to add the parenthesis now. And here I will pass the name of the element, which I want to add in my bookmark list. So I want to add this bookmark element. So I'm going to simply pass this here. It will be bookmark element. Perfect. So now we're going to run our function and we're going to see whether this is working perfectly or not. Obviously, it won't have any data right now, but at least we know that we are adding the list element into order list. So now we have to click here on the Spector again. And here what we have to do. All right. Right now, you can see here that we have nothing in our under list. So I just click on add bookmark button. Now, you'll be able to see that we have added the list item here. Obviously, it does not have anything because I haven't added any data into this, but you can see this, it is adding the element here. Similarly, we are having the second element, then we have the third element, so on. You can add the list item like this and we have done it successfully. Now you're going to go back into a code. And obviously we have to add the data into this, all right. Now what I have to do, I would add the paragraph element in my bookmark element, and how we're going to do this in the same way? We're going to write down a parent child and in here, I will pass bookmark paragraph. Perfect. All right. And inside the bookmark paragraph, I actually pass the text content, and the text content will be our URL. So I'm going to simply pass the URL here. Perfect. Now if I just go back and if I just click on our main container, click on the section, then unaltered list. Now when I click on the add bookmark here, it will also have the paragraph that will be inside the list element, and inside our paragraph, we're going to have our content that is written in the URL. So we're going to click on add bookmark, and now you'll be able to see our content into this. I can change the value here so I can write down. This value. And remember, right now, we don't have any validation here, so we can basically write down anything into this. So we're going to click on Add Bookmark again and you can see this. We are having our data here in the bookmark, and it is working perfectly. Okay. So I also wanted to add two buttons here, which is the delete button which is also the Edit button. So how are we going to do this? It's pretty simple. I would add button container and inside the button container, I would like to add my delete button and the edited button. So the first thing that I would like to add is it will be most probably dit button. Okay? And in a similar way, I would add the delete button. All right. So now you can see this since we have added our dit button and the delete button in my button container, now I'm going to add this button container inside my bookmark element. Okay? So how are you going to do this? It is pretty simple. We're going to simply copy this from here. And I will put it here, and here I will just change the value, and this will be button container. So let's just save this and now we'll just go back to our preview. Let's just click on our ad bookmark. And now you can see this we are having these buttons, but obviously we haven't added any data into this. Okay? So now what we have to do, we're going to go back here and here in my delete button. I would add the text content, and this will be delete. And similarly, I would do the same thing for added button. We're going to add text content and this will be added. Perfect. Now you're going to go back. And if I just click on add bookmark again, it should probably add our content here, but I think I have done some mistake here. I'm going to go back into the console log. All right. So we are having this type error here. The text content is not a function. Okay. All right, right. So I have done a mistake here. This is actually the property, not the method. I need to assign it like this. Now this should probably work. Let's just save this and go back to our project and click on Add Bookmark. Perfect. Now you can see this we are having our buttons here. Obviously, these buttons are not functional right now, but we have added this on our front end. One thing that I still have to do is to add the type of the button to button. So this is going to be we can add the type of the button here and this will be button. Okay. So I'm going to also add this for the delete button as well. Perfect. Okay. So one thing that I have to add here is also inside our start CSS is actually a class here. Okay, so I have to add this on our container. So how are we going to add the class here in our code? That is also pretty simple what you would need to do here. You will add the name of container, which is button container, and then we're going to write down class here. Okay, so I'm not sure which method we use to add the class name. Maybe it's a class name or the class list. Okay, so we're going to go back into the browser and we'll look for this on the Google. So we're going to write down how do we add class name in JavaScript. Okay? So we can look into the So flow. All right, so I think we will need to use the class list method. Perfect. Now we're going to go back into our code and we will write down class list here. Then we'll simply use the add method. And here, what we have to do we have to add the name of our class, which is actually, if I can go back into the style or CSS, Button container. So I'm going to go here into our JavaScript file. Let's just add this. And this is how we can add the class name into our estimate limate using JavaScript. Perfect. Now we're going to go back into the browser and let's see whether this is added or not. So now we're going to go into the inspector and here, just click on the main, click on our section, click on the UL. Perfect. Now let's click on Add Bookmark here. Perfect. And now you can see that we are having this space here into our buttons. I simply means that we have added the class name successfully. Well, just give it a check here. Okay, so we have added the class name into development, and it is working fine. Perfect. And similarly, if I wanted to add any other value here, and click on the add bookmark, and this is working perfectly. Our add bookmark functionality is working perfectly, right? And now what we have to do we have to add the functionality on the addit button and also on the delete button. Okay. But before that, we're going to add our delete all bookmarks button functionality. So how are you going to do this? We're going to go back into our code and here what we have to do. It would be pretty simple. It is actually a single line code here. Okay, so how this is a single line of a code. So basically, as we know that whatever I am adding here is being added on our bookmark list. Okay? And to remove all the content from our bookmark list, we just have to do a single thing. So here we're going to add bookmark list. Then we'll write down inner estimal here. And since the inner estimal is actually the property, so we're going to add the value to this, and it will be the empty string. So basically, it is going to remove everything that we have in our bookmark list. Okay. So now let's just try to run this and let's see whether this is working or not. All right. So we're going to go back into our project. And let's just try to add some values into this. So we're going to add this value, and we're going to add a second value here as well. All right. So now if I just click on, delete all bookmarks button. So let me just open up our body here and also the section and the unordered list. So if I just click on, delete all button, basically, it would delete everything that we have inside our unordered list. So now let's click on, delete all bookmarks. And now you can see this we have nothing inside our unorder list. So this is how we can delete all the bookmarks that we have in our under list. Perfect. And also to add the class name, you can also use the class list and the add method, and you can also just write down class name here, and it would work in the same way. So whatever you prefer to use here. I'm going to go here with the class list. All right, so now what we have to do. If I go back to the browser, you'll be able to see one thing that whenever we add a URL here and click on Add Bookmark, you can see in the input field that text is not resetting itself. Okay? We are still having the same text here. So if I add this again, we still are having this text. But I don't want to have this. I want to have whenever I click on the add bookmark button, my input field should be clear. Okay, so how can you do this? It's pretty simple. We're going to go here inside the VS code. And here what you have to do we have to write down bookmark input and dot value property, and we will set this to empty string. After doing all the functionality that we have on, add bookmark. Okay. So now if I go back to our browser and if I try to add something here and click on add bookmark, now you can see here that our input field is clear. Okay. And one thing that you have to make sure is that you have to add bookmark input dot value. You have to target this directly, not the URL variable here because this won't affect the bookmark input that we have in the estimate. Okay? So if I write down the URL here, this would actually do nothing for us. Okay? So let's save this and we'll go back here. And if I try to have our URL, click on Add Bookmark, you can see this. We are still having our value here. So that is why you have to target bookmark input dot value because this would directly affect our input field here. Okay? All right. So now what we have to do, we're going to go back into the browser. Okay. So now you can see here that we have everything here that we needed, but still the added pattern and the delete pattern is not functional. So we have to make this button functional. So how can we do this? It's pretty simple. We need to add the event listener over our buttons. So I'm going to add these event listeners. So first of all, I'm going to write down delete button. We're going to write down add event listener. So event would be, let's say, click, and here we're going to have our arrow function. Okay. And similarly, we're going to add the event listener on our added button. Perfect. So now we have to define our functions here for our buttons. All right to delete that particular element, we actually have to target our bookmark element that we have here. So we're going to simply target bookmark element. And there is a predefined method in the tom that you can use to delete the estimate element directly. Okay? So now if I go back to our browser, let's just add something here. Let me just add one more property here. Click on add bookmark. Now let's click on our delete button, and this would delete that bookmark button. And if I just click on this again, it would also delete that bookmark element. Okay? Now what we have to do we have to add the functionality of added button. Now to add the functionality on our died button, I can simply edit the content by this if I use the prompt. So if I just use the prompt here, so let me just create a variable that will be new URL. And I can simply use the prompt here. I can write down update URL value. Okay. And then what we can do, we can simply add this in our bookmark paragraph into the text content. And that would basically update our content inside the bookmark element. So if I go back into the browser, let's just add something here. And if I just click on the edit, now you'll be able to see that we are having the prompt here. Okay? And if I just write down google.com and click on Okay. This would actually update the content of our bookmark value. Okay. So this is working. Now I want you to do something new in this project, which is to make this paragraph editable directly without going into the prom. So how can you do this? It's pretty simple. Let me just delete this from here. We have to write down bookmark element, and now we have to write down the property that is children. Okay. And right now, I will only do the Consolo here because I have to show you something. If you go back to our browser, and click on and click on any value here and click on dit. Now you'll be able to see that we are having this console log of estimate collection in which on the zero index value, we are having our paragraph, and then on the one, we are having our development. Okay, to make our paragraph editable, what we have to do, we have to target on that property that is on index number zero, which is our paragraph, obviously. So to access this, we're going to write down zero. And now if I just add any value here and click on Edit, now, you'll be able to see that we are directly accessing our paragraph element. All right. Now to make our paragraph element editable, there is a property, but actually I don't remember the name of it correctly. So we're going to search this on the Google. Okay. So now we're going to go back into the browser, and I have already opened this So flow article. Okay. So we have to use this property which is content editable, and we have to set this value to true. Okay, so I'm going to simply copy this from here. And we'll go back to our VS code. Let just pass that value here, and this would actually make our paragraph ditable. Now, one thing that we have to do here is that I also want to change the text of our addit button whenever we are having our paragraph ditable. So I'm going to write down text content, which would be equal to save. Okay. So now let's just save this and go back to our browser and just add some values here, click on Add Bookmark and click on Edit here. Now, you'll be able to see that our URL is editable or our paragraph element is editable. I can simply change the value here directly. And when I click on the Save button, actually it would do nothing because the reason is that if you go back to our code, and you can see here that we have added the functionality that whenever we click on our edit button, it should change the paragraph element to the editable content and also change the edit button text. So if you do this for the first time, it would show you the changes here, and if I just click on Save button again, which is actually the edit button, it would do nothing. So we have to define this now that whenever our content is already editable, it has to do something. So basically, we have to add the condition here that if now I just have to copy this from here, and I will put this inside our condition. Let's just remove the semi column and we have to wrap this. And what we have to do, actually, whenever the paragraph is already editable, we just have to do the reverse here. Okay? We have to change the value of the content editable to the false. And we have to do one more thing here. This will be added. Perfect. Now we're going to go back here and just add some stuff here and click on ddt and change the value here. And click on save here. All right, so I think we are having some issues here because our condition doesn't seem to work. And if I click on our paragraph, it is still editable. So now we have to go back into our code, and let's see where we have done the mistake here. So first, I'm going to check whether our condition is working or not. So I'm going to simply have the console log Condition is working. So now I just go back to our browser and have some stuff over here and click on our edit button. Okay, so it is now editable. But now when I click on our Save button, now we have to check whether our condition is working or not. So let's click on this. All right. So the condition seems to work. So what do we have done wrong here? Okay, okay. All right. So what we're going to do here, we're going to actually take the help of Ja JibTi or any other AI tool, whichever you like to use. So we're going to go to our browser. Okay, so let's just write down the JGIbii here. And now what we have to do we just have to put our code here and we're going to ask him find me a bug in this code. Okay. All right. Let me have a look on my code again. Maybe I can fix this. So we have the if condition that is probably working. Then we are changing the value. Okay, so I think we might have escaped the s. Okay, okay, okay, got it. All right. But still, I'm going to put this into the prom unless see maybe that can be the issue. All right, all right. So I have done this really basic mistake here is that I have given, so if I can go back into my code, I have given this the if condition. But I have put this code without any statement. So basically, even the condition is true here, like it is changing the value to the fuss and text content to the edit. But if the code goes down, we are still overriding the values here. So that is the potential issue. But we're going to go back into the prom and actually this is showing us the same thing. If I can zoom it in, Okay, so the line that we have the bookmark on which we are changing the value to the true is executed every time when the event listener runs. So basically, it is making our I blog effective. Same thing is happening with our text content here because outside the if condition, we have added this code. So basically, our condition is working, but we are actually overriding our value. So for that, what we have to do we have to put this into we have to put this into the LS statement. So let's just cut this from here and put this here, and this would probably work now. So let's save this and go back to our browser. Add any value here and click on it, change the value. Click on our button again. Now this is working. And now you can see this that our paragraph is not editable anymore. So this is working perfectly fine. Okay, so that was the issue. So we're going to remove this console log now. Perfect. Perfect. So we have done our functionality on the edit button. We have done this on the delete button. Basically, we have done everything except validating the URL, and that won't take so much of our time because we're going to use the regular expression here. And for the regular expression, we can take the hell from the chargebt. So first, I'm going to write down the function here, that would be validate URL. That would actually take a URL as input, and it would basically return that value. To add the regular expression, we don't have to add this by ourselves. We can just go to the Google if you want to or maybe the JGBT whatever looks better to you. Right now, I'm going to go to the JGBT and give it a proper prom to validate my URL here. I'm going to write down. I want to have a function in JavaScript that can validate the UR Okay. And I only want to validate validate the URL that either starts with HTTP, HTTPS. So now let's just give it a prom to the HAPT and let's see what do we get here. All right, so this is the pattern that we have got here. This is the one. I just have to copy this from here and we're going to go back into our project. Let's just put it here. And basically, we're going to write down dot test Method and we will put our URL here. That's it. So this would actually validate our URL. And what is the pattern that we are using for validation that either our URL start with HTTP or it should start with HTTPS now what we have to do here, we have to add this validation in our add bookmark function. So we're going to add here I'm going to write down my function and we'll put the URL here that we have here. So if our URL is getting validated. Okay, so now what I have to do, I would actually use the knot operator here, and this would only alert us the message whenever we are giving it an unvalid URL. All right. So we have written down our message here that if our URL is not a valid URL, it should show us this alert message. And I'm going to add one more condition here. So let's just write down and I will put one more condition. And this would be simply URL. And if our URL is an empty string, that should alert me that I have to write down something. Please write down valid URL. Now let's just have a look on our browser whether our conditions are working or not. Perfect. Let go back to our project. Now if I just click on add bookmark without an input value, it should give me an alert, which is please write down a valid URL. Here you have seen that that we are getting our alert, but still it is adding this element, and this is not something that we want. How can we solve this? It's pretty simple. We're going to go down inside here and basically we're going to write down the return here. And we're going to do the same thing on our statement. So basically what this return keyword would do, whenever the condition is two, it would actually exit us from our function. So basically, none of these functionalities would be performed. Okay? So now, if you go back into our code, so we have to save this first. And if I do this again, click on Okay. Now you can see this, it is not adding anything. And if I just have a URL here, but I delete this GDP as part from here and click on Add Bookmark. You can see this we are still having our alert here. All right. So it seems like that our validation function is working and it is working pretty good. And now what we have to do we still have one more issue, which is, let me just add a value here and add its value. Okay, so if I click on the edit here and if I just remove this from here, it won't give me any kind of warning. It will basically save this. We also have to add the validation function on our added button here as well. We're going to go back into our VS code and we don't have to do a lot here. We will basically add a condition here. We're going to add if and now we have to use our validate function, and now we're going to simply copy this from here. All right. And now, what we have to do, we just have to write down text content here, okay? And here, what we have to do,