(upbeat music)
- [Instructor] Welcome back.
Here's how I solved
the Add a New Element challenge.
In the exercise falls for this movie
you'll find my solution
where you can look at the code
compare it to your own
and see where they differ
and where they are the same.
To solve this challenge,
I repeated the content creation process
we've covered several times
in the course so far.
You'll find that code at the very end
of script dot JS
under a separate comment up here.
First, I created a new constant
called main nav.
Here I used documents create element
to create a new nav element
then I grabbed that new main nav
use class lists and add
to add a new class to it
called main navigation.
This will be the class
I target using CSS
then I created another constant
called nav list
here again I used
document create element
only this time I created a ul.
So now we have a nav element
and a ul element.
They're not connected together right now
but they will be soon
then up here I've set up a constant
called nav content
and use the template literal
to just output five list items
so here we have a list item
then the link inside
that points just at the hash
so that it doesn't do anything
then I've added some words inside.
This can be anything
basically just dummy content
to test this out.
Then we grabbed nav list
and set the inner HTML
to this nav content
so just inject the code
into the unordered list.
So let me get an unordered list
with five items.
Then I grab main nav
that would be the nav element
we already have
and I append nav list to it.
So that way inside nav
we now have a ul
with all of these list items
and then finally we use
document query selector site header
to find the site header
and then we append main nav
to the site header.
Jumping over into index dot HTML,
scrolling down a bit,
you'll see here we have site header,
it's the header
and by using the append method
we're effectively adding the nav
at the bottom here
before the header element ends.
If I wanted to add it after
I could use another method
to add it after
but it makes sense
for a main navigation
to sit inside the header
of the document.
Then finally I added
some very basic style here
just so that it looks okay.
I'm targeting main navigation.
You'll remember that's the class
that's appended here to the nav.
Then I'm using display flex
to display the menu horizontally
and I'm doing a little bit of tweaking
just to make it look okay
and then I grab each of the anchors
so each of the links
inside the main navigation ul
set them to block
and give them some padding
so that they are split apart.
Jumping over to the browser
this is what it looks like
here we have a navigation menu
in the header
that displays horizontally
with equally spaced items
and I am now ready
to further expand it
by adding actual links
adding some proper styling
and do whatever I want.