skyyyr/html-js-linkedin

Linkedin JS/CSS

Summary

We're almost ready to launch our very own Linkedin Profile!

Copy over the code you wrote in the index.html from the LinkedIn HTML challenge. Try not to make any changes to it!

Releases

Release 0 - Link Up

Let's start by connecting our script.js and style.css files to our html document. Can you recall where in the document the link should be? Get some styling in your HTML file to make it look more like LinkedIn!

Release 1 - Save some Selectors

Next, let's make sure we can query the document by selectors. choose an element(or set of) and make four variables that hold the result of calling document.

• getElementById
• getElementsByClassName
• querySelector
• querySelectorAll

Release 2 - Traverse

Based on your above selectors, try to use a few JS methods to move along the DOM tree.

Release 3 - Manipulate

Using your above selectors:

• Manipulate the innerHTML
• Delete something
• Change CSS
• Add a CSS Property

Release 4 - React (...not THAT react)

Create a few Event Listeners for your profile to react to when a person clicks on an important button, or hovers over your image. Check out the JS features for dropdowns and tabs in bootstrap, and implement one.

Release 5 - Animate

You know the drill, take a selected element, and animate it!Perhaps you can connect your animation function with your previous EVENT LISTENERS??!

Resources:

• Bootstrap Documentation
• Bootstrap Javascript Documentation
• Javascript DOM element functions
• Javascript Event Listeners