For this project, you will be writing most of your code in js/app.js.
Rubric Tip: All the points mentioned below will help you to satisfy the criteria for the project rubric. Please make sure to re-review the rubric for detailed project requirements prior to submission.
Start by linking your app.js.
Build out your HTML and at least 4 content sections. The rest of your functionality relies on these sections.
Take a quick look at all the HTML elements in index.html. Note the values for their id, class, and data attributes.
Think about how you can create, say, an unordered list (i.e., bulleted list) in HTML from this structure, and where you be placing that list.
Think about how you’ll test whether a section is in the viewport.
What actions are you performing that will cause interactivity with the DOM?
Build the navigation menu.
Add functionality to distinguish the section in view.
How can we use classList methods to change the CSS being displayed? What about removing that CSS?
Add the functionality to scroll to sections
Add an active state to your navigation items when a section is in the viewport.
Detect the element location relative to the viewport using .getBoundingClientRect() built-in function.
Set CSS class active state when the element is in the viewport.
-
app.js -
styles.css
-
index.html
