Using elements

Run through the versions for a step through

by jazahn

HTML

<div id="lipsum">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In gravida, neque sed volutpat hendrerit, metus tellus tincidunt eros, vitae accumsan sem libero id ligula. Pellentesque pellentesque interdum neque sed egestas. Donec accumsan dolor sed purus pellentesque aliquet. Nunc enim lorem, mattis vel turpis faucibus, bibendum dignissim odio. Vivamus eu pharetra mi, et congue lorem. Sed fermentum tellus sagittis placerat euismod. Nulla enim lorem, venenatis a magna sit amet, pretium consectetur est. Quisque id sem tempus felis suscipit ultricies. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent sodales risus ut dignissim tempor. Etiam id ipsum vel risus congue condimentum.</div>

<div id="output"></div>

CSS

#lipsum {
    font-size: 6px;
}
.red {
    background-color: red;
}
.blue {
    background-color: blue;
}
.green {
    background-color: green;
}

JavaScript

var lipsum = document.getElementById("lipsum");
var output = document.getElementById("output");

var sentenceArray = lipsum.innerHTML.split(".");
var count = 0;
var colorArr = ['red', 'blue', 'green'];

var spanArray = sentenceArray.map(function(item){
    var newSpan = document.createElement("span");
    newSpan.className = colorArr[count % 3];
    
    
    var newText = document.createTextNode(item);
    var newDot = document.createTextNode(".");
    newSpan.appendChild(newText);
    newSpan.appendChild(newDot);
    count++;
    
    return newSpan;
});

console.log(spanArray);

var outputDiv = document.createElement("div");
var reduced = spanArray.reduce(function(previousValue, currentValue, index, array){
    return previousValue + currentValue;
});
//outputDiv.appendChild(
//output.appendChild(reduced);

console.log(reduced);