I am currently working on a random quote generator, and I seem to have encountered an issue when the "New Quote" button is clicked. To keep things concise, I have simplified and downscaled the data for the quotes, colors, and animations variables. The problem arises as follows: with each click of the button, and a smaller dataset, there is a noticeable delay in response time, and sometimes the colors, quotes, and/or animations do not change as expected. This is evident through inconsistent animation behavior. Even though it is plausible for the new output to match the previous one due to the limited dataset, the animation should still trigger every time but that's not always the case. Without the loadQuotes() function and no window.onload = loadQuotes();, reloading the page by pressing F5 works just fine. However, once I introduce the code within the loadQuotes() function and utilize window.onload = loadQuotes(); at the end of the page for the initial output, issues begin to arise. I attempted moving all variables and the randomNum() function outside the loadQuotes() function (under the assumption they are global), yet this led to the button becoming unresponsive after the page initially loads. My concern lies in achieving the desired page loading behavior akin to pressing F5 using only the button.
function loadQuotes() {
function randomNum(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
var quotes = [
["This is quote number one.", "Person 1"],
["This is quote number two.", "Person 2"],
["This is quote number three.", "Person 3"],
["This is quote number four.", "Person 4"],
["This is quote number five.", "Person 5"]
]
var colors = [
["#096986", "#F69679"],
["#000866", "#FFF799"],
["#7D3563", "#82CA9C"]
]
var animations = ["animated bounce", "animated flash", "animated pulse"]
var getQuotes = randomNum(0, quotes.length - 1);
var getColors = randomNum(0, colors.length - 1);
var newColor0 = colors[getColors][0];
var newColor1 = colors[getColors][1];
var newAnimation1 = animations[randomNum(0, animations.length - 1)]
var newAnimation2 = animations[randomNum(0, animations.length - 1)]
document.getElementById("quote").innerHTML = "<h1>" + quotes[getQuotes][0] + "</h1>";
document.getElementById("author").innerHTML = "<h3>" + "--- " + quotes[getQuotes][1] + "</h3>";
$(document).ready(function() {
$(".side-panel").css("background-color", newColor0);
$(".middle").css("background-color", newColor1);
$("#quote").addClass(newAnimation1);
$("#author").addClass(newAnimation2);
$(".btn").on("click", function() {
loadQuotes();
});
});
}
window.onload = loadQuotes();h1 {
text-align: center;
font-size: 3.5em;
}
h3 {
font-size: 1.5em;
}
/* div { border: 1px solid black; } */
.full-height {
height: 100vh;
}
.side-panel {
background-color: newColor0;
}
.middle {
background-color: newColor1;
}
.quote-box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80%;
height: 65%;
border-radius: 7.5%;
background-color: #FFFFFF;
}
.quote-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 90%;
height: 50%;
}<!DOCTYPE html>
<html lang="en-us">
<head>
<title>Random Quote Machine</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" />
<link rel="stylesheet" href="style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-xs-1 side-panel full-height"></div>
<div class="col-xs-10 middle full-height">
<div class="quote-box">
<div class="quote-text">
<p id="quote"></p>
<p id="author"></p>
<button type="button" class="btn btn-lg pull-right">New Quote</button>
</div>
</div>
</div>
<div class="col-xs-1 side-panel full-height"></div>
</div>
</div>
</body>
</html>