Well done!

You have completed Practice Selecting DOM Elements!

Preview

Introducing the Practice

3:17 with Guil Hernandez

This video introduces the challenge relating to "Selecting DOM Elements" that you'll be working to complete.

Resources

JavaScript and the DOM - Treehouse

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

[MUSIC] 0:00

Hey everyone, Guil here. 0:04

It's time for some practice to help make what you've learned stick, and 0:05

become a faster and better developer. 0:08

You're going to sharpen your JavaScript skills by practicing 0:10

the basics of selecting DOM elements with JavaScript. 0:13

This exercise is a follow-up to the getting a handle on the DOM stage of our 0:16

Javascript and the DOM course. 0:20

So if you haven't watched that stage yet, 0:22

I suggest you watch it before trying this challenge. 0:24

I've also added a link to the stage in the teacher's notes. 0:27

So to make a web page interactive with JavaScript, 0:30

you'll first grab a hold of the elements you want the user to interact with. 0:33

This is called selection. 0:37

It's a way to identify an element for the browser, so the browser can target it in 0:39

the document and make it available for us to do something with it. 0:43

So JavaScript provides a number of methods that let you select elements on a webpage. 0:47

To get started, go ahead and launch the workspace with this video. 0:51

For this exercise, I included a webpage setup using the Bootstrap framework. 0:55

So here, you'll see an HTML file, images, and a JavaScript file. 0:59

You're going to write JavaScript that selects some of these HTML 1:04

elements inside the file scripts.js. 1:08

Scripts.js has six comments with instructions about the methods you'll use 1:11

to select the elements. 1:16

Now in the first two stages of the JavaScript and the DOM course, you saw how 1:18

you're able to set inline styles on an element using the style property. 1:22

So below some of the comments, 1:28

I included a line of code that applies a style to the selected element. 1:30

Now normally, you'll apply styles with CSS. 1:35

But for this exercise, we're applying the inline style so 1:38

that you can immediately see if your code worked and selected the correct elements. 1:40

All right, so first up, 1:45

you're going to use a method to select the element with the ID about. 1:47

And to apply this border style here, 1:52

you'll need to assign the returned element to the about variable. 1:55

Then, you'll select all the h2 elements in the document, and 2:00

using JavaScript, set the color of the h2 elements to a different color. 2:05

It can be the color of your choice. 2:10

After that, you'll select all elements with the class card. 2:12

Then with JavaScript, set their background color to the color of your choice. 2:17

In step four, you'll select only the first ul in the document and 2:22

store it in a variable named ul. 2:28

This is going to set its border style, as you can see here, to 2 pixels, 2:31

solid indigo. 2:36

And step five asks you to select 2:38

only the second element in the document with the class container. 2:40

And if you assign the return element to a variable named container, 2:45

it will set its background color to royalblue. 2:49

And finally, you'll select only the anchor elements that have a title attribute. 2:52

And you'll set their color value to the color of your choice. 2:59

So when you preview the HTML file of this workspace in the browser, 3:04

you should see the selected elements with the color, background, and 3:08

border styles applied via JavaScript. 3:11

So good luck, and in the next video, I'll show you my solutions. 3:13

You need to sign up for Treehouse in order to download course files.

You need to sign up for Treehouse in order to set up Workspace