JSFiddle - React, Tailwind, and code Playground

by Mykola Senyk

HTML

<p>
    <span class="index">1</span>.
    <span class="name">John Doe</span>,
    <span class="age">25</span>
</p>
<p>-------------------------------------</p>

CSS

span.index {
    font-weight: bold;
}
span.name {
    font-style: italic;
}
span.freshAge {
    color: green;
}
span.oldAge {
    color: red;
}

JavaScript

var group = [
    {name: "John Doe", age: 25},
    {name: "Mark Brown", age: 16},
    {name: "Jim Smith", age: 88}
];
for (var i=0; i<group.length; i++) {
    var person = group[i];
    
    var p = document.createElement("p");
    
    var indexSpan = document.createElement("span");
    indexSpan.innerHTML = i+1;
    indexSpan.className = "index";
    p.appendChild(indexSpan);
    var text = document.createTextNode(". ");
    p.appendChild(text);
    
    var nameSpan = document.createElement("span");
    nameSpan.innerHTML = person.name;
    nameSpan.className = "name";
    p.appendChild(nameSpan);
    p.appendChild(document.createTextNode(", "));
    
    var ageSpan = document.createElement("span");
    ageSpan.innerHTML = person.age;
    if ( person.age < 18 ) {
        ageSpan.className = "freshAge";
    } else if ( person.age > 65 ) {
        ageSpan.className = "oldAge";
    }
    p.appendChild(ageSpan);
    
    document.body.appendChild(p);
}