1
00:00:00,580 --> 00:00:01,325
Hey, how'd it go,

2
00:00:01,325 --> 00:00:04,190
were you able to complete
the practice session successfully?

3
00:00:04,190 --> 00:00:07,350
If not, it's all good, you can watch
my solution compared to what you wrote,

4
00:00:07,350 --> 00:00:09,240
and then try to recreate it yourself.

5
00:00:09,240 --> 00:00:12,570
You can also reference all my code
when you download the project files.

6
00:00:12,570 --> 00:00:18,440
So first, to set the text of the h1,
I first selected it

7
00:00:18,440 --> 00:00:24,160
with document.querySelector, and
assigned it to the variable title.

8
00:00:24,160 --> 00:00:26,220
Then I used the textContent property,

9
00:00:26,220 --> 00:00:29,320
which reads or
sets text values of elements.

10
00:00:29,320 --> 00:00:35,880
And I assigned title.textContent a string
with the text, My Activities List.

11
00:00:35,880 --> 00:00:40,240
And as you can see, this displays the text
My Activities List inside the h1 tag.

12
00:00:41,520 --> 00:00:45,719
Then to set the color of
the h1 to a different color,

13
00:00:45,719 --> 00:00:50,791
I used the style property on title
to set an inline color style.

14
00:00:50,791 --> 00:00:54,479
And I set my headings
color value to dodgerblue.

15
00:00:56,963 --> 00:01:02,437
After that, to set the content
of the description paragraph,

16
00:01:02,437 --> 00:01:08,940
I first assigned the element with
the class desc to a desc constant.

17
00:01:08,940 --> 00:01:12,200
And the instructions mentioned
that the content should contain

18
00:01:12,200 --> 00:01:16,980
at least one HTML tag,
which should have provided you a hint.

19
00:01:16,980 --> 00:01:21,421
Remember, the innerHTML property lets
you read and replace any content

20
00:01:21,421 --> 00:01:26,450
between an element's opening and
closing tag, including HTML syntax.

21
00:01:26,450 --> 00:01:30,510
So I called innerHTML on desc and

22
00:01:30,510 --> 00:01:35,130
set the paragraph's content to,
A list of fun things I want to do today.

23
00:01:35,130 --> 00:01:39,885
Notice how I added emphasis to the word
fun by placing it inside tags.

24
00:01:44,643 --> 00:01:49,608
Next, I set the class attribute
of the ul By selecting it and

25
00:01:49,608 --> 00:01:52,900
assigning the ul to the constant list.

26
00:01:54,290 --> 00:02:00,890
Then I used the class name property on
list, and assigned it the string list.

27
00:02:00,890 --> 00:02:04,111
And the CSS file already includes
styles for the list class,

28
00:02:04,111 --> 00:02:06,906
which applies padding and
a drop shadow to the list.

29
00:02:10,262 --> 00:02:15,642
Right below, to create a new list
item that gets added to the list,

30
00:02:15,642 --> 00:02:22,678
I use the document.createElement method,
which lets you create a new HTML element.

31
00:02:22,678 --> 00:02:27,523
And I passed the method the element I
wanted to create as a string, an Ii, and

32
00:02:27,523 --> 00:02:29,820
I assigned it to the variable item.

33
00:02:31,072 --> 00:02:35,984
And I once again used the innerHTML
property to set the item's

34
00:02:35,984 --> 00:02:41,220
inner content to an input element and
the text, Eat ice cream.

35
00:02:42,640 --> 00:02:45,800
Finally, to add or
append the new item to the list,

36
00:02:45,800 --> 00:02:50,110
I used the appendChild method on list.

37
00:02:50,110 --> 00:02:55,140
Which is the parent element of the list
items, which I already selected above.

38
00:02:55,140 --> 00:02:57,925
And I passed a method,
the newly created item.

39
00:03:02,565 --> 00:03:07,072
Okay, let's keep moving, the next task
asked you to change all the input

40
00:03:07,072 --> 00:03:10,350
elements from text fields to check boxes.

41
00:03:10,350 --> 00:03:10,990
So for this,

42
00:03:10,990 --> 00:03:16,396
I use the getElementsByTagName method
to get all the input elements.

43
00:03:16,396 --> 00:03:20,480
You could have also used the query
selector all method to target them, and

44
00:03:20,480 --> 00:03:23,430
I assigned them to the constant input.

45
00:03:23,430 --> 00:03:27,268
Now, in order to change all
the inputs to check boxes,

46
00:03:27,268 --> 00:03:30,702
I had to iterate over all
of them using a for loop.

47
00:03:30,702 --> 00:03:35,964
And inside the for loop, I set
the input's type attribute to checkbox,

48
00:03:35,964 --> 00:03:38,731
and this turns them into check boxes.

49
00:03:42,206 --> 00:03:45,076
Now, the last two tasks had you work with

50
00:03:45,076 --> 00:03:49,030
this extra div at the bottom
of the container.

51
00:03:49,030 --> 00:03:55,169
So first, I created a new button
element using the createElement method,

52
00:03:55,169 --> 00:04:01,031
and set its text content to Delete
using deleteButton.textContent.

53
00:04:01,031 --> 00:04:04,820
And to add this new button
inside the extra div,

54
00:04:04,820 --> 00:04:09,540
I first had to select
the div with the class extra.

55
00:04:09,540 --> 00:04:15,124
Then I called appendChild on extra,
passing it the newly created deleteButton.

56
00:04:22,372 --> 00:04:27,176
Finally, to remove the extra div element
from the DOM when a user clicks the Delete

57
00:04:27,176 --> 00:04:28,440
button.

58
00:04:28,440 --> 00:04:32,610
I first selected the div
with the class container,

59
00:04:32,610 --> 00:04:35,470
which is the parent of the extra div.

60
00:04:38,340 --> 00:04:41,650
Then I set the delete button to listen for

61
00:04:41,650 --> 00:04:44,920
mouse clicks with
the addEventListener method.

62
00:04:44,920 --> 00:04:49,490
And I passed the method the string click,
or the name of the event that listens for

63
00:04:49,490 --> 00:04:50,490
mouse clicks.

64
00:04:50,490 --> 00:04:54,550
Then I instructed it to delete the extra
div when the button is clicked,

65
00:04:54,550 --> 00:04:55,720
using a function.

66
00:04:55,720 --> 00:05:02,680
So inside the function, I called
removeChild on the parent container.

67
00:05:02,680 --> 00:05:06,420
The removeChild method takes the child
element you want to remove as an argument.

68
00:05:06,420 --> 00:05:10,197
In this case, it's the extra div element.

69
00:05:10,197 --> 00:05:13,460
So now your page should
look similar to mine.

70
00:05:13,460 --> 00:05:16,120
You may have done things a bit different,
and that's totally fine.

71
00:05:16,120 --> 00:05:19,470
And don't worry if you didn't get
everything correct the first time.

72
00:05:19,470 --> 00:05:23,540
If not, why not start over and try the
exercise without looking at my version?

73
00:05:23,540 --> 00:05:28,140
You're also going to learn a whole
lot more about DOM manipulation

74
00:05:28,140 --> 00:05:29,880
in our JavaScript courses and workshops.

75
00:05:29,880 --> 00:05:31,780
So I'll see you soon, and happy coding.