"JavaScript Loops, Arrays and Objects" was retired on December 18, 2020. You are now viewing the recommended replacement.
Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed JavaScript Arrays!
You have completed JavaScript Arrays!
Preview
Write a program using the join(), includes(), and indexOf() array methods you learned about earlier.
Resources
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
All right, now let's do some programming
using the join, includes, and
0:00
indexOf array methods you
learned about earlier.
0:04
We'll use the includes method
to search an array of products.
0:07
We'll create a small search feature for
a product list.
0:10
All products that are currently in stock,
like eggs, milk, and
0:14
bread get stored inside an array.
0:18
We'll create a program that lets you
search if a product is in stock or not.
0:21
The program will also list all of
the products that are in stock.
0:26
To follow along,
open the file search-list.js, and
0:30
make sure to update
the script tag in index.html.
0:35
The src attribute should
point to js/search-list.js.
0:38
This file has an inStock array holding
all the products that are in stock.
0:48
The search variable is assigned the value
a user types into a prompt dialog box.
0:54
When the script loads, a prompt dialog
displays to let the user know that they
1:00
can type a product name to
search the inventory list.
1:04
There is also a message variable
which we'll use to hold the message
1:07
that gets displayed on
the page to the user.
1:11
First, let's write the programming
to search the array.
1:14
If what the user types into the prompt
dialog matches a value in the inStock
1:18
array, we'll display a message letting
them know that the product is in stock.
1:23
This sounds like a job for
a conditional statement.
1:27
What should the condition be in this case?
1:31
Remember, the includes method searches for
a value in an array and
1:35
returns either true or false.
1:39
In the condition,
I'll check if the inStock array includes
1:42
the value assigned to the search variable.
1:47
If the condition evaluates to true, we'll
let the user know that the product is
1:50
in stock by assigning
the message variable the string,
1:55
Yes, we have the value assigned to search.
1:59
And to make the product text appear
bold on the page I'll place it within
2:05
strong tags.
2:09
If the product is not included in the
array, or inStock.includes evaluates to
2:15
false, we'll display a message informing
the user that the product is not in stock.
2:20
By assigning message the string,
2:26
Sorry we do not have
the value assigned to search.
2:30
I want to display the final message in
a paragraph that's inside the main element
2:41
of index.html.
2:46
I'll use document.querySelector
to select the main element.
2:47
Then set its innerHTML property to
a template literal holding p tags.
2:55
Between the tags, I'll insert or
3:07
interpolate the value of
the message variable.
3:09
Before I view this in the browser,
I'll open index.html and
3:13
change the heading text to Product List.
3:17
I'll save my file and
test what I've written so far.
3:24
The prompt dialog appears,
I'll type pizza, click OK,
3:28
and I see that yes, pizza is in stock.
3:32
Refresh the browser, what about celery?
3:36
This time I get the message,
Sorry, we do not have celery.
3:41
Good, it's working.
3:44
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up