Main Content - adding showcase html
Changing the Showcase content
I'm now going to demonstrate changing the content in the main section in a more significant way. I'm going to insert the show case HTML appropriate for the section.
This is what the showcase section looked like in our previous Article Grid. You can see that it is hard-coding the tech section.
the category-tech class
the h1 "An Article About Technology"
the background image
Each of these can be modified with JavaScript.
In the previous version, we just created a string to insert in the element's innerHTML.
In this version, we're going to insert the HTML for the entire showcase section, but we're going to replace any references to tech with the section name that was clicked.
The statement below would change the element's HTML to be the entire section, but it would be for the technology section. We need to modify the string so that it has the correct section.
Replace the background image
This one requires us to add a new style in the CSS file and use the same technique we used earlier to add a class to the section so that it will be targeted by the new style.
So, in addition to the showcase class, we're going to add a class based on the name of the section.
Let's walk through it manually first. In the HTML file I have left in a commented-out section of HTML that is what we used for the showcase element in the previous version of the page.
We want to temporarily comment it in so we can see how we can change which image is used as the background image based on what link we click on the nav bar.
The only change you need to make is to add an additional class to the section. add "food".
Add the following style
Notice that the two class selectors do not have a space between them. This is how you specify a selector when both classes are on the same element
These two changes cause the background for the section to be updated to use the food image instead of the tech image.
Now, we want to do it programmatically. Remove the "food" class value on the showcase section so we can add that class programmatically through JavaScript.
First, we add the styles to change the background image based on the addition of the new class value on the show case element.
Next, we modify the HTML we are generating to add the new class value based on the section that has been clicked. We want to insert the lower-case section name that we created as the value for the class.
Change the category-{section} class value
Create the category-{sectionNameLC}.
Replace the word Technology with the section name
Solution So Far
We added these styles
Last updated
Was this helpful?