Word Play 3

Step 1
This lesson will be displaying autocomplete suggestions as the user types an input

The suggestions will also change color as the user hovers over them and will change the input if clicked

Step 2
You may have noticed but there is already an autocomplete to the input

This is a default option and will only suggest things previously typed in the input, so not really helpful for us

Step 3
Start by turning off the default autocomplete inside the input tag

Add this code to index.html:

Step 4
Now make the input call a function named "suggest" when typing inside the input
Step 5
Create a suggestion function inside of index.js that changes result to the input's value

Hint: If you need help with these two blanks, then look at the first and last line of code inside the checkInput() function

Make sure that v is also set to all lower case!

Check Your Work
Step 6
Check if the input's value is pasted below as you are typing it
Step 7
Let's now add an if statement that will update the result only if the input is valid

Update this code inside the suggestion function:

Check Your Work
Step 8
Check if it works by typing an invalid input that should stop the result from appearing

This will help us in the next step when we are comparing the input to all words

Step 9
The logic to create our list of suggestions will be to check if the start of each word is equal to the input
Step 10
The "slice" function will be useful because it can get part of a string

We can use it by slicing a word's first amount of letters as explained in the example below:

Step 11
Let's now compare all the words and see if they start with the same letters as the input

The hidden code is checking if the input is equal to a slice of the word.

That slice starts at the first letter and needs to be as long as the input's length.

Check Your Work
Step 12
Save your code

The suggestions should now appear below as we type an input

Step 13
The next step will be to make the suggestions clickable and cause the input to change to the suggestion
Step 14
Create a new function named "changeInput" that will change the input to a new value

Add this to the bottom of index.js:

Step 15
Right now the result's HTML code looks like this:
Step 16
We will need to make the HTML code look like this:
Step 17
To accomplish this, we will need to break up the new string whenever we need to place the word

So including the word variable, we will need to add seven strings together to accomplish the complete string

Step 18
We need to learn how to add quotation marks to strings without causing the string to end

Here's an example of how it will cause an error:

To add a quoation mark to a string without closing the string, add a forward slash / before the quotation mark, like so:

Step 19
Let's now make the result add all seven parts of this new string we want
Check Your Work
Step 20
Save your code

We should now be able to click on a suggestion that will make the input change to it

Step 21
Let's now make the suggestion turn yellow if the mouse is hovered on top of it

We will be using the CSS code to easily accomplish this

Step 22
First link the CSS file to the website by adding this line of code into "index.html"
Step 23
Now make all <a> tags turn yellow when the mouse hovers over it

Add this to index.css:

Check Your Work
Step 24
We should now have the program working as we planned!
Step 25
In the next lesson, we will make a website to help with crosswords
Word Play 3 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