Landing Page Project

• [Basic_Status]( #a static landing page #with 3 section elements #without a navigational menu #responsive with no features #a suitable style sheet )

• [Requirments]( #build a multi-section landing page #build a navigational menu according to these sections #make it a dynamically updating navigational menu #make the landing page responsive with fully-featured #edit style sheet to ba used with scrolling active-style #viewed section should be clear, on main section main element #viewed section should be clear, on the navigation bar )

Table of Contents

• [Global_Variables]( #sectionList() #navbarList() #menuLinks() #viewedSectionId() )

• [Helping_Functions]( #build the nav : navbarSections() #Scroll to anchor ID using scrollTO event : getElementOffsets() #Add class 'active' to section when near top of viewport: removeScrollStyles(), addActiveStyle(), addHover() )

• [Main_Functions]( #build the nav : navbarSections() #Add class 'active' to section when near top of viewport : window.addEventListener('scroll', function () {}) #Scroll to anchor ID using scrollTO event : navbarList.addEventListener('click', function (ev) {}) )

Instructions

• [Instructions]( #became familiar with the golbal variables #start with the helping functions, then the main ones #about Helping_Functions : you will find a fully-detailed comments before every line #about Main_Functions : #build the nav : Just calling the navbarSections() helping function #Add class 'active' to section : need a little bit of concentration, so you will find a full description before it, then will find a step by step comment before every coding line #Scroll to anchor ID using scrollTO event: it is not more difficult than the previous one, but to me sure that no one would get lost through, you will find a full description before it, then will find a step by step comment before every coding line )