This project aims to emulate real-world scenarios of manipulating the DOM. The functionality in use serves two purposes: appending dynamically added data to the DOM, and to show how javascript can improve the usability of an otherwise static site.
The project is mainly building a multi-section landing page, dynamically building the navigation menu, and adding improvements to the user experience by differentiating the section actively being viewed, and providing smooth-scrolling when a link is clicked on a navigation item rather than the default jump.
This is a demo landing page. The main functionalities include the following:
- Clicking the "Load More Sections" button at the bottom of the Landing Page
- adds 2 more sections to the page, which are also reflected on the navigation bar
- the button disappears after adding enough (9) Sections
- Clicking items on the navigation bar to jump to the desired section
- smooth-scrolling navigating through the page
- While scrolling/reading, the active section is differentiated with a unique style
Dependencies: None
JS Version: ES2015/ES6 JS Standard: ESlint CSS written based on SMACSS architecture.