JSFiddle - React, Tailwind, and code Playground

by Michele Marcucci

HTML

<div id="container">
     <h2><span>Testimonials</span></h2>

    <div id="comment"></div>
</div>
<div id="test"></div>

JavaScript

//create and fill the array
var commt = [];
var names = [];
var i = 0;
commt[0] = '<blockquote class="quote"><p>0';
commt[1] = '<blockquote class="quote"><p>1';
commt[2] = '<blockquote class="quote"><p>2';
commt[3] = '<blockquote class="quote"><p>3';
names[0] = 'Lindsey P. / Champaign, IL.</p>';
names[1] = 'Dr. San Jose / Hayward, California';
names[2] = 'Thomas H. / Palos Heights, Illinois';
names[3] = 'Mary Beth / Niceville, FL';

//shows how many comments there are
var maxComments = 4;

//get empty elements
var comment = document.getElementById('comment');

//this section will create the inital comment shown
//creates a random number 
var number = Math.floor(Math.random() * 4);

//adds the HTML to div
window.onload = comment.innerHTML = "<p>" + commt[number] + "</p>" + "<h3 class='commentSliderH3'>" + names[number] + "</h3>";

//This rotates the comments
setInterval(function () { //same content as above

    var number = Math.floor(Math.random() * maxComments);
    comment.innerHTML = "<p>" + commt[number] + "</p>" +
        "<h3 class='commentSliderH3'>" + names[number] + "</h3>";
}, 2000); // Runs the function every 9031ms