This is a dynamic landing page project, as the main focus on building it dynamically using JavaScript.
- Using and array to store sections and loop through them using for/of loop to create navbar links and link each link with the corresponding section.
- Using a scroll event to hide or show the navbar when scrolling.
- Creating a button as its function to scroll to top when clicking using the event click.
- Using h2 headers in the sections to toggle an active class as when clicking on a certain header, the corresponding section will collapse or show the collapsed section when clicking again, using normal for loop to iterate through each header of a section.
- Using getBoundingClientRect function to be able to activating the viewport section as the section in the viewport will be highlighted with the aid of your-active-class, the change will occur in the sections background.
- Every scrolling movement is smoothly implemented.
- Testing the performance time and print it to the console window.
- With the value -150px, the feature of hiding the navbar while not scrolling is now on the par for all devices even for the devices with 240 X 320 dimensions.
Mainly I've depended on the Udacity content per se, but here is a list of the external resources that I've used.