// eslint-disable-next-line complexity
  function moduleToggleHandler(item) {
    const contentContainer = item.querySelector('.module-listing__content');
    const list = item.querySelector('.module-listing__list');
    const numberOfItems = getNumberofItems(list);

    // eslint-disable-next-line curly
    if (!contentContainer || !list || !numberOfItems) return; // Stop execution if any of the targetted items fails

    // if the number of children is greater than 4, then in the component a condition is checked where it turns on the link html
    if (numberOfItems > 4) {
      const link = item.querySelector('a.module-listing__toggler');
      // eslint-disable-next-line curly
      if (!link) return;

      link.addEventListener('click', function () {
        // eslint-disable-next-line no-use-before-define
        // USE CALL ON THE FUNCTION buttonClickHandler HERE .....
        buttonClickHandler.call(this, contentContainer, list);
        // Call the function with 'this' set to the clicked button s
      });
    }
  }



	// SO WE CAN USE THIS IN HERE => which will refer to the button itself
  function buttonClickHandler(container, list) {
    const listHeight = list.getBoundingClientRect().height;
    const buttonIsExpanded = this.getAttribute('aria-expanded') === 'false';

    // Toggle aria-expanded when click occurs
    this.setAttribute('aria-expanded', !buttonIsExpanded ? 'false' : 'true');

    // change the text of the link based on the data attr being expanded or not
    this.textContent = !buttonIsExpanded
      ? 'See all module items'
      : 'See less module items';

    // change the html class name
    if (container.classList.contains('shortlist')) {
      container.classList.replace('shortlist', 'longlist');
      container.style.maxHeight = `${listHeight}px`;
    } else {
      container.classList.replace('longlist', 'shortlist');
      container.style.maxHeight = '13rem';
    }
  }

const shaunObj = {
  name: 'gary',
  year: 1987,
  currentYear: new Date().getFullYear(),

  // solution 1 = declare a normal function as this is bound to these functions
  calcAgeOne: function () {
    const self = this;
    const yearsold = self.currentYear - self.year;
    return yearsold;
  },

  // solution 2
  calcAgeTwo: function () { // declative function again but with arrow function inside
    console.log(this);

    const calcAgeArrow = () => {
      console.log(this);
      const yearsold = this.currentYear - this.year;
      return yearsold;
    };

    return calcAgeArrow(); // return the arrow function to the parent function
  },

	// DO NOT DO THIS
  // calcAge: () => {
  //   const yearsold = this.currentYear - this.year;
  //   return yearsold;
  // },
};

console.log(shaunObj.calcAgeOne());
console.log(shaunObj.calcAgeTwo()); // works with

const davidObj = {
    first: 'David',
    last: 'Mchale',
    year: 1978,
    currentYear: new Date().getFullYear(),
    age: function () {
        const yearsold = this.currentYear - this.year;
        return yearsold;
    },
};

const maryObj = {
    first: 'Mary',
    last: 'Jones',
    year: 1985, // Add this
    currentYear: new Date().getFullYear(), // Add this
};

maryObj.age = davidObj.age;

console.log(maryObj.age()); // Output should be Mary's age




// alternative cleaner way

const davidObj = {
    first: 'David',
    last: 'Mchale',
    year: 1978,
    currentYear: new Date().getFullYear(),
    age: function (year, currentYear) {
        const yearsold = currentYear - year;
        return yearsold;
    },
};

const maryObj = {
    first: 'Mary',
    last: 'Jones',
    year: 1985,
    currentYear: new Date().getFullYear(),
};

// Borrow the age method with parameters to a function outside both objects
maryObj.age = function() {
    return davidObj.age(this.year, this.currentYear);
};

console.log(maryObj.age()); // Output should be Mary's age

class ClassMates{
	constructor(name,age){
    	this.name=name;
      	this.age=age;
    }
  	displayInfo(){
    	return this.name + "is " + this.age + " years old!";
    }
}

let classmate = new ClassMates("Mike Will",15);
classmate.displayInfo();  // result: Mike Will is 15 years old!

class Pencil {
  constructor(price) {
    this.price = price;
  }

  isExpensive() {
    return this.price >= 10;
  }
}

//usage
const bic = new Pencil(3);
bic.isExpensive();

html 
test 
html