window.addEventListener('load', function() {

  var matches = document.getElementById('matches');

  var input = document.getElementById('first_name');

  var result = document.getElementById('result');

  matches.addEventListener('click', function(event){

    var studentID = event.target.dataset.studentid;

    var record = students[studentID];

    result.innerHTML = `<div>Name: ${record.name}</br> Track: ${record.track} Achievements: ${record.achievements} Points: ${record.points}</div>`

  })

  input.addEventListener('input', function(event){

    matches.innerHTML = '';

    var matchArr = [];

    var inputString = event.target.value;

    for(var i in students){

      var student = students[i];

      if(student.name.substring(0, inputString.length).toLowerCase() == inputString.toLowerCase() && inputString.length > 0){

        matchArr.push(i);

      }

    }

    displayStudents(matchArr);

  });

})

​

function displayStudents(matchArr){

  for(var i in matchArr){

    var studentID = matchArr[i];

    var e = document.createElement('div');

    e.dataset.studentid = studentID;

    e.innerHTML = students[studentID].name;

    matches.appendChild(e);

  }

}

​

​

​

​

​

​

var students = [

      {

        name: 'Hanna',

          track: 'Front End Development',

            achievements: '158',

              points: '14730'

      },

      {

        name: 'Joshua',

          track: 'iOS Development with Swift',

            achievements: '175',

              points: '16375'

      },

      {

        name: 'Becky',

          track: 'PHP Development',

            achievements: '55',

              points: '2025'

      },

      {

        name: 'Jacob',

          track: 'Learn WordPress',

            achievements: '40',

              points: '1950'

      },

      {

        name: 'Dug',

          track: 'Rails Development',

            achievements: '5',

              points: '350'

      }

    ];

​

​

​

​

​

​

​

​

​

​