JSFiddle - React, Tailwind, and code Playground

JS fact rotator with css animation and array

by Andrew Pougher

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<h4>
Did you know ?
</h4><div id="drewswords" class="animated fadeInLeft"><p>John C. Fremont named the San Francisco Bay's entrance "Chrysopylae" (Golden Gate) because it resembled Istanbul's Golden Horn.</p></div>

CSS

@import 'https://fonts.googleapis.com/css?family=Anton';
body{background:white;}
#drewswords{font-family: 'Anton', sans-serif;font-size:22px}

JavaScript

var TextData = ['<p>San Francisco has 215 historic landmark buildings, ten historical districts and 14,000 Victorian homes.</p>','<p>San Francisco is built on 43 hills.</p>','<p>San Francisco cable cars are the only moving National Historic Landmark.</p>','<p>Union Square is among the top four shopping areas in the nation.</p>','<p>John C. Fremont named the San Francisco Bay\'s entrance &quot;Chrysopylae&quot; (Golden Gate) because it resembled Istanbul\'s Golden Horn.</p>','<p>Denim jeans were invented in San Francisco for the Gold Rush miners.</p>','<p>Irish coffee was invented in San Francisco.</p>','<p>There are over three hundred coffee houses within the city boundaries of San Francisco.</p>','<p> The original United Nations charter was drafted and signed in San Francisco.</p>','<p>The original Spanish name for San Francisco was Yerba Buena, meaning &quot;good herb&quot; or&quot;good grass.&quot;</p>','<p>There are over 250 wineries in the nearby Napa Valley.</p>','<p>Construction of the Golden Gate Bridge began in January 1933, and opened to vehicle traffic four and 1/2 years later on May 28, 1937, at a cost of $35.5 million.</p>','<p>The total length of the Golden Gate Bridge is 8,981 feet, with a clearance of 220 feet above the water.</p>' ];

var current_text = 0;
var arrLgth = TextData.length;
console.log(arrLgth)
function rotator_selectFirstText()
{
	current_text = Math.floor(Math.random() * parseInt(arrLgth) );
}

function rotator_updateText()
{
var words = document.getElementById('drewswords');
// in sync with the class added to the DOM view
document.getElementById("drewswords").classList.toggle('fadeInRight');
words.innerHTML = TextData[ current_text ] ;
}

rotator_selectFirstText();
rotator_updateText();

function rotator_NextText()
{
	current_text = ( current_text + 1 ) % parseInt(arrLgth);
	rotator_updateText();
}

setInterval( rotator_NextText, 10 * 1000 );