Challenge 2

Get All Email Addresses from a Staff Directory

JavaScriptjQuery

Background

Your employer wants you to send an email to all faculty in the McKay School of Education, but you do not have a complete email list. You need everyone's email in the organization in a way that you can send them an email blast in Microsoft Outlook.

Task

Get all emails from a website as a comma-separated list.

There are many ways of doing this, but in looking at the webpage in the Inspector, notice that the cells with the email addresses all have the class "col-md-4". You also run $() in the Inspector Console and notice that jQuery is available. So, you might try running the following jQuery command in the Inspector Console to see if this at least gets the right data:

$('.col-md-4')

Though the results look accurate, there's also a lot of unnecessary spacing and returns in the data (e.g., "/n"). So, you can ask an AI the following prompt:

find the text of all '.col-md-4' elements and return them as an array with the contents trimmed of white space and returns

ChatGPT returns the following:

const colMd4Elements = document.querySelectorAll('.col-md-4');
const trimmedTextArray = [];
colMd4Elements.forEach(element => {
  const text = element.textContent.trim();
  trimmedTextArray.push(text);
});
console.log(trimmedTextArray);

Run this in the Inspector Console, and you will get the following results:

This can then be copied into Outlook or elsewhere.

This content is provided to you freely by EdTech Books.

Access it online or download it at https://edtechbooks.org/elearning_hacker/get_all_email_addresses_from_a_staff_directory.