Preview
Video Player
00:00
00:00
Introducing the Practice
3:08This video introduces the challenge relating to "Manipulating the DOM" that you'll be working to complete.
[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