Preview
Video Player
00:00
00:00
One Solution
5:32This video covers one solution to the challenge.
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