Exercise: The Logo Hijack

• Navigate to the UCSD website, and open up the Dev Tools console – Cmd-Opt-I (Mac), Ctrl-Shift-I (Windows)
• Find the UCSD logo and store it in a variable.
• Modify the source of the logo's image so that the image now points to the UC Berkeley logo instead.
• Find the header and store it in a variable.
• Change the header background color to 'gold'.
• Find the 'About' menu link and store it in a variable.
• Modify the text of the link so that it says "About Cal" instead.
• Modify the link so that it points to Cal's About page instead.

See Solution

  var logo = document.querySelector(".navbar-brand.visible-xs img");
  img.src = 'http://www.berkeley.edu/images/uploads/logo-ucberkeley.png';
  var header = document.querySelector('div.container-fluid.header-wrap');
  header.style.backgroundColor = 'gold';
  var link = document.querySelectorAll(".main-nav li a")[0];
  link.textContent = 'About Cal';
  link.href = 'http://www.berkeley.edu/about';