stats homepage styling

[Ishi-Singh]

Wireframe

How It Looks Like

• Data analysis dropdown menu

  • The elements inside it change color when hovered on
  • It can be exited by clicking anywhere outside the dropdown

  • function toggleDropdown() {
    var dropdown = document.getElementById("statsDropdown");
    dropdown.style.display = (dropdown.style.display === "block") ? "none" : "block";
    }
    window.onclick = function(event) {
    if (!event.target.matches('.stats-dropdown')) {
    var dropdown = document.getElementById("statsDropdown");
    if (dropdown.style.display === "block") {
    dropdown.style.display = "none";
    }
    }
    }

• Toggleable collaborate button On: Off:

• The following snippet is used for all buttons, it just makes them toggleable

  document.querySelectorAll('.button').forEach(button => {
  button.addEventListener('click', () => {
    button.classList.toggle('active');
  });
  });

• Single and multi-group button: instead of adding these buttons in the containers the wireframes had them in I created a new container that has these options

  • This makes it look more symmetrical, and therefore better
  • These work like radio buttons since these options are mutually exclusive. And when the user clicks on the inactive option it will become active and the active option will become inactive (I can show a demo if this sounds confusing)

This is probably not the best way to do it, but it works

  const singleGroupBtn = document.querySelector('.single-group');
  const multiGroupBtn = document.querySelector('.multi-group');
  singleGroupBtn.addEventListener('click', toggleActive);
  multiGroupBtn.addEventListener('click', toggleActive);
  function toggleActive(event) {
    singleGroupBtn.classList.remove('active');
    multiGroupBtn.classList.remove('active');
    event.currentTarget.classList.add('active');
  }