JSFiddle - React, Tailwind, and code Playground

by marketingaddict8

HTML

<h1>Random Quotes</h1>
<p>Press The below button to read a random quote</p>

<p id="demo"></p>

<p id="demo1"></p>

<div class="button" onclick="loopQuotes()">Get a quote</div>

<p id="demo1"></p>
<div class="button" onclick="loopQuotes2()">Get a quote</div>
<script type="text/javascript">
var quotes = [("Quote 1"), ('quote 2'), ('quote 3'), ('quote 4')];
var quotes2 = [("Quote 1000"), ('quote 2000'), ('quote 3000'), ('quote 4000')];


function loopQuotes(){ 
var length = quotes.length; 
var max = quotes.length - 1;
var min = 0;
var rand = Math.round(Math.random() * (max - min) + min );

//console.log(rand);
document.getElementById('demo').innerHTML = quotes[rand]; 

}

function loopQuotes2(){ 
var length = quotes2.length; 
var max = quotes2.length - 1;
var min = 0;
var rand = Math.round(Math.random() * (max - min) + min );

//console.log(rand);
document.getElementById('demo1').innerHTML = quotes2[rand]; 

}
</script>

CSS

.button {
  background-color: #333333 !important;
  color: #ffffff;
  border-radius: 3px;
  max-width: 300px;
  padding: 20px;
  text-align: center;
}

.button:hover {
 background-color: #888888 !important;
}