Carson3377 / Sidebar

JavaScript Project --

Sidebar

In this JavaScript project, we're going to create a sidebar this time with animation effects along with a toggle.At first, you will only see a visible toggle performing a bouncing effect on the blank page. Once your javascript functionality is worked, you'll be able to see a visible and moveable sidebar when the toggle is clicked. Sidebar

Credit: FreeCodeCamp.org

The JavaScript key methods may be applied:

• document.querySelector() --> Select CSS selectors '.sidebar-toggle', '.sidebar', and '.close-btn' link to the buttons.

• addEventListener() --> Include an event listener to listen event 'click' for the toggle and close buttons.

• classList.toggle() --> Return CSS classname 'show-sidebar' of the toggle method.

• classList.remove() --> Return and bind with remove method to remove the CSS classname 'show-sidebar'.

• If Else Statement --> Decide the toggle button to open or close the content.

• Contains() --> Returns true if a node is a descendant of a node, else false.

That's a Wrap!