This project was created to practice real-world scenarios for DOM manipulation. The functionality of this project shows how to append dynamically by addind data to the DOM, and to show how JavaScript can make a website more dynamic vs a static web page.
Live webpage here: https://vara-co.github.io/landing-page/
This project is meant to be a one page, which smoothly scrolls up and down depending on the element selected in the Navigation Bar. Hovering-over the element will highlight the section, but clicking on it, will create the smooth transitioning scroll.
The starter Code can be found here: https://github.com/udacity/cd0428-landing-page/
However, edits were made to make this project more personalized.
- CSS Directory
- styles.css <-- Ladning Page styling file
- js Directory
- app.js <-- JavaScript functions to make this landing page dynamic
- index.html <-- Main HTML content file -.DS_Store
- CODEOWNERS
- LICENSE.txt
- README.md
DOMContentLoaded:
NavBar:
Mouseover and Mouseout Event Listeners:
.offsetTop:
scrollTo() and behavior:
- https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTo
- https://www.sitepoint.com/community/t/scroll-down-to-to-id-with-javascript-fixed/423158/2
Adding and Removing active class:
- https://stackoverflow.com/questions/38990163/how-can-i-add-and-remove-an-active-class-to-an-element-in-pure-javascript
- https://www.w3schools.com/howto/howto_js_active_element.asp
- https://design2seo.com/blog/web-development/js/add-active-class-with-foreach-loop/
Highlighting the Active Navigation:
- https://alikhallad.com/how-to-highlight-active-links-for-one-page-navigation-with-javascript/#google_vignette
- https://www.sitepoint.com/community/t/highlight-the-active-link-in-a-navigation-menu/38169/4
getBoudningClientRect():
- https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect
- https://developer.mozilla.org/en-US/docs/Web/API/Visual_Viewport_API
Viewport Section:
Other relevant resources:
- https://dev.to/areeburrub/change-nav-link-s-style-as-you-scroll-4p62 https://stackoverflow.com/questions/38667825/fastest-way-to-get-elements-in-viewport Other relevant resources:
https://dev.to/areeburrub/change-nav-link-s-style-as-you-scroll-4p62