JSFiddle - React, Tailwind, and code Playground

by Esther Mun

HTML

<article>
    <header>
         <h2>Top ten reasons to take a course at GB!</h2>
         <span class="author"> SEM </span>  
         <span class="date"> March 20th </span>
    </header>
    <ol id="reasons">
        <li>Great</li>
        <li>Learn</li>
        <li class = "best">Career</li>
    </ol>
</article>

CSS

body {
    width: 300px;
    height: 300px;
    border: 1px solid #0000ff;

    margin: auto;
}
header {
    background:#ff3399;
    color: #fff;
   padding-top: 25px;
    padding-bottom: 25px;
    text-align: center;
}

JavaScript

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

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