main.js

// this is vanilla JS to add dynamic behavior to
// a webpage. Can you figure out what this does?
const login = document.getElementById('login');
const loginMenu = document.getElementById('loginMenu');

login.addEventListener('click', () => {
  if(loginMenu.style.display === 'none'){
    loginMenu.style.display = 'inline';
  } else {
    loginMenu.style.display = 'none';
  }
});

// In the above example, JavaScript is used to apply behavior 
// to an HTML element with id login. The behavior allows a user 
// to click a LOGIN button that toggles a login form.

// The code below accomplishes the same behavior with jQuery.
$('#login').click(() => {
  $('#loginMenu').toggle()
});

// In this example, the same toggle functionality is accomplished 
// using just three lines of code.