Word Play 2

Step 1
Anagram is a word created by rearranging the letters of another word
Step 2
In this lesson, we will be finding all possible anagrams for a certain input

It will also show anagrams that have less amount of letters than the input such as this example:

Step 3
The way we will check if two words are anagrams is by process of elimination

We go through each letter for a potential anagram word and make sure it can cross out a letter from the input that isn't already crossed out.

Step 4
To find the index of a certain item in an array we can use the indexOf function

Here's an example of the function indexOf returning the number 2 to indicate the index of the letter "R" in the array:

If there is no index then the function will return -1, as shown in this example:

Step 5
Create a function that can check if a potential word is an anagram of an input word

You do NOT need to copy the green lines because they are comments and only there to help explain each line of code.

Also this code should at the bottom of index.js:

Check Your Work
Step 6
Save your code

To test the function add two console.log lines at the bottom of your code and check the console

Step 7
Create a function to check every word in the words array and add it to an array if its an anagram for a certain input

This should go inside index.js:

Step 8
Now let's add a line of code to test the new function

Add this line of code inside the checkInput function:

Check Your Work
Step 9
Try typing an input to the website and see if the anagrams appear in the console
Step 10
Add some code to not include the input as an anagram

The code should be checking if the input and the potential anagram word are EQUAL to each other.

Check Your Work
Step 11
Save your code and test to see if the code worked
Step 12
Now we will display the results to the screen instead of the console
Step 13
To add a line break to an HTML paragraph tag we need to use the "<br>" tag
Step 14
Add this code to display the anagrams if there is any or a message saying there is no anagrams
Check Your Work
Step 15
Save your code and see if the anagrams appear on the website
Step 16
This does not look very good and causes problems when there are many anagrams such as this example:
Step 17
To fix it we will group the anagrams based on the number of letters in the word
Step 18
We will need to find the shortest and longest number to know the range
Step 19
Let's make a function that will find the shortest and longest word in an array

Add this to index.js:

Step 20
Let's now go through each word and check if it is the longest word and update if so
Step 21
Add code to check if there are any words less than the shortest word in order to update it
Step 22
To test it let's add this console.log after we display the anagrams
Check Your Work
Step 23
If you use the example "anagrams" then you should see this
Step 24
Let's make a new function that will display the anagrams all organized

Add this to index.js:

Step 25
Let's now use the function to display the anagrams
Check Your Work
Step 26
Save your code and see if it displays the categories correctly

This should appear for the "anagrams" example:

Step 27
Let's now add the anagrams into their respective categories

The hidden code should be checking if the certain anagram word's length is equal to the certain length category.

Check Your Work
Step 28
The code should now work correctly!
Step 29
In the next lesson we will be adding autocomplete suggestions to help users find a certain word
Word Play 2 Info


MVCode Clubs

Created By



Word Play

Access Level


For Teachers and Schools

Teach coding to your students with MVCode Teach

MVCode offers an integrated product designed to teach coding to students.

Learn more about MVCode Teach