JSFiddle - React, Tailwind, and code Playground

by Andy Mcloughlin

HTML

<article>
    <header>
         <h1>Top ten reasons to do stuff blah blah<h1>
        <span class="author">Andrew Mclouglin</span>
        <span class="date"> March 20th</span>
        </header>
    <ol id="reasons">
        <li>top ten stuff</li>
        <li>best</li>
        <li>345</li>
        <li>dsfsgf</li>
        <li>dfgfdgf</li>
    </ol>
                
</article>

CSS

article {margin: 0 auto; width:50%;}

JavaScript

var topList = document.getElementById("reasons");

/*
for(var el = topList.firstElementChild; el; el = el.nextElementSibling){
    alert(el.textContent);
    }
    */

for (var el = topList.firstElementChild; el; el = el.nextElementSibling) {
    if (el.classList.contains("best")) {
        alert("the best reason to take a course is: " + el.textContent);
    }
}