Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
This video introduces the challenge relating to "Manipulating the DOM" that you'll be working to complete.
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
[MUSIC]
0:00
>> Hey everyone, Guil here,
it's time for more JavaScript practice.
0:04
This time, you're going to
practice DOM manipulation, or
0:08
making changes to the DOM.
0:10
This exercise is a follow up to the making
changes to the DOM stage of our JavaScript
0:12
and the DOM course, so
if you haven't watched that stage yet,
0:17
I recommend watching it before
trying this practice session.
0:20
I also added a link to this
stage in the teacher's notes.
0:22
So in JavaScript,
once you've selected an element,
0:25
you can manipulate it
in many different ways.
0:28
So to get you some practice with some of
those actions, you're going to be getting
0:31
and setting DOM elements, text, HTML, and
attributes, also changing CSS styles,
0:34
creating elements, as well as
appending and removing DOM nodes.
0:40
So to get started, go ahead and
launch the work space with this video,
0:43
I've included HTML, CSS, and
a JavaScript file for this exercise.
0:46
You're going to write your JavaScript
here inside the file scripts.js, so
0:51
now let's walk through
what you'll need to do.
0:56
The page has several elements you're
going to manipulate with JavaScript only.
0:58
So over in scripts.js, you'll see eight
comments with the instructions you'll need
1:04
to follow,
to complete this practice session.
1:08
So first, using JavaScript, you're going
to set the text of the h1 element,
1:11
and you can take the text anything you
want, for example the title of the list.
1:18
Then you'll set the color of
the h1 to a different color,
1:23
again you can set it to
the color of your choice.
1:27
After that, you'll set the content
inside the paragraph with
1:29
the class desc or description, add any
text you want inside the paragraph.
1:34
The only requirement is that
the inner content has at least
1:39
one HTML tag, so for example,
1:44
you can place part of the content inside
strong or end tags, or inside a link.
1:46
Then you'll set the class
attribute of the ul to list,
1:52
then you'll create one new list item,
1:58
set its content to any text you want,
and add it to the ul.
2:02
Now currently, all the input elements
in the list are text fields,
2:07
so the next part of the challenge asks
you to change all the input elements
2:12
from text fields to checkboxes.
2:17
And to give you more practice
with node creation and
2:20
removal, I added this div with the class
extra to the bottom of the container,
2:23
as you can see,
it's styled with a bright red background.
2:28
So using JavaScript only,
you're going to create a button element,
2:32
set the button's text to Delete, and
add the button inside the extra div.
2:38
And finally, you'll write code that will
remove the extra div element from the DOM
2:46
when a user clicks the delete button.
2:51
So the goal is to get your page to look
similar to mine, this exercise is a great
2:53
way to practice what you've learned so
far about JavaScript and the DOM.
2:59
So good luck, have fun, and in the next
video I'll walk you through my solution.
3:02
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