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 name = [ ];
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';
name[0] = 'Lindsey P. / Champaign, IL.</p>';
name[1] = 'Dr. San Jose / Hayward, California';
name[2] = 'Thomas H. / Palos Heights, Illinois';
name[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'>" + name[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'>" + name[number] + "</h3>";
}, 2000); // Runs the function every 9031ms