Word Play 3

Planning
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

2
Information
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

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

Add this code to index.html:

5
Step 4
Now make the input call a function named "suggest" when typing inside the input
7
Challenge
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

9

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:

10
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

Information
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
11
Information
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:

14
Challenge
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.

12
Check Your Work
Step 12
Save your code

The suggestions should now appear below as we type an input

15
Planning
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:

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

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

Information
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:

23

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

24
Challenge
Step 19
Let's now make the result add all seven parts of this new string we want
25
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

Information
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

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

Add this to index.css:

26
Check Your Work
Step 24
We should now have the program working as we planned!
Planning
Step 25
In the next lesson, we will make a website to help with crosswords
29
Word Play 3 Info

Account

MVCode Clubs

Created By

Missing tiny aaronjau101

Course:

Word Play

Access Level

premium

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