JSFiddle - React, Tailwind, and code Playground

by aprilkw

HTML

<article>
    <header>
         <h1>Top ten reasons to take a course at George Brown!</h1>
 <span class="author">Me</span><span class="date">march 20th</span>
    </header>
    <ol id="reasons">
        <li>It's fun!</li>
        <li>You will learn</li>
        <li class="best">Advance your career</li>
    </ol>
</article>

CSS

article {
    border:1px solid #333;
    margin: 15px;
}
header {
    min-height: 200px;
    background-color:#773311;
    text-align: center;
    color:#fff;
    padding-top:50px;
}
header span.author {
    margin-right: 20px;
    font-style:italic;
}
header span.author:after {
    content" | ";
}

#reasons .best {
    font-weight: bold;
}

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);
    }
}