Convert jQuery's 'getElementsByClassName' to vanilla JavaScript

[dongskyler]

Objective of this issue

To pass test ./__tests__/pendingTestChallenges/getElementsByClassName.test.js

Steps

1.

For initial setup instructions, please refer to our Contributing Guidelines.

See useful commands during development.

2.

In ./lib/equivalentsLab.js, modify/add entries of jquery and vanilla of getElementsByClassName.

jquery: should be a regular expression (regex).
vanilla: should be a string (or a concatenation of strings and regex captured group numbers).

Essentially, we are using regular expressions, specifically with the help of method regex.replace(jquery, vanilla), to convert jQuery to vanilla JavaScript.

The logic of the program is near Line 55 in ./lib/vanilla.js.

For example, below is a section of ./lib/equivalentsLab.js:

[
...
  {
    name: 'documentReady',
    jquery: /\$\(document\)\.ready\(/g,
    vanilla: "document.addEventListener('DOMContentLoaded', ",
  },
  {
    name: 'getElementById',
    jquery: /\$\(('|")#(\w+[\w_-]*?)('|")\)/g,
    vanilla: 'document.getElementById(' + '$1' + '$2' + '$3' + ')', // eslint-disable-line
  },
...
]

3.

To run the test, use command:
yarn jest ./__tests__/pendingTestChallenges/getElementsByClassName.test.js

4.

After successfully passing the test, please move ./__tests__/pendingTestChallenges/getElementsByClassName.test.js to ./__tests__/finishedTestChallenges/getElementsByClassName.js.

Run command yarn test to see the code passes the test.

If so, great job! Please submit a pull request. For more information, please refer to our workflow in Contributing Guidelines.

Linting warnings

If you get linting warnings, don't be discouraged. First, try to resolve the linting warnings.

However, if it's reasonable, you may override Eslint by adding // eslint-disable-line at the end of the lines you'd like to override.

You're also very encouraged to ask questions under this post. We're here to help.