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.
This project aims to give you real-world scenarios of manipulating the DOM. The functionality you will be using serves two purposes: to prepare you for appending dynamically added data to the DOM, and to show you how javascript can improve the usability of an otherwise static site. This project barely touches the surface of what is possible, but it does use some incredibly common events, methods, and logic.
For this project, refactor and test as much as possible while you are building. You should figure for every piece of functionality you add, you will likely spend just as much time testing and refactoring your code. If it takes you 3 hours to figure out the logic, it should likely take you another 3 hours determining that you wrote the best code possible. As your skills improve, this process will feel more natural. Make sure to remove any debugging code from your final submission.
The project is structured in 3 main parts
- html
index.html - css
css/styles.css - js
js/app.js
Most of the code was created in the js/app.js file. Only minor changes to the styling and html were necessary to achieve the desired project goal.
The css addition were mainly for the styling of the active classes.
Sections were added in the html for testing purposes of the navigation bar, and selection of the active content.
To view the most notable changes have a look at the main pull request.
No dependencies were used in this project besides the one that came with the setup.
You can try the application here on github pages.
The project is based on the udacity frontend developer nano degree.