Skip to content

trzarocks/udacity-landing-page

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

13 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Landing Page Project

Table of Contents

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.

Description

Conversion of a static landing page into an interactive one using javascript.

Strategy

The DOM is queried for all

elements. Utilizing the id and data-nav attributes, a navbar is created within ul.navbar__list. Links are li.

An event listener uses scroll and getBoundingClientRect() checks to see if the section is in the viewport. This toggles the class of the section.your-active-class and a.active as appropriate.

Another event listener uses clicks on the navbar to set active state of the menu items and uses scrollTo() to create a smooth scrolling effect on click.

About

cd0428 Javascript & the DOM project repo.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • HTML 41.0%
  • CSS 31.9%
  • JavaScript 27.1%