JSFiddle - React, Tailwind, and code Playground

by lchau

HTML

<ul id="test" class="foo">
    <li class="foo a">A</li>
    <ul>
        <li class="bar b">B</li>
        <ul>
            <li class="foo d">D</li>
            <ul>
                <li class="foox i">I</li>
                <li class="foo j">J</li>
            </ul>
            <li class="foo e">E</li>
            <li class="fooz f">F</li>
            <li class="fooz g">G</li>
            <ul>
                <li class="foo k">K</li>
                <li class="foox l">L</li>
                <li><span class="foo">M</span></li>
            </ul>
            <li class="foo h">H</li>
        </ul>
        <li class="foo c">C</li>
    </ul>
</ul>

CSS

li.foo,
span.foo {
  font-weight: 700;
  color: blue;
  background-color: yellow;
  width: 15px;
}

JavaScript

function getElementsByClassName(node, name) {
  // `name` is a string specifying a single CSS class name. This function
  // should return a list of all child elements of `node` that have the class
  // specified by `name`.
  //
  // NOTE: Don't use the native `getElementsByClassName` or jQuery.
  //
  // Fill in this function below:
}

// hints:
// element.classList
// element.children

// Given:
// <ul id="quux">
//   <li class="foo"></li>
//   <li class="bar">
//     <span class="foo"></span>
//   </li>
//   <li>
//     <span class="foobar baz"></span>
//   </li>
// </ul>
//
// EXAMPLE:
//
// var ul = document.getElementById('quux');
// var elements = getElementsByClassName(ul, 'foo');
//
// elements should equal [<li class="foo" ...>, <span class="foo" ...>]