JavaScript Project for Dummies: Anagram Checker

1. Introduction: This is the second project that we are going to build in JavaScript, and this project is about the anagram checker, and the concepts that we'll be implementing in these projects are Dom manipulation, string processing on which we can explore the different string methods, and then we're going to use Event Listener. And in the last, we're going to use local storage of the browser on which we're going to learn, how can we store and get the data from the local storage of the browser? 2. Building Anagram Checker: This project is about the anagram checker, and if you don't know about that what is the anagram, is pretty simple. So anagrams are simply the words or phrases or the sentence that has the same characters in the same frequency, but in different order. Okay? And the simplex example that we can have here, we have two words, Listen and silent. So if you observe both of these words, we are having same characters here and in the same frequency. Okay? But the order is actually different. So that is actually the anagram. So what we are doing in our project is pretty simple. We're going to add two words here, and you can also write down phrases or the sentences, whatever you want to write down. So I'm going to write down, let's say, silent here. And in the second word I will actually use Listen. And when I click on the button here, it will basically check both of these words whether they are anagram to each other or not. So if I just click on the check button, you can see here that both of these words are anagram. But if I go here with something different, so if I can write down Kate and if I just write down dog here and click on our button, now you can see here, our words are not anagram. All right. And we also have some conditions in our program. If I miss to add any of the input here, it will basically give me a kind of message here, okay? And if I also remove the second word, as well, it will also give us a different warning here. So you can see here. So this is how our project is working. So one thing that we haven't seen our project is actually the model. So whenever you are coming on the website for the first time, you'll be able to see the definition of the anagram on that model. But right now since I've already visited our website here, that is why even if I rephrase the page, you won't be able to see any model here. But if I go into inspect and if I go into the storage, and here, I'm going to go inside the local storage, you'll be able to see the property here which is visited and the value of it is true. Okay? So basically, whenever you're visiting the site for the first time, this property and value will be added. And after that, you won't be able to see that model. So if I remove this value from here, the second one Perfect. And if I disclose this and if I just rephrase the page now, now you'll be able to see a kind of welcome message here that we have on our project. Okay? So if I just click on the Get here, now you'll be able to see our project. So this was a demonstration of our project, and now we will go into our code editor and start building this, okay? So in our project, as you can see here, that I have already written our estimL code and also our CSS. Okay. So now, first of all, I'm going to explain you what do we have in our estimal structure because that is important. So in the estimate structure is pretty simple. We are having the two inputs here for the first word and the second mode that we have seen in the preview, and then we have our button, which is check anagram. And after this, we have the structure of our model here. Okay? So by default, the model structure is invisible. But whenever we are visiting this for the first time, we'll be able to see this in the first side. Okay? All right. So now what I would need to do here, I'm going to simply do the right click here and click on Open with Life server. And now you'll be able to see our estimal structure only. So we are having the two inputs here, as you can see here and the button, and then we are having our model structure here. Okay? All right, so now we're going to go back into our VS code. And here I would need to link my CSS, which I have already done, but I have to uncomment this from here. Uncomment this and click on the save again, and now we're going to go back to our project, and now you'll be able to see our project here. So right now we only have the estimL and the CSS part of it, and now we will start writing our Javascript part. So as we know that our projects are solely focused on the JavaScript. That is why I have already added Stimul and CSS code here. Okay. So now we're going to go back to our browser. And now we'll go inside the Excel draw here. And what are the key concept that we'll be learning in this project? So the first one is the dome manipulation. So we are already familiar with get element by ID and the text content, as we have covered that in our first project, which was actually the age calculator. But we still have the style dot display property that we can explore in this project. And the main thing that we have to explore here is the string processing. So in the string processing, basically, we will be covering different methods that we have on our strings. And we can also explore the event handling and in the last, we'll also go through the state persistence with the local storage. Right now, I'm going to give you the quick definition on these string methods here. So the first one that we have is the trim method. So the trim method basically removes the white space from both ends of a string, like from the front end and the bacon. And after that, we have to lowercase method, which simply converts all character in a string to the lowercase. After that, we have the replace method. That will actually help us to find a pattern in our string, and it will do the replacement over there. And after that, we have the split method. So what is the function of the split method? Basically, it will convert our string into the arrays of the item that we have in our string in ascending order, and after that, we have the join method. So the joint method would actually take all the elements that we have in the array into a single string. Okay? So these are the definitions of the methods that we will be using in our project. Now, one thing that we have to do before going into our code, we have to go through our step by step documentation that we have built. Just like our first project. So basically, in our documentation, the first thing that we have done is we have added the purpose of this code, and after that, we're going to write down our estimal structure, then the CSS styling that are already done, and then the JavaScript code. So in the JavaScript code, I have divided this into the multiple different steps. The first step would be to select the estimate elements with the help of JavaScript, and then we'll define our function, and then we have to add our event listener to the button, and then we have the model logic. Then we're going to run our model check on the page load. So these are the things that we have to do in our project. And I will also add this documentation in our project resources. All right. So now let's just jump into our VS code and we have to create JavaScript file here that will be MindtJs Alright so now I have to do a zoom in here. Perfect. So the first thing that we have to do is access the required elements, so we're going to write down aces elements. So I have to go back into our estimate file and let's see what are the elements that I would required in my Javascript. So I would required both of these inputs. So we're going to have the input here. So the ID is first word, and then we also have the second word, and then we're going to have the model here. Then we'll also need this paragraph with the result ID, also the button here, and then we can also need to have the aces of this button, all right. So we're going to start with our inputs. So we're going to go back to our JavaScript file here and I'm going to write down let so I'm going to name it as the first word. So let's just write down document. Get element by ID. And now I have to add the ID that is actually first word here. Perfect. Let me just verify again. Yes, we have the first word, and in a similar way, we're going to have the axis over second input. So let's copy this and we'll simply paste this here, and this will be the last word, and we need to check the ID value here again, this is the second word. Sec inward. Perfect. And after that, we need to have the excess of the button. So I'm going to write down anagram button document, get element by ID, and now we have to add the ID here. So the D of our button is check button. So now we have to add this. Perfect. After this, we have to access the paragraph with the result ID. So let me just copy this code again and put it here. Let's just change the value here, and this will be itself. And after this, we need to have the excess of our model elements. So the first would be the model. So I'm going to write down document get element, and I think the ID is model. So let's just verify this again. Yes, we have this model. And after this, we need to have the D of this button. So let's copy this from here. And let's just write down close model. Write down get element by ID. Now we have to add our ID value here. Perfect. So now we have access all the elements that we might require in our JS code. So first of all, now what we have to do we have to verify again that we are getting excess of all the elements here. So what I need to do here, I will simply do the console log with each of these variables. So this will be the first word. Let's just copy this and this will be the last word or we can change this to the second word. That will be the better naming. Okay? And after this, what we have to do, we're going to go here with the anagram button, then we're going to go with the result, then we're going to go here with the model, then the closed model button. So let's save this and now we need to go back into our browser, and we have to go back into our project, open up the inspect here. Okay, so now I need to put this into the full screen. Let's click on Console now, and now you'll be able to see that we are having the excess of six elements here. So we have the inputs, we have the button, we have the result, then we have the model and the close module as well. So we are having the excess of Eles successfully. Now what we have to do we have to build our function. So now we're going to build our function here. So right now, I just have to write down our check anagram function. So I will be doing this in arrow function format. So this will be check anagram. And here we need to have the input of two values. So I'm going to write down first word, text. Perfect. Okay, I'm going to change this to the second word. All right. Okay, so actually, we have to do the same thing on the first word text and the second word text. Okay? So as I've already defined you, that what do we have to do in the anagram here? So anagrams are basically the words that has the same characters, so they are having the same characters and also the same count of number, but different order. All right. So the example was that if I'm having the silent here, and then we also have the word which is isten. So both of these words are actually anagram to each other. But how do I know this? Or how can we check this to build our function? Okay. So we have a trick here that what we can do here. So let's say that if we are having a simple word, nothing crazy here. So what we're going to do here, we're going to simply change the order of text here. So we're going to order this in a way that they should be alphabetically in ascending order. All right. So I'm going to simply copy this from here and I will go to the browser and then I'll go here to the ha GPT I will simply asking put this in ascending or. So I have to add this with the characters, okay? All right. We have sorted the characters of our word in the ascending order alphabetically. Okay? So we're going to go back now. So the ascending order of this word that we have silent is actually this one. And if you try to check the ascending order of this one, we'll be having the same results. Okay? But how we are going to do this in the Javascript is pretty simple. So the first thing that we have to do, we're going to get the input of our word. So I'm going to write down first word. And since it is the input value, we will need to write down dot value property here. Perfect. Alright, so first, I have to check whether this is working or not. So I'm going to go into the console log, write down first. Word text here. And now what I have to do as we know that we have to add the event listener. Okay? So we have to add the event listener on our button, anagram button. So I'm going to add anagram button here, and let's just add the event listener. So we're going to add add event listener here. So this will be click event, and now what we have to do we have to pass our function. That is chat anagram. Okay. So if you're also unfamiliar with the event listeners and all this stuff, you can check out my edge calculator project on which I have defined everything on the dome from the pay six. Okay? So right now, we're going to simply pass this and just save this and we'll go back into our project. And now we have to open up the inspect again. Perfect. So if I write down anything here, so let me just write down silent here. Okay, so we are having the console log of our input. So if I add any sentence here, I have a cat we'll be having. So we'll also be having this in our console lob. Okay. All right. So after the value, we're going to use the trim method. And why we are using the trim method basically to remove the white spaces before the worse and after the worse if I try to add this. Okay. So right now, if I just go back here and remove this method from here, and I need to do one thing here. I'm going to write down dot length as well. And just also add the word as well for the copy this, and we're going to put this here. So we can also have the word and also its length. So if I add any word here, let me just add some space here before the word, and I'm going to add the K, and I'm going to also add some space here. Okay? I let's click on check anagram. And now you can see here that we are having the 12 characters here. But basically, I have already written the four characters here. All right. So to remove this extra spare that we can potentially have or we can have this by mistake in our input, we will use the method trim. So if I just add the trim method here, we'll actually get rid of this white space from the front side and also from the back side. So now if I just go back here and if I just click on the check anagram with the same kind of input, now you can see this we are having no space from the front side and also on the back side and on the characters, we are only having four characters. So that is why we are using the trim method here. So after the trim method, we have to do one more thing to change the values into the lowercase. Okay? So as we know that if I try to compare two things here, so let's just write down. Okay. I'm going to also add the second input here as well. So let's copy this from here. And let's just put this at the second word. All right. And let's put the second one here as well. Perfect. And we also do the console log of our second word text, and we'll also do a comparison here with our first word, text and the second word. So this will be the first word text, is it equal to the second word text? All right. So now what we have to do, we're going to go back in word project. Let's just write down the same input here in our second input. Only the change that I would do here, change the C into capital case. Let's click on check anagram now. You can see this we are having the fall value, even though we are having the same characters here. Only the difference here is that of the upper case in the lowercase. So that is why what we have to do, we have to convert every input into the lower case or to the uppercase, however you prefer to go here. But I'm going to go here to the lower case. So for that, what we'll do here, we're going to write down after our first method and it will be two Lowercase. All right. And I will also do the same thing on our second input. So let's save this. Now if I give the same kind of input here, we'll have the true here, and this is working perfectly fine. So that is why we have to change our text into the lower case so that we don't have the negative response just because of the upper case and the lower case. All right, so after the lower case, we have to add one more method that would actually split our string into the array. Okay? So the name of the method is split method. And in the split method, we have an argument that is treated as a separator. So it simply means that what character that you want to use as the separator in this string. So let's say if I add a character here and I'm going to add the forward slash, okay? And I'll do the same on the second method as well. So let's piece this here and save this and let's just go back into our browser. I'm going to write down check anagram again. And now you can see here that we are only having a single character into our array because we don't have any separator value here. So if I add the separator that we have used, and if I add the dog here, okay, let's just copy this, let's just add the dog here as well, and I'm going to remove this white space from here. So let's remove this All right. So now if I just click on the check anagram again. So as you can see here, this fov slash is being used as a separator in a string. So whatever I add after the foo slash will be considered as a separate array item. So if I add, let's say, eagle here. And if I just repeat this on the second input as well, we're going to have three different inputs here. Okay? So that is how the split methods work, and that is how you can add the separator here. So you can basically add any separator. Okay? So I'm going to go back here. So let's say if I add the separator as the A character. So now, whatever comes after the A will be considered as another a item. So if I just save this again and if I go back and if I just click on the button here, now you can see here that we are having a split on our string whenever we are having the value A here. So similarly, if I have to spit every character in my string, what I will actually use, I will actually add empty string here without the space. Okay? So now if I just save this and now I just click on check nagram now you can see here every character that we had in the string is considered as a separate array item. So that is how we're going to separate our value here. Okay? So now what I have to do, I'm going to simply write down. Let's say, I'm going to write down Listen here, and I will add silent here. If I click on Check anagram, now you can see here that we have splitted our string into the area of characters. But right now you can see this we're having the false value here. The reason is that we are having the same characters in the same frequency, but still we are having the different order here. So what we have to do we have to change the order. So to change the order, we have to use the method here, which is actually called sort method. But before that, I have to use one more method here, and that will be the joint method. So join method basically joins all the items that we have in our array into a string. Okay? So here, I also have one argument that is a separator as well. So if I wanted to separate every item that I have in my array by any character, I can simply add that separator. So let's say that I wanted to separate every array item by comma. So I can simply add the comma here and it will separate every single value that we have in our array in our string. So let's go back. And here what you have to do if I just click on our button. Now you can see this, it is actually separating everything with this comma. But I don't want to have the comma here, okay? So I can simply write down nothing here. So this will be the empty string as well. Now, if I just go back, and if I click this again, you can see this we are having our string value again, but we missed one thing here, which is to sort our value. So how can we sort our value? We're going to go back. And before the join, after the split, we will add one more method, which will be the sort method. And this would actually sort our area of items in ascending order alphabetically. Okay? So if I add the SAR here and if I also add Odd method here, and by default, the sort methods work on the string, not on the number. So for the numbers, you need to add some Colbck function into it. Okay? Right now, I'll just save this and now we're going to have our characters sorted. Now you can see this we are having the same characters here in the same order and in the same number. So now both of these words are actually the anagram. But if I just change the value here to the ate and let's say the dog, it will be false. Okay, so one more method that we can add here. So if I can go back to the hag BT and I have to copy one thing from so we were having these phrases, and you can see this we are having the two words here. I'm going to go here with this one, and I will simply put this here. I'll also copy the second one as well. All right, so I'm going to go back again into our project. Let's just put this as a second value. So now if I just click on the button, you can see this. We are actually having the same characters in the same numbers and even in the same order, but still we are having the false value here. The reason is that we are having this extra space here, if you can see here that we are having this space here, and we also having this space here for the two time, and in the first word, we are having the space for the one time. So that can create the issue when you want to check for the sentences or the phrases. So for that, we have a method which is called replace, okay? So we're going to add one more method here after turning our letters into the lowercase, which is replace method. So in the replace methods, we have the two arguments. First one would be the pattern that we have to match to replace the value, and the second one would be the replace value. So let's say that I wanted to replace the space that we have with a comma or something or maybe the foward slash, something like this. So I can put it like this, okay? And I can do the same thing on the second one as well. So let's save this and we'll actually go back. And if I click on our button, now you can see that we are having this foward slashe. Okay. But obviously, this won't work. We have to add some pattern there. Now to add the pattern, we have a really powerful concept. You might have heard of it, which is regular expression. So I'm going to write down regular expression here. So what is the regular expression here? So if I can zoom it in, you'll be able to see a regular expression is a sequence of characters that form a search pattern. Okay? So we can basically learn that how can we add these regular expressions in our code. But right now we don't have to learn this. We can simply go to the habit, and I will ask him that I want to have a regular expression pattern. Okay, so let me just zoom it in. I want to have a regular expression pattern that matches everything except lowercase characters, right? So I can simply run this prompter all right. So we have our regular expression here, and we also have the modifier so we don't have to go into the detail here. What we can do, you can see here, we can simply copy this from here and we're going to put this into our code. All right, so I need to remove this. Perfect. And I also need to put this here. Perfect. All right, so I have to put this into Okay, so I've done a mistake here. So this will be removed from here and we'll add a split. We need to add the replace method here again. And inside our replace method, we need to put this. Perfect. And I don't want to replace this with anything. I want to replace this with empty string. Okay? So if you still don't understand that what is happening on this method here, you can simply copy this from here and you can go to the Cha JBT again and you can simply ask him how this is working, how this is working. In JavaScript. And it will actually give you explanation on every single step of this, okay? I can write down, put step by step, explanation. Okay? So I think I've done a spelling mistake over there, but it's okay. All right, so here it can simply show you first that on our first response, this expression is a JavaScript method call that processes a string to remove all the characters except the lowercase characters. Okay? So basically, it will remove everything except the lowercase characters. Okay? And as we know that in our code, we're only having the lowercase characters. So it will only remove these spaces that we have and also the spatial characters that we can have. So if I add any dollar sign here, so let's say this one and if I just add this here, this will also be deleted. Click on the button again. All right, so I have to go back, and I think I have done some mistake over here. All right, so I have to put this before this plate method. All right. All right, so I think now this is working fine. So let's just save this again and go back, click onto our button. Perfect. You can see this we have removed these spaces that we had and also our special characters as well. All right. And this is the logic that we had to build to check whether our words are anagram or not. Okay? So now what we have to do, we're going to go back into a code. Let's just change the size here. Now, this is working fine. Okay? Everything that we have in our anagram checker is working fine. Now we have to put this in the conditional format. Okay? So we have our logic that is ready for our check anagram function. Now what we have to do here is that if the first vertex and the second vertex are equal to each other than what it has to do. It will actually add the text in a word result paragraph. I'm going to add the text content property here. So what will be erring here, words are anagram. So let's just save this. And if you go back to our browser, if you click on a button, now you can see this, the words are anagram, and we are having our results here. But we can also add the additional conditions here. So whatever we need to do here, I'm going to put one more condition here that if the first word and the second word are not equal to each other, then basically they will be doing same thing. I'm going to simply copy this and put this here this will be not an anagram. Perfect. I can also put this in if L is state means, and that would work fine. L just put this here. Perfect. Now let's go back to our project and click on Check nagram. We are having the anagram. But if I add, let's say, the cat and the dog, the words are not anagram. It is working perfectly. All right, so the main functionality of our function is actually done because it is checking the word whether they are anagram or not. But now we have to add some H cases. So I'm going to go back to the browser. And here, let's say, if I don't give any input here, if I click on our button, it would actually give us a kind of error. So I have to rephrase this first. Okay. So I have to run the project again. And let's just put this into the spec, go into the console, and let's say if I add the word in the first one and if I don't add any word in the second input. You can see this, it is still giving me not an anagram, but this is not the appropriate message for this kind of the cases. So I have to add the conditions here in our code that I'm going to go back into the main does. So the first would be if the first word text is false. It simply means that if you don't have any first word text, and I'm going to add the end operator, and we're going to do the same thing with the second word text. And here, what I can do, we can simply add the text into our result. Please add both of the inputs. And I can also add a second condition here, safe, and I'll just simply copy this. And now I'll just simply put this here. But here, I will simply change the end operator to the or operator. All right. And here I'm going to change the message too. Please add remaining input here. So here I'm going to add in, and here I will add text Perfect. So let's save this now. And now if I just go back to our browser, and if I don't write anything in my second input. A right you can see here that we are still having not an anagram. There is a reason for this because since it is going through these conditions and also through these conditions, okay? That is why we are having not an anagram. But what I want to do here that whenever if one of these conditions are true, my function should exit from there. So what I can do, I can simply add the return statement here and also here. And now if one of the conditions that we have here are made, our function would not read this part of the code. Okay. So now let's go back and click on the button again. Now you can see this. We are having please add remaining text. So I have to add the space here. And if I don't add any text in both of the inputs, we're going to have this, please add both of the inputs. So now, these are the appropriate messages. So now we're going to go back here and what do we have to do? I'm going to change the condition here that if the length of the force word and if the length or the second word are not matching, simply, they are not anagram, okay? And then we can add the same code in the condition. So let's copy this from here and put this here. Perfect. Now this will work fine. So if I add the silent here and if I add the lesson here, this is going to work perfectly. So we have done our functionality in our main function. So now what we have to do. Okay, now we're going to go back into a document. So let's see what we have to do next year. So we have done the estimL elements. We have defined our function here. We have done the event listener to the button. Now we have to add the model logic. All right? So for that, what I have to do I have to create a function here that will be check model, and this will be the error function as well. So now what we are going to use here, we are actually going to use our local storage. All right. So how you're going to do this is pretty simple. So in local storage, we have two methods. Okay. So one actually help us to see the values that we have in our local storage, see values. In our local storage. And second one actually help us to set values in our local storage. Set values. So the method that we use here to see the values or to look the value is actually get items. Okay? And here we're going to write down the name of the property here. Okay? And in the set values method, this is actually set items method. And in here, we have to add two things. First one is the name of the property, and then we have the value here. So you can also give it a name here, and then we have the value here. So you can put down the name here and the value here. And to access this, you just have to add the name here. Alright, so now we're going to use our first method, which is GT items. So I'm going to write down our condition here if we don't find. So let me just write down the local storage. Now we can access these elements here. So you can see here that we are having these different methods and the property. So length is actually the property, and other than that, we are having these methods here. So right now we have to use GD item methods, and I'm going to use the parenthesis. And now we have to look for the name of the property. So let's say if I just want to see with it All right. So it simply means that return me the value of the property visited, in my local storage. But if I have to reverse this condition, like if I don't want to find this property, then I can simply add the not operator here. So this condition now would simply means that execute the code. If you don't find the item in the local history. So this will be, let's say, the visited property. All right, so now we have to add our code block here. So if I don't see the property here in my local storage, right now, I'm just doing the console log here, okay? We don't have the item visited in our local storage. So let's save this and we're going to go back into our code. So I will simply refresh this page. So first, I have to go back here into the storage. Now, let's go back into the local storage. Now you can see this we are having this key name here, which is visited. So if you have this visited key in our local storage, this condition won't be true. So I'm going to go back here and I'll simply remove this from here right now. Perfect. Now I'll just go back into the console log. Let's just rephrase the page. Okay, so I have to run this function as well. So we're going to run this function. So how can we do this? All right, so I have to add the keyword cons here. And yeah, now what we have to do. All right, so I want to run this function whenever I rephrase the page. So how can you do this in our code? It's pretty simple. We're going to write down Window here. Now we have to add our event here, which is load. And now what I have to do, I'm going to simply call this function here, which is check model. All right, so now I just add our semicolum here, save the file. Alright, so it's not loading. So I think I have done some mistake in my code, probably. So if I can go into the Google to fix this, I think I have done some mistake in the name of my event. So I'm going to go back here and through there is not working. All right. Okay. Okay. So I think I've done a mistake in the name of it. So basically, it is not load. It is actually onload. So I can simply write down the onload here. Yes, exactly. So I've done a mistake here that it was actually on load. Okay? So now we have to do, let's just rephrase this. Now we're going to go back into our browser, go to our project. Now you can see this we are having our Console load. Okay? So right now we don't have our visited key in our local storage. So if I can go back here, click on the storage, click on the local storage. Now you can see here that we don't have our visited key. So now what we have to do, we're going to go back, and now what I have to do is basically that if I don't have this visited property or the visited key, I actually want to display my model. So how can you do this? It's pretty simple. We're going to access our model property here. So I'm going to write down model and to add or to change the property in the CSS of it, we need to write down a style property, and inside the style, how we need to access the display property, and this will be block. So now let's just rephrase this and go back to our project. And now you can see this we are having our model here. So now we have to go back to our inputs. So if I click on this button, it won't work. Okay? So the reason is pretty simple. I haven't added anything on the close model button. So for that, we need to go back here and do our project, and I have to add the event listener on the button. So here what I have to do, I'm going to simply write down close model, add event listener, and here what I have to do, it would be on the click event and here, I'll just add this callback function. So this will actually change the model value from display block to the hidden again. And this would probably work. So I can write down hidden here again. Let's just go back to our project, click on the button. So I think I've done some mistake here, maybe in the valley or something. So I'm going to simply copy this, and here we basically take the help of the hagiPiti. So I'm going to ask him? What is the issue in this code? I think there's some issue in the value. All right, so I have done a mistake here, okay? So basically, the head is the value of visibility property, and I was trying to add this on the display property. Okay, so that was actually the mistake. So now what we have to do we just have to add none there, and this is going to work. So I'm going to simply change the value here. And as you can see here that in our project, we are basically using the chat DBT as our AI assistant, Okay, to help us to understand our code and to find the bugs in our code and to put a better solution if possible. So now if I just go back to our browser, and now I just click on this button, we are having our purse. Perfect. But still we are having issue here that if I click on the refresh page again, we are having this message again