make the project

README.md

@@ -1,9 +1,5 @@
-# Landing Page Project
+# Landing Page Project 
 
 ## Instructions
 
-The starter project has some HTML and CSS styling to display a static version of the Landing Page project. You'll need to convert this project from a static project to an interactive one. This will require modifying the HTML and CSS files, but primarily the JavaScript file.
-
-To get started, open `js/app.js` and start building out the app's functionality
-
-For specific, detailed instructions, look at the project instructions in the Udacity Classroom.
+the landing page project is project that i make to test my learning on the javaScript during m my education period at Udacity , This project demonstrates a landing page with dynamic navigation, responsive design, and interactive features such as smooth scrolling and active section highlighting. 

index.html

@@ -47,13 +47,21 @@ <h2>Section 2</h2>
         <h2>Section 3</h2>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fermentum metus faucibus lectus pharetra dapibus. Suspendisse potenti. Aenean aliquam elementum mi, ac euismod augue. Donec eget lacinia ex. Phasellus imperdiet porta orci eget mollis. Sed convallis sollicitudin mauris ac tincidunt. Donec bibendum, nulla eget bibendum consectetur, sem nisi aliquam leo, ut pulvinar quam nunc eu augue. Pellentesque maximus imperdiet elit a pharetra. Duis lectus mi, aliquam in mi quis, aliquam porttitor lacus. Morbi a tincidunt felis. Sed leo nunc, pharetra et elementum non, faucibus vitae elit. Integer nec libero venenatis libero ultricies molestie semper in tellus. Sed congue et odio sed euismod.</p>
 
+        <p>Aliquam a convallis justo. Vivamus venenatis, erat eget pulvinar gravida, ipsum lacus aliquet velit, vel luctus diam ipsum a diam. Cras eu tincidunt arcu, vitae rhoncus purus. Vestibulum fermentum consectetur porttitor. Suspendisse imperdiet porttitor tortor, eget elementum tortor mollis non.</p>
+      </div>
+    </section>
+    <section id="section4" data-nav="Section 4">
+      <div class="landing__container">
+        <h2>Section 4</h2>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fermentum metus faucibus lectus pharetra dapibus. Suspendisse potenti. Aenean aliquam elementum mi, ac euismod augue. Donec eget lacinia ex. Phasellus imperdiet porta orci eget mollis. Sed convallis sollicitudin mauris ac tincidunt. Donec bibendum, nulla eget bibendum consectetur, sem nisi aliquam leo, ut pulvinar quam nunc eu augue. Pellentesque maximus imperdiet elit a pharetra. Duis lectus mi, aliquam in mi quis, aliquam porttitor lacus. Morbi a tincidunt felis. Sed leo nunc, pharetra et elementum non, faucibus vitae elit. Integer nec libero venenatis libero ultricies molestie semper in tellus. Sed congue et odio sed euismod.</p>
+
         <p>Aliquam a convallis justo. Vivamus venenatis, erat eget pulvinar gravida, ipsum lacus aliquet velit, vel luctus diam ipsum a diam. Cras eu tincidunt arcu, vitae rhoncus purus. Vestibulum fermentum consectetur porttitor. Suspendisse imperdiet porttitor tortor, eget elementum tortor mollis non.</p>
       </div>
     </section>
   </main>
   <footer class="page__footer">
     <p>&copy Udacity</p>
   </footer>
-
+<script src="js/app.js"></script>
 </body>
 </html>

js/app.js

@@ -1,62 +1,45 @@
-/**
- * 
- * Manipulating the DOM exercise.
- * Exercise programmatically builds navigation,
- * scrolls to anchors from navigation,
- * and highlights section in viewport upon scrolling.
- * 
- * Dependencies: None
- * 
- * JS Version: ES2015/ES6
- * 
- * JS Standard: ESlint
- * 
-*/
-
-/**
- * Comments should be present at the beginning of each procedure and class.
- * Great to have comments before crucial code sections within the procedure.
-*/
-
-/**
- * Define Global Variables
- * 
-*/
-
-
-/**
- * End Global Variables
- * Start Helper Functions
- * 
-*/
-
-
-
-/**
- * End Helper Functions
- * Begin Main Functions
- * 
-*/
-
-// build the nav
-
-
-// Add class 'active' to section when near top of viewport
-
-
-// Scroll to anchor ID using scrollTO event
-
-
-/**
- * End Main Functions
- * Begin Events
- * 
-*/
-
-// Build menu 
-
-// Scroll to section on link click
-
-// Set sections as active
 
 
+// Define the variables
+const navbarList = document.getElementById("navbar__list");
+const sections = document.querySelectorAll("section");
+
+
+// bulid the navigation bar
+sections.forEach(section => {
+  const listItem = document.createElement("li");
+  listItem.innerHTML = `<a href="#${section.id}" class="menu__link">${section.dataset.nav}</a>`;
+  navbarList.appendChild(listItem);
+});
+
+// make the scroll smooth
+navbarList.addEventListener("click", (event) => {
+  if (event.target.nodeName === "A") {
+    event.preventDefault();
+    const targetSection = document.querySelector(event.target.getAttribute("href"));
+    targetSection.scrollIntoView({ behavior: "smooth" });
+  }
+});
+
+// Detect the Active section 
+const setActiveSection = () => {
+  sections.forEach(section => {
+    const rect = section.getBoundingClientRect();
+    const link = document.querySelector(`a[href="#${section.id}"]`);
+    if (rect.top >= -50 && rect.top <= 200) {
+      section.classList.add("your-active-class");
+      link.classList.add("active");
+    } else {
+      section.classList.remove("your-active-class");
+      link.classList.remove("active");
+    }
+  });
+};
+
+
+
+// adding the event listeners to the document to set the fucntion and bulid the project 
+document.addEventListener("scroll", () => {
+  setActiveSection();
+  toggleBackToTop();
+});