Word Play 1

Step 1
In this project, we will be using a big list of Scrabble words to do a variety of things
Step 2
In this lesson, we will be making a website that can check if an input is a Scrabble word
Step 3
We have the Scrabble dictionary inside the file named "words.html"
Step 4
Let's start by adding some HTML elements to "index.html"
Check Your Work
Step 5
Save your code

We should be able to see this on our website

Step 6
Change the input's placeholder text to show something more informative
Step 7
Now let's add the jQuery CDN to the head tag inside "index.html"

I click on the jQuery CDN button to copy the line of code and then use the Ctrl+V shortcut to paste inside the head tag

Step 8
Now add a script tag inside the body tag to run the "index.js" file
Step 9
The previous two steps are letting our website to use jQuery which is a special form of Javascript coding
Step 10
Let's add some jQuery code inside "index.js"

This will take all the code from the words.html file and pass it to the data variable which we will print to the console.

Check Your Work
Step 11
Save your code and open the console

We should see a weird script followed by the Scrabble dictionary

Step 12
Right now the data is one very long string that we want to split up into separate words

To do this we need to use a string function called split(), here's an example of how the function works:

Step 13
Add a new function named "organizeData" that will split the data into separate words

Note: "\n" is referred as the new line character so therefore data will be split up whenever a new line is entered.

Check Your Work
Step 14
The console should now display the words separated in an array

Check the official console by using the shortcut Ctrl+Shift+J:

Step 15
You may not see it but we have a problem with each word having unnecessary blank spaces

Here's an example of me displaying the problem:

Step 16
To fix this problem, we will use another string function named "trim()" that removes all white spaces
Step 17
Let's add a global variable named "words" that will hold an array of all the words
Step 18
Now lets add every word to the words array and trim the excess white spaces
Step 19
Now we need to solve the problem of the script that appears in the words array

Here's an example of me displaying the problem with the first 19 lines being a script we don't want part of the dictionary:

Step 20
We need to find a way to remove the first 19 items inside the "words" array

Here's another picture displaying our problem:

Step 21
We will need to use an array function called "slice" to take a part of the array out

The function slice needs a start index to now where to begin the slice (which is included) and it also needs an end index to know where to stop the slice (which is not included).

Step 22
Let's now use slice to get rid of any unwanted item from the words array
Check Your Work
Step 23
The words array should now be ready to use
Step 24
Delete the console log from our code so it doesn't display the words array anymore
Step 25
Inside "index.html" add an id to the input tag so we can find out its value inside the Javascript code
Step 26
Now inside "index.js" add this code at the bottom to print the input in the console
Step 27
Now call the function when the search button is clicked

Add this code to index.html:

Check Your Work
Step 28
Save your code and test the program to see if the input if displayed in the console
Step 29
The next step will be to check if the input is a string of only lower case letters

To do this we will need to check if each character in the string has an ASCII value between 97 and 122

Step 30
Make a function that will check if an input is valid or not

Add this to the bottom of the index.js:

Step 31
Let's now use the function in the checkInput function
Check Your Work
Step 32
Try testing some examples to see if it can really check if an input is valid
Step 33
You may have noticed but there is a problem with capital letters being invalid
Step 34
We can solve this by converting the input to lower case using a new function called "toLowerCase()"
Step 35
Add some code to make the input all lower case
Check Your Work
Step 36
Uppercase letters should now be valid
Step 37
Now make a function to check if the input is equal to a word from the words array

Add this code to the bottom of index.js:

Step 38
Let's now use the function to check if the input is a word and print the result to the console

Add this code inside the checkInput function:

Check Your Work
Step 39
Save your code and check if the program can detect if the input is a word
Step 40
The final step is display the result on the actual website
Step 41
First, add a paragraph tag to the HTML code with an id called "result"
Step 42
Let's now make a new variable called result inside the checkInput function
Step 43
Then replace the console.log with code to assign result to the strings
Step 44
The final step is to change the html code to display the result
Check Your Work
Step 45
Save your code

We should now see the result appear on the website

Step 46
The lesson is now over!

In the next lesson we will learn about anagrams and how to find them

Word Play 1 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