Feature: Search through mentors by tags

[CallumDennisIE]

The HTML div element for each mentor can have data attributes added to them. The attributes could possibly be:

• 'data-exp' - For the number of years of experience the mentor has.
• 'data-location' - For the mentor's location (i.e. Dublin / London).
• 'data-role' - The current role the mentor has (i.e. Hiring Manager / Software Developer).

A HTML form can then be used to select the user's preferences, for example, a mentor that has 5+ years of experience and is living in Dublin. When the user clicks the search button then a JavaScript function will check the data attributes of all of the mentors, if they do not match, then hide the element, using the display property.

I have created a rough mock-up of this design here.

[CallumDennisIE]

Current blocker:

I was using JQuery to check the 'checked' attribute of the checkboxes to see if they are selected. However, the 'checked' attribute does not actually reflect if the box has been clicked, only its default state.

"A Boolean attribute indicating whether this checkbox is checked by default (when the page loads). It does not indicate whether this checkbox is currently checked: if the checkbox's state is changed, this content attribute does not reflect the change."

Documentation

Next Steps:

The new plan is to try and get the value of the input's rather than the checked attribute.

[CallumDennisIE]

Outcome:

By using jQuery to check for all elements in a class, I can now check to see if the ':checked' CSS Selector is added. If the selector is added, then the value attribute can be accessed.

Code Sample:

// Check when the search button is clicked
$(".search-mentors").click(function () {

  // Return the values of only the checked element
  $('.form-check-input:checked').each(function(){
    console.log(this.value)
  });
})

Next Steps:

Use this information to then hide/show based on the data-attributes on the cards.