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 Practice Manipulating the DOM!
You have completed Practice Manipulating the DOM!
Preview
This video covers one solution to the challenge.
This video doesn't have any notes.
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
Hey, how'd it go,
0:00
were you able to complete
the practice session successfully?
0:01
If not, it's all good, you can watch
my solution compared to what you wrote,
0:04
and then try to recreate it yourself.
0:07
You can also reference all my code
when you download the project files.
0:09
So first, to set the text of the h1,
I first selected it
0:12
with document.querySelector, and
assigned it to the variable title.
0:18
Then I used the textContent property,
0:24
which reads or
sets text values of elements.
0:26
And I assigned title.textContent a string
with the text, My Activities List.
0:29
And as you can see, this displays the text
My Activities List inside the h1 tag.
0:35
Then to set the color of
the h1 to a different color,
0:41
I used the style property on title
to set an inline color style.
0:45
And I set my headings
color value to dodgerblue.
0:50
After that, to set the content
of the description paragraph,
0:56
I first assigned the element with
the class desc to a desc constant.
1:02
And the instructions mentioned
that the content should contain
1:08
at least one HTML tag,
which should have provided you a hint.
1:12
Remember, the innerHTML property lets
you read and replace any content
1:16
between an element's opening and
closing tag, including HTML syntax.
1:21
So I called innerHTML on desc and
1:26
set the paragraph's content to,
A list of fun things I want to do today.
1:30
Notice how I added emphasis to the word
fun by placing it inside tags.
1:35
Next, I set the class attribute
of the ul By selecting it and
1:44
assigning the ul to the constant list.
1:49
Then I used the class name property on
list, and assigned it the string list.
1:54
And the CSS file already includes
styles for the list class,
2:00
which applies padding and
a drop shadow to the list.
2:04
Right below, to create a new list
item that gets added to the list,
2:10
I use the document.createElement method,
which lets you create a new HTML element.
2:15
And I passed the method the element I
wanted to create as a string, an Ii, and
2:22
I assigned it to the variable item.
2:27
And I once again used the innerHTML
property to set the item's
2:31
inner content to an input element and
the text, Eat ice cream.
2:35
Finally, to add or
append the new item to the list,
2:42
I used the appendChild method on list.
2:45
Which is the parent element of the list
items, which I already selected above.
2:50
And I passed a method,
the newly created item.
2:55
Okay, let's keep moving, the next task
asked you to change all the input
3:02
elements from text fields to check boxes.
3:07
So for this,
3:10
I use the getElementsByTagName method
to get all the input elements.
3:10
You could have also used the query
selector all method to target them, and
3:16
I assigned them to the constant input.
3:20
Now, in order to change all
the inputs to check boxes,
3:23
I had to iterate over all
of them using a for loop.
3:27
And inside the for loop, I set
the input's type attribute to checkbox,
3:30
and this turns them into check boxes.
3:35
Now, the last two tasks had you work with
3:42
this extra div at the bottom
of the container.
3:45
So first, I created a new button
element using the createElement method,
3:49
and set its text content to Delete
using deleteButton.textContent.
3:55
And to add this new button
inside the extra div,
4:01
I first had to select
the div with the class extra.
4:04
Then I called appendChild on extra,
passing it the newly created deleteButton.
4:09
Finally, to remove the extra div element
from the DOM when a user clicks the Delete
4:22
button.
4:27
I first selected the div
with the class container,
4:28
which is the parent of the extra div.
4:32
Then I set the delete button to listen for
4:38
mouse clicks with
the addEventListener method.
4:41
And I passed the method the string click,
or the name of the event that listens for
4:44
mouse clicks.
4:49
Then I instructed it to delete the extra
div when the button is clicked,
4:50
using a function.
4:54
So inside the function, I called
removeChild on the parent container.
4:55
The removeChild method takes the child
element you want to remove as an argument.
5:02
In this case, it's the extra div element.
5:06
So now your page should
look similar to mine.
5:10
You may have done things a bit different,
and that's totally fine.
5:13
And don't worry if you didn't get
everything correct the first time.
5:16
If not, why not start over and try the
exercise without looking at my version?
5:19
You're also going to learn a whole
lot more about DOM manipulation
5:23
in our JavaScript courses and workshops.
5:28
So I'll see you soon, and happy coding.
5:29
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